CSS佈局是一塊非常重要的內容，這裏單獨介紹非佈局樣式。非佈局樣式有下面幾種分類（還有其它分類看系列文章）：
字體，字重，顏色，大小，行高
這些是跟文字相關的樣式。
字體族
族，顧名思義，就是一堆的東西，字體族就是一堆的字體，具體可以分爲五個字體族：
- serif 是襯線字體，字體周圍會有一些裝飾性的小勾角，英文解釋就是：a short line at the top or bottom of some styles of printed letters 襯線，截線（部分印刷體的西文字母頂端或底部的短線）。比如 宋體就是襯線字體。
- sans-serif 是非襯線字體，這種字體的筆劃的 起和收 都是比較規整的。比如 黑體
- monospace 是等寬字體，就是每一個字母佔的空間都是一樣的，我們一般在寫代碼的時候用的就是等寬字體。
- cursive 是手寫體，在網頁中用的較少。
- fantasy 是花體，在英文中很常見。
這五個字體族並不代表某個具體的字體，而是當指定一個字體族的時候會從中找
多字體fallback
就是當一個指定的字體找不到時會接着往後找。
比如：在Microsoft系統裏
body{
font-family: "monaco";
}
雖然body設置的font-family是 monaco，但我係統裏沒有這種字體，瀏覽器就會fallback用別的字體來渲染。
在實際項目中，每個系統會有不同的字體。
Mac系統自帶的字體是"monaco" "PingFang SC"，微軟雅黑 在Mac系統中也會有用戶安裝，尤其是安裝了office的用戶基本上都會有微軟雅黑字體，那就意味着，在寫字體的順序中如果 "Microsoft Yahei"寫在最前面 Mac系統就會首先用"Microsoft Yahei"字體，但是在Mac系統中"Microsoft Yahei"字體的顯示效果是沒有"PingFang SC"好的。所以把只有一個平臺會有的字體寫在最前面，再把其它的寫在後面，像下面：
.body {
font-family: "PingFang SC", "Microsoft Yahei", monospace;
}
注意：字體名稱加引號，字體族 不能加引號。
自定義字體
既然是自定義字體無非就是規定 a字體 長什麼樣，b字體 長什麼樣，如果我規定 a字體 長的是一個手機的圖標，b字體 長的是一個電腦的圖標，那就可以把文字當成圖標用了，這就是所謂的 iconfont。比如：
html代碼：
<div class="custom-font">你好 Hello World</div>
css代碼：
@font-face {
font-family: "IF";
src: url("./IndieFlower.ttf");
}
.custom-font{
font-family: IF;
}
效果如下：
網上有很多圖標庫，比如 阿里巴巴矢量圖標庫，裏面有很多豐富的字體圖標。
行高的構成
行高是由 line-box 決定的，line-box 是由inline-box組成的，inline-box 的高度會決定行高的高度：
html代碼：
<body>
<div>
<span class="c1">inline box 中文</span>
<span class="c2">inline box</span>
<span class="c3">inline box</span>
inline box
<span class="c5">inline box</span>
</div>
</body>
css代碼：
<style>
span {
background: pink;
}
.c1 {
line-height: 20px;
}
.c2 {
line-height: 8px;
}
.c3 {
line-height: 30px;
}
.c5 {
line-height: 28px;
}
</style>
這裏有五個span元素，它們的行高都不同，雖然它們的行高不同但它們渲染的高度是相同的，這涉及到文字的排版，文字排版中有幾條線，底線和頂線之間是文本佔據的區域， 默認情況下文字的排版對齊都是按照基線（baseline）對齊的，所以這些文本雖然行高不同但都是對齊的，行高會決定文字上下之間多餘的寬度，進而把外面的盒子撐起來，所以line-height會撐起來inline-box的高度。
行高相關的現象和方案
1，div元素中字體能垂直居中的原理：
<div style="border:solid 1px red;">
<span style="background:blue;color:#fff;font-size:20px;line-height:60px;">
居中xfg                     
</span>
</div>
效果：
這裏的div沒有定高，div中的span元素也是沒有定高的（當然，span元素默認是內聯元素，給它定高也沒用）；span元素中的line-height:60px;在這裏比字體的高度（font-size:20px;）要高，所以會把div元素撐起來，導致span元素在div元素中上下都有等高空白留出，這樣span內聯元素就在div中垂直居中，所以平時寫字體垂直居中時一般設置line-height就可以了，而且此時可以不用設置div的高度。
2，字體大小不一樣默認情況下按基線（baseline）對齊：
<div class="c1">
<span class="cc1">第一段</span>
<span class="cc2">第二段</span>
<span class="cc3">第三段</span>
</div>
<style>
.cc1 {
font-size: 12px;
}
.cc2 {
font-size: 18px;
}
.cc3 {
font-size: 24px;
}
</style>
效果：
中文字體的底部（注意：不是底線，是底部）就是基線的位置，所以會看到字體會底部對齊。此時div的高度是由第三個span元素撐起來的（但高度並不是字體大小）。
如果想要div元素中的文字都垂直居中，只需要分別將三個span元素設置vertical-align:middle即可。
3，文字旁邊圖片的空白：
<div style="background:red">
<span>文字</span>
<img src="test.png"/>
</div>
有空白是因爲img默認是一個內聯元素，內聯元素就要遵守行高的規則，它也會按照基線（baseline）對齊，基線對齊就意味着 基線到底線之間 是有一段空隙的，這是這個空隙產生的原因，空隙的大小由字體大小來定，如果字體是12px，那空隙將會是3px，這就是經典的圖片3px空隙問題。既然圖片也遵守垂直對齊的規則，那隻需要調整成vertical-align:bottom;按底線對齊即可，這樣縫隙就沒有了。