談談一些有趣的CSS題目（十二）-- 你該知道的字體 font-family

開本系列，談談一些有趣的 CSS 題目，題目類型天馬行空，想到什麼說什麼，不只爲了拓寬一下解決問題的思路，更涉及一些容易忽視的 CSS 細節。

解題不考慮兼容性，題目天馬行空，想到什麼說什麼，若是解題中有你感受到生僻的 CSS 屬性，趕忙去補習一下吧。

不斷更新，不斷更新，不斷更新，重要的事情說三遍。

談談一些有趣的CSS題目（一）-- 左邊豎條的實現方法

談談一些有趣的CSS題目（二）-- 從條紋邊框的實現談盒子模型

談談一些有趣的CSS題目（三）-- 層疊順序與堆棧上下文知多少

談談一些有趣的CSS題目（四）-- 從倒影提及，談談 CSS 繼承 inherit

談談一些有趣的CSS題目（五）-- 單行居中，兩行居左，超過兩行省略

談談一些有趣的CSS題目（六）-- 全兼容的多列均勻佈局問題

談談一些有趣的CSS題目（七）-- 消失的邊界線問題

談談一些有趣的CSS題目（八）-- 純CSS的導航欄Tab切換方案

談談一些有趣的CSS題目（九）-- 巧妙的實現 CSS 斜線

談談一些有趣的CSS題目（十）-- 結構性僞類選擇器

談談一些有趣的CSS題目（十一）-- reset.css知多少

全部題目彙總在個人 Github 。

 

正文從這裏開始。小小的字體其實有大大的學問，可能與字體相關的不少知識都偏設計，不過俗話說技多不壓身，藝高人膽大，多瞭解瞭解總歸沒錯。

 

字體的分類

就 Web 經常使用的一些字體而言，常常據說的字體類型，大體能夠分爲這幾種：

• serif(襯線)
• sans-serif(無襯線)
• monospace(等寬)
• fantasy(夢幻)
• cuisive(草體)

其實大致上分爲襯線字體和無襯線字體，等寬字體中也有襯線等寬和無襯線等寬字體，這 5 個分類是 font-family 的 5 個可用字體系列取值。

也就是說，上述 5 個名字，表明的並不是某個特定字體，而是一系列字體，這些通用的名稱容許用戶代理（一般就是瀏覽器）從相應集合中選擇一款字體。

這也很好解釋了，font-family 中的 family ，家庭的意思，也就是不僅僅指一個，而是能夠指定多個，上述 5 個英文單詞都是 font-family 的可用取值，下文還會詳細講到。

下面詳細瞭解一下每類字體。（原本每個字體都有貼示意圖的，無奈博客園擺出來太影響美觀，能夠移步個人Github閱讀）

 

serif -- 襯線字體

serif，意爲有襯線的字體，襯線的意思是在字符筆畫末端有叫作襯線的小細節的額外裝飾，並且筆畫的粗細會有所不一樣，這些細節在大寫字母中特別明顯。

OK，那麼有哪些經常使用字體屬於襯線字體呢？

宋體（SimSun）

Windows 下大部分瀏覽器的默認中文字體，是爲適應印刷術而出現的一種漢字字體。筆畫有粗細變化，是一種襯線字體，宋體在小字號下的顯示效果還能夠接受，可是字號一大致驗就不好了，因此使用的時候要注意，不建議作標題字體使用。

Times New Roman

Mac 平臺 Safari 下默認的英文字體，是最多見且廣爲人知的西文襯線字體之一，衆多網頁瀏覽器和文字處理軟件都是用它做爲默認字體。

 

sans-serif -- 無襯線字體

sans 的意思是無，sans-serif 也就是無襯線的意思。專指西文中沒有襯線的字體，與漢字字體中的黑體相對應。與襯線字體相反，該類字體一般是機械的和統一線條的，它們每每擁有相同的曲率，筆直的線條，銳利的轉角。

中文下，無襯線字體就是黑體，黑體字也就是又稱方體或等線體，沒有襯線裝飾，字形端莊，筆畫橫平豎直，筆跡所有同樣粗細。

看看又有哪些常見的無襯線字體。

微軟雅黑（Microsoft Yahei）

大名鼎鼎的微軟雅黑相信都不陌生，從 windows Vista 開始，微軟提供了這款新的字體，一款無襯線的黑體類字體，顯著提升了字體的顯示效果。如今這款字體已經成爲 windows 瀏覽器最值得使用的中文字體。

華文黑體（STHeiti）、華文細黑（STXihei）

屬於同一字體家族系列，MAC OS X 10.6 以前的簡體中文系統界面的默認中文字體，正常粗細就是華文細黑，粗體下則是華文黑體。

黑體-簡（Heiti SC）

從 MAC OS X 10.6 開始，黑體-簡代替華文黑體用做簡體中文系統界面默認字體，蘋果生態最經常使用的字體之一，包括 iPhone、iPad 等設備用的也是這款字體。

冬青黑體（Hiragino Sans GB）

又叫蘋果麗黑，Hiragino 是字遊工房設計的系列字體名稱。是一款清新的專業印刷字體，小字號時足夠清晰，Mac OS X 10.6 開始自帶有 W3 和 W6 。

Helvetica、Helvetica Neue

被普遍用於全世界使用拉丁字母和西裏爾字母的國家。Helvetica 是蘋果電腦的默認字體，微軟經常使用的Arial 字體也來自於它。

Arial

Windows 平臺上默認的無襯線西文字體，有多種變體，比例及字重（weight）和 Helvetica 極爲相近。

Verdana

無襯線字體，優勢在於它在小字上仍結構清晰端整、閱讀辨識容易。

Tahoma

十分常見的無襯線字體，字體結構和 Verdana 很類似，其字元間距較小，並且對 Unicode 字集的支持範圍較大。許多不喜歡 Arial 字體的人經常會改用 Tahoma 來代替，除了是由於 Tahoma 很容易取得以外，也是由於 Tahoma 沒有一些 Arial 爲人詬病的缺點，例如大寫「i」與小寫「L」難以分辨等。（這裏故意反過來寫）。

 

monospace -- 等寬字體

這系列字體程序員們其實都不陌生。咱們用來敲代碼的編輯器，字體的選擇常常就是一類等寬字體。

等寬字體是指字符寬度相同的電腦字體，常見於 IDE 或者編輯器中，每一個字母的寬度相等，一般用於計算機相關書籍中排版代碼塊。

除了 IDE ，咱們看到的技術文章中的代碼塊中，常常也是使用等寬字體進行排版。

Consolas

這是一套等寬的字體，屬無襯線字體。這個字體使用了微軟的 ClearType 字型平滑技術，主要是設計作爲代碼的顯示字型之用，特別之處是它的「0」字加入了一斜撇，以方便與字母「O」分辨。

ClearType：由微軟在其操做系統中提供的屏幕亞像素微調字體平滑工具，讓 Windows 字體更加漂亮。在 Windows XP 平臺上，這項技術默認是關閉，到了Windows Vista 才默認爲開啓。

上圖是 Github 代碼區塊的字體設置，能夠看到，默認字體就是 Consolas ，緊接着的幾個都是其它等寬字體，若是用戶的系統中都沒有預裝這些字體，則會匹配最後一個 monospace ，它表示等寬字體系列，會從用戶系統中的等寬字體中選取一個展現。

 

fantasy 、cuisive

fantasy和 cuisive 字體在瀏覽器中不經常使用，在各個瀏覽器中有明顯的差別。

 

中文字體的兼容寫法

一些中文字體，例如font-family: '宋體'，因爲字符編碼的問題，少部分瀏覽器解釋這個代碼的時候，中文出現亂碼，這個時候設定的字體沒法正常顯示。

因此一般會轉化成對應的英文寫法或者是對應的 unicode 編碼，font-family:'宋體' -> font-family: '\5b8b\4f53'。

\5b8b\4f53 是宋體兩個中文字的 unicode 編碼表示。相似的寫法還有：

• 黑體：\9ED1\4F53
• 微軟雅黑：\5FAE\8F6F\96C5\9ED1
• 華文細黑：\534E\6587\7EC6\9ED1
• 華文黑體：\534E\6587\9ED1\4F53

Unicode編碼： 人們但願在一套系統裏面可以容納全部字符，Unicode 編碼解決傳統的字符編碼方案的侷限性，每一個字符佔用 2 字節。這樣理論上一共最多能夠表示2^16（即65536）個字符。基本知足各類語言的使用。

 

字體定義的細節

其餘一些小細節也很重要，譬如定義字體的時候，什麼時候須要在字體兩端添加引號？像這樣：

p{
    font-family: 'Microsoft YaHei', '黑體-簡', '\5b8b\4f53';
}

當字體名字中間有空格，中文名字體及 Unicode 字符編碼表示的中文字體，爲了保證兼容性，都建議在字體兩端添加單引號或者雙引號。

 

字體定義順序

字體定義順序是一門學問，一般而言，咱們定義字體的時候，會定義多個字體或字體系列。舉個栗子：

body {
    font-family: tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;
}

別看短短 5 個字體名，其實其中門道很深。解釋一下：

1. 使用 tahoma 做爲首選的西文字體，小字號下結構清晰端整、閱讀辨識容易；
2. 用戶電腦未預裝 tohoma，則選擇 arial 做爲替代的西文字體，覆蓋 windows 和 MAC OS；
3. Hiragino Sans GB 爲冬青黑體，首選的中文字體，保證了 MAC 用戶的觀看體驗；
4. Windows 下沒有預裝冬青黑體，則使用 '\5b8b\4f53' 宋體爲替代的中文字體方案，小字號下有着不錯的效果；
5. 最後使用無襯線系列字體 sans-serif 結尾，保證舊版本操做系統用戶能選中一款電腦預裝的無襯線字體，向下兼容。

嗯，其實上面的 font-family 就是淘寶首頁 body 的字體定義，很是的規範，每個字體的定義都有它的意義。

 

字體書寫規則

綜上，總結一下，我以爲字體 font-family 定義的原則大概遵循：

一、兼顧中西

中文或者西文（英文）都要考慮到。

二、西文在前，中文在後

因爲大部分中文字體也是帶有英文部分的，可是英文部分又不怎麼好看，同理英文字體中大多不包含中文。

因此一般會先進行英文字體的聲明，選擇最優的英文字體，這樣不會影響到中文字體的選擇，中文字體聲明則緊隨其次。

三、兼顧多操做系統

選擇字體的時候要考慮多操做系統。例如 MAC OS 下的不少中文字體在 Windows 都沒有預裝，爲了保證 MAC 用戶的體驗，在定義中文字體的時候，先定義 MAC 用戶的中文字體，再定義 Windows 用戶的中文字體。其次不少人都不知道 Android 下沒有預裝微軟雅黑和宋體，那麼 Android 機型下的中文字體設置又是很考究的。

四、兼顧舊操做系統，以字體族系列 serif 和 sans-serif 結尾

當使用一些很是新的字體時，要考慮向下兼容，兼顧到一些極舊的操做系統，使用字體族系列 serif 和sans-serif 結尾總歸是不錯的選擇。

 

到此本文結束，若是還有什麼疑問或者建議，能夠多多交流，原創文章，文筆有限，才疏學淺，文中如有不正之處，萬望告知。