摘要：書體宋體仿宋體黑體等例如自帶的宋體實為中易宋體。傳統上說的等線體以當代視角來看通常是較為幼細的黑體。前面的過程我們稱之為編碼，后面的這個過程我們稱之為解碼。部分瀏覽器比如可以選擇編碼自動檢測功能，使用基于統計的方法判斷未定編碼。

原則上 Unicode 中只對字，而非字形編碼。

隨著計算機字體 (computer font) 的普及，可縮放的矢量字體的出現使得「字型」與「字體」的界限逐漸模糊，現今這兩個概念在數字排印領域越來越多地被當做同義詞使用。

例如 Windows 自帶的「宋體」實為「中易宋體」。

這里面，我們經常用到的是serif體和sans-serif體

Serif強調字母筆畫的開始及結束，因此前后連續性強，易讀性高。

Sans Serif則較醒目，但在行文閱讀的情況下，Sans-Serif 容易造成字母辨認的困擾，常會有來回重讀及上下行錯亂的情形。在小字體的場合，通常Sans-Serif比Serif更清晰。

通常文章的內文、正文使用的是易讀性較佳的 Serif 字體，這可增加易讀性，而且長時間閱讀下因為會以word為單位來閱讀，較不容易疲倦。

而標題、表格內用字則采用較醒目的Sans Serif字體，它需要顯著、醒目，但不必長時間盯著這些字來閱讀。

像宣傳品、海報類，為求醒目，它的短篇的段落也會采用Sans-Serif字體。但在書籍、報刊雜志，正文有相當篇幅的情形下，則應采用Serif字體來減輕讀者閱讀上的負擔。在Web設計及瀏覽器設置中也應遵循此原則為是。

中文的書寫體系有兩種標準，一種是簡體中文，一種是繁體中文

另外，圓體（圓黑體）通常也歸入黑體。傳統上說的「等線體」以當代視角來看通常是較為幼細的黑體。

中文字體界不少人不主張用「襯線」、「無襯線」來指代宋體和黑體。

宋體，原形為宋代模仿楷書基本筆劃（如點、撇、捺），但因應當時以木板作活版印刷，為順應木的天然紋理，而從楷體左低右高的斜橫演變成直橫，因為減低損耗而將豎劃加粗的印刷用字體。到明代，這種字體逐漸脫離楷書的模樣，成為一種成熟的印刷字體。

黑體的發明比較晚,學者對于黑體的歷史有很大的爭議,但我們可以發現它是二十世紀早期廣告印刷品的產物。

由于宋體是因為印刷誕生的，所以它更適合報紙和書籍的正文類文字的排版。

由于黑體醒目的特點，常用于標題、導語、標志等等。由于漢字筆劃多，小字的黑體清晰度較差，所以一開始主要用于文章標題，但隨著制字技術的精進，已有許多適用于內文的黑體字型。

本質上是點陣圖片的集合。

渲染極快

顯示效果穩定

容易創建

在小字號、多筆畫時渲染效果較好

視覺效果較差

不適合縮放

是向量圖的集合，用 Bézier 曲線描述字形，適合縮放。

PostScript 字體

Adobe 開發

用三次 Bézier 曲線描述字形。

私有 hinting，價格昂貴

質量高，適合打印專業質量的印刷出版物

又細分為 Type1 / Type3 / CID 等類型

TrueType 字體

Apple 為對抗 Adobe 的 Type1 與 Microsoft 共同開發

用二次 Bézier 曲線描述字形，渲染較快

可內置點陣字體

在 OS X 和 Windows 中是最常見的字體格式

OpenType 字體

源于 Microsoft 獨自開發的 TrueType Open

后 Adobe 加入開發，增加對 PostScript 輪廓的支持

PostScript flavor / TrueType flavor

Adobe 黑體

如何理解點陣字體和輪廓字體的區別呢，其實它們的表現和圖片格式中的png8和png24的的區別很類似，點陣字體都是實色，沒有過渡色，邊緣銳利，而輪廓字體有過渡色，邊緣也比較平滑。很多人把“宋體”（Simsun）當作點陣字體，其實不是，它和“微軟雅黑”（Microsoft YaHei）一樣，都屬于輪廓字體，只不過12px~17px的宋體內置了點陣信息而已。

如下圖，前面有兩個 T 的是 TrueType 的格式字體，O 開頭的是 OpenType 的字體。

OpenType字體中的字形（glyph）、輪廓數據可以在兩種格式中任選其一：一個是在glyf表中TrueType格式輪廓，另一個是在CFF表中的CFF（壓縮字體格式，Compact Font Format）格式輪廓。CFF輪廓數據是基于PostScript語言Type 2字體格式。表格名CFF長度為四個字符，并且以一個空格字符結尾。

TrueType
OpenType

Windows 字體列表

Mac OS X 字體列表

Windows、OS X、Liunx/Unix預裝中文字體demo

上面的例子列舉了Windows、OS X、Liunx/Unix預裝字體以及一些版權字體

為什么需要編碼？

我們知道計算機處理的數據實際上都是二級制的數據,也就是計算機實際上只識別0和1兩種狀態。發明計算機的過程中人們需要解決的第一個問題就是文字的處理問題,也就是我們如何將文字符號轉化為二級制數據，同時我們也需要能夠將轉化后的二進制數據重新轉化為文字符號供我們閱讀。前面的過程我們稱之為編碼，后面的這個過程我們稱之為解碼。這和電信領域更著名的一套編解碼規則莫爾斯碼是一個原理。

鑒于各個國家都有自己的字符集和編碼方式,為了實現在一份文檔中可以正確顯示所有類型的字符，Unicode誕生了，伴隨著互聯網的發展，Unicode字符集和UTF-8編碼方式成了互聯網通信的標準。

這張 Unicode表分成了很多的 block，把某一類字符放在指定的 block 中，如下圖

西文字體比如 Helvetica 等，一定會完成拉丁文對應的 block 中的字形，但是他們是不會去做 CJK（中日韓） 的字形。而特殊字符，比如表情符號等，也是有預留位置的，這也是為啥我們經常發現別人發過來的一些東西是方塊，因為對方發送的字符在我們自己的機器上并沒有相應的字體來顯示。

詳細編碼知識請看 亂碼是怎樣形成的？

當瀏覽器收到來自Web服務器的數據后，第一步就是要把它解碼成可以閱讀的文本，而瀏覽器判斷代碼主要是依據以下方法：

Web服務器返回的HTTP頭中的Content-Type:text/html;charset=信息，這一般有最高的優先級；

網頁本身metaheader中的Content-Type信息的charset部分，對于HTTP頭未指定編碼或者本地文件，一般是這么判斷；

假如前兩條都沒有找到，瀏覽器菜單里一般允許用戶強制指定編碼。

部分瀏覽器 (比如 Firefox) 可以選擇編碼自動檢測功能，使用基于統計的方法判斷未定編碼。

編碼確定后，網頁就被解碼成了Unicode字符流，因為我們得到的文本可能是很多種語言混雜的，里面可能有中文、有英文，它們可能要用不同的字體顯示；

為了統一處理這些復雜的情況，我們要將文本分為由不同語言組成的小段，在有的文本布局引擎里，這個步驟稱為“itemize”。分解后的文本段常被稱作“text run”，但是具體劃分的規則可能根據不同的引擎有所區別。

不少瀏覽器還會在這個劃分下面，在確定具體使用的字體之后，根據使用字體的不同劃分更細的 run，這種 run 可能稱作“SimpleTextRun”，每個都會使用和相鄰不同的字體，最后把它們逐一交給 shaper 進行排版得到要繪制的字形，這樣一來，shaper 的工作就被簡化為在確定的語言、確定的字體下排版確定的文本，生成對應的字形和它們應該放置的位置、占用的空間。

UA 創建(或訪問)一個 CSS 2.2 相關屬性的字體數據庫；

對每個元素的每個字符，先嘗試匹配第一個 font-family 名字；

找到則嘗試匹配剩余屬性 (font-style, font-variant, …)；

如果 (1) 沒有完全匹配的字體，或 (2) 字體匹配但相應字形缺失，則嘗試匹配下一個 font-family；

如果 font-family 無法匹配，UA 分配默認字體；

如果該字符在 UA 選擇的所有字體下均無字形，UA 應選擇某個字體中的「missing character」的字形，
例如「?」。

算法包括font-stretch匹配。

確定了font-style匹配中所有可能的情況。

小型大寫字母字體不作為字體匹配過程的一部分進行匹配，它們現在通過字體特性進行處理。

需要Unicode variation selector匹配。

font屬性使用小demo

小米官網

 font: 14px/1.5 "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei", "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;

name - Naming Table

按 OpenType 規范，字體的名稱信息存在 name 表中。

Name Records

Platform ID

Platform-specific encoding ID

Language ID

Name ID

…

Windows 的字體預覽會采用你目前的系統語言對應的 Preferred Family 作為命名，如果此項缺失則會用系統語言 Family、英語 Preferred Family、英語 Family。

對瀏覽器來說不同瀏覽器的處理策略是不一樣的，比如 IE9 和 FF4 支持按照 Preferred Family 選字而 Chrome 只按照 Family（Opentype 規范里的 [name] 表項目）搜索。

fallback是字體匹配算法的重要機制，我們看一下下面的例子：

font-family: "Helvetica Neue", "Helvetica", "Microsoft Yahei", sans-serif;

這個 fallback 的規則可以總結為

(hasFont && isInUnicodeTable) ? "Current Font" : "Next Font"

就這樣一直找匹配的字體，直到系統默認，所以一般都把系統默認的5類字體放到 font-family 定義的最后來寫。

CSS規范里只簡單的說執行“system font fallback”。但這個過程在不同的系統不同的瀏覽器下可能很不一樣，比如：

OS相關機制

Linux下一般通過fontconfig去根據語言、風格等參數來選擇fallback，但不同瀏覽器的實現還可能有區別。

Windows下則一般會使用系統的Font Linking機制，根據注冊表內的FontSubstitutes信息來尋找。

OS X是按照字體后備列表進行fallback。

瀏覽器配置

WebKit settings 中可設定各個 generic family 的默認值。

Firefox訪問 about:config 后篩選出的 font 相關項中包含不同語言下 generic families 的默認值。

Webkit會使用font-family列表的第一個字體和這段文字所屬的語言來尋找fallback字體，像Times這樣的serif字體對應的中文fallback字體，在Mac OS X下是華文宋體（STSong）。

Firefox則會根據sans-serif這樣的通用font-family和對應的語言匹配到設置中針對對應語言的默認字體，比如在MAC OS X 默認的中文非襯線字體是華文黑體（STHeiti）（新版本 OS X是蘋方-簡）。

charset、lang 屬性、font-family值

這是大而全的Demo

因為在這里不同的瀏覽器可能有不同的行為，所以建議在CSS中應寫明對應平臺所使用的字體。

具體的字體選擇還有一些不太容易注意的細節，也是各個瀏覽器差異比較大的一點，可能會出現這樣一些問題：

是否支持用字體的PostScript name選擇：如STHeiti的Light版本又稱作STXihei，或者是否能用full name 選擇：有的瀏覽器不能正確地將CSS里對字體的font-weight或者font-style等要求映射到特定的字體上，尤其是在字體使用了非標準的style明明的情況下。

是否支持按 Localized name選擇：比如能不能用“宋體”來代表“Simsun”。以Mac OS X下的瀏覽器為例，Firefox支持這樣的寫法，但基于Webkit的瀏覽器一般不支持，這樣的問題CSS規范沒有限定，所以無論哪種情況都是允許的。

總的說來，如果要保證最大限度的兼容性，在 CSS 書寫的時候應該盡可能選擇明確、不容易出錯的寫法，盡量少隱式地讓瀏覽器自己確定 (be explict instead of implict)，雖然隱式寫法通常比較簡潔，但除非你 100% 確定想支持的瀏覽器在你想支持的平臺下都能支持這個寫法，否則還是不應該輕易用。

其它注意事項請參看：font-family 沒有設定中文字體時，漢字應該怎么顯示？

當字體確定以后，就可以將文本，字體等等參數一起交給具體的排版引擎,生成字形和位置，然后根據不同的平臺調用不同的字體rasertizer將自行轉換成最后顯示在屏幕上的圖案，一般瀏覽器都會選擇平臺原生的resterizer。

不同瀏覽器有著不同的渲染引擎。Mac OS X 用戶使用 CoreText 渲染引擎，Windows7 和 Windows Vista 用戶使用 DirectWrite.aspx) 或 GDI ,而 Windows XP 則使用 GDI。

GDI 分為 GDI Grayscale 和 GDI ClearType 。前者為灰階渲染 API，后者是亞像素渲染 API。由于 GDI ClearType 并未對字體進行垂直方向的平滑，因此當字體較大時會出現邊緣不平滑的情況。為了彌補 GDI ClearType 的不足，MS實現了 DirectWrite API，它在 GDI ClearType 的基礎上增加了垂直方向的平滑。

對比圖片來看看它們之間的區別，其中上圖為FacitWeb字體，下圖為 Minion Pro字體。

使用同一顏色，感官上的顏色深淺為：黑白渲染> grayscale > sub-pixel。

iOS 和 Mac 的渲染引擎一樣，但采用的是灰度渲染，默認情況下亞像素抗鋸齒是關閉的，但可以通知設置開啟。

由于渲染策略的不同，字母a在不同的瀏覽器和 OS 下的渲染表現也不同。第一個是理想模型的a,第二個是灰階渲染的a,第三個是亞像素渲染，第四個是黑白渲染。

注：從 chrome52 開始，google 停止對于老的操作系統的支持，包括 windows xp 和 windows vist a停止了 GDI 的字體渲染，從而只支持 DirectWrite。

當確定了編碼、字體類型、排版引擎、瀏覽器后，就要進行光柵化了，光柵化是將文字從一個向量表示（比如一個TrueType）轉化到光柵或者位圖表示的過程。在這個過程中往往涉及到一些抗鋸齒技術使得屏幕上的字體更加順滑易讀，這也經常會涉及到“字體微調（font hinting）”技術。

根據以上總結我們可以看出，不同系統預裝的字體不同，不同瀏覽器的默認字體也不同，而且還有渲染引擎的差異。所以，要想達到比較好的顯示效果，需要設置好font-family。

首先確定要選擇字體的元素應該使用的字體風格，比如是襯線字體、非襯線字體還是 cursive、fantasy 之類的。

優先聲明英文字體，比如 Mac OS X 下有 Helvetica 也有 Arial，但 Helvetica (可能) 效果更好，Windows 下則一般只有 Arial，那么寫 Helvetica, Arial 就比 Arial, Helvetica 或者只有 Arial 更好。

絕大部分中文字體都包含英文字母和數字，但是大多數中文字體中的英文和數字部分都不是特別漂亮，所以建議對英文字體先進行聲明。

然后列出中文字體，Windows下，Microsoft Yahei是最常用的字體，Mac如果安裝了Office，系統也會安裝Microsoft Yahei字體，可Mac下Microsoft Yahei顯示效果不是太好，所以一般把Mac的字體放在前面,Microsoft Yahei放在后面，最后還可以跟上Linux下的WenQuanYi Micro Hei。

最后還應該放上對應的generic family，比如sans-serif或者serif。

盡量用字體的基本名稱 (比如 English locale 下顯示的)，而不要用本地化過的名稱。除非特殊情況 (Windows 下“某些”瀏覽器在特定編碼下只能支持本地化的字體名稱)。Mac OS X 下字體名稱可以用 Font Book 查到 (菜單 Preview -> Show Font Info)，Windows 下字體信息在微軟的網站可以得到，Linux/X11 下可以使用 fc-list 命令查到。

字體名稱中包含空格時記得用引號擴起來，比如"WenQuanYi Micro Hei"。

文檔開頭最好指明語言，比如。但是對于簡體中文來說，我們不應該使用lang=zh-cn，但是為了瀏覽器的兼容性，還繼續使用。詳細參見網頁頭部的聲明應該是用 lang="zh" 還是 lang="zh-cn"？。

基于以上考慮，我們先來看看最安全的的font-family是什么樣的：

html lang=zh-CN//為了兼容性，暫時先這么寫
charset=utf-8
font-family：arial，sans-serif；

擴充一下,加上常用的字體fallback：

font-family: -apple-system,BlinkMacSystemFont,"San Francisco","Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","WenQuanYi Microhei",sans-serif;

   font-family:  "5FAE8F6F96C59ED1", Helvetica;//手機騰訊
   font-family:"STHeiti","Microsoft YaHei",Helvetica,Arial,sans-serif;//手機網易

-apple-system用于調用系統默認UI字體，并且會根據font-weight聲明選擇恰當的變體。system將來有可能成為標準，-apple為過渡階段的廠商前綴。

BlinkMacSystemFont：為 macOS Chrome 應用系統 UI 字體，與上面等同。

一般移動端不需要設置中文字體，5FAE8F6F96C59ED1是微軟雅黑的Unicode碼，中文測試用。

給自己的字體課(一)

百用不厭明星字體

中文字體新手指南

中文字體分類除了黑體和宋體之外還有哪些？

討論：中文字體及呈現需求

從《中文排版需求》開始

CSS font-family常見中文字體對應的英文名稱

各個平臺下相對比較好的 Web 英文字體分別是什么？

網頁字體設置你了解嗎？

移動開發規范概述

網頁中字體的那些事

Web 字體的選擇和運用

Python字符編碼的學習

瀏覽器如何渲染文本

網站字體渲染過程

有關字體的小小迷思

Type rendering: operating systems

如何保證網頁的字體在各平臺都盡量顯示為最高質量的黑體？

在 Web 內容中使用系統字體

Using UI System Fonts In Web Design: A Quick Practical Guide

Using the System Font in Web Content

對于 CSS 的「font-family」，瀏覽器是通過字體的哪個名稱進行匹配的？

最佳 Web 中文默認字體

是否有一種軟件能夠對不同語言的文字指定不同的字體？

CSS Font Stack