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

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

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

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

這里面，我們經(jīng)常用到的是serif體和sans-serif體

Serif強調(diào)字母筆畫的開始及結(jié)束，因此前后連續(xù)性強，易讀性高。

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

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

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

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

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

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

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

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

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

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

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

本質(zhì)上是點陣圖片的集合。

渲染極快

顯示效果穩(wěn)定

容易創(chuàng)建

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

視覺效果較差

不適合縮放

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

PostScript 字體

Adobe 開發(fā)

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

私有 hinting，價格昂貴

質(zhì)量高，適合打印專業(yè)質(zhì)量的印刷出版物

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

TrueType 字體

Apple 為對抗 Adobe 的 Type1 與 Microsoft 共同開發(fā)

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

可內(nèi)置點陣字體

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

OpenType 字體

源于 Microsoft 獨自開發(fā)的 TrueType Open

后 Adobe 加入開發(fā)，增加對 PostScript 輪廓的支持

PostScript flavor / TrueType flavor

Adobe 黑體

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

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

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

TrueType
OpenType

Windows 字體列表

Mac OS X 字體列表

Windows、OS X、Liunx/Unix預(yù)裝中文字體demo

上面的例子列舉了Windows、OS X、Liunx/Unix預(yù)裝字體以及一些版權(quán)字體

為什么需要編碼？

我們知道計算機處理的數(shù)據(jù)實際上都是二級制的數(shù)據(jù),也就是計算機實際上只識別0和1兩種狀態(tài)。發(fā)明計算機的過程中人們需要解決的第一個問題就是文字的處理問題,也就是我們?nèi)绾螌⑽淖址栟D(zhuǎn)化為二級制數(shù)據(jù)，同時我們也需要能夠?qū)⑥D(zhuǎn)化后的二進制數(shù)據(jù)重新轉(zhuǎn)化為文字符號供我們閱讀。前面的過程我們稱之為編碼，后面的這個過程我們稱之為解碼。這和電信領(lǐng)域更著名的一套編解碼規(guī)則莫爾斯碼是一個原理。

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

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

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

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

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

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

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

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

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

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

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

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

UA 創(chuàng)建(或訪問)一個 CSS 2.2 相關(guān)屬性的字體數(shù)據(jù)庫；

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

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

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

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

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

算法包括font-stretch匹配。

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

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

需要Unicode variation selector匹配。

font屬性使用小demo

小米官網(wǎng)

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

name - Naming Table

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

Name Records

Platform ID

Platform-specific encoding ID

Language ID

Name ID

…

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

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

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

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

這個 fallback 的規(guī)則可以總結(jié)為

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

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

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

OS相關(guān)機制

Linux下一般通過fontconfig去根據(jù)語言、風格等參數(shù)來選擇fallback，但不同瀏覽器的實現(xiàn)還可能有區(qū)別。

Windows下則一般會使用系統(tǒng)的Font Linking機制，根據(jù)注冊表內(nèi)的FontSubstitutes信息來尋找。

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

瀏覽器配置

WebKit settings 中可設(shè)定各個 generic family 的默認值。

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

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

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

charset、lang 屬性、font-family值

這是大而全的Demo

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

文檔開頭最好指明語言，比如。但是對于簡體中文來說，我們不應(yīng)該使用lang=zh-cn，但是為了瀏覽器的兼容性，還繼續(xù)使用。詳細參見網(wǎng)頁頭部的聲明應(yīng)該是用 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;//手機網(wǎng)易

-apple-system用于調(diào)用系統(tǒng)默認UI字體，并且會根據(jù)font-weight聲明選擇恰當?shù)淖凅w。system將來有可能成為標準，-apple為過渡階段的廠商前綴。

BlinkMacSystemFont：為 macOS Chrome 應(yīng)用系統(tǒng) UI 字體，與上面等同。

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

給自己的字體課(一)

百用不厭明星字體

中文字體新手指南

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

討論：中文字體及呈現(xiàn)需求

從《中文排版需求》開始

CSS font-family常見中文字體對應(yīng)的英文名稱

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

網(wǎng)頁字體設(shè)置你了解嗎？

移動開發(fā)規(guī)范概述

網(wǎng)頁中字體的那些事

Web 字體的選擇和運用

Python字符編碼的學習

瀏覽器如何渲染文本

網(wǎng)站字體渲染過程

有關(guān)字體的小小迷思

Type rendering: operating systems

如何保證網(wǎng)頁的字體在各平臺都盡量顯示為最高質(zhì)量的黑體？

在 Web 內(nèi)容中使用系統(tǒng)字體

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

Using the System Font in Web Content

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

最佳 Web 中文默認字體

是否有一種軟件能夠?qū)Σ煌Z言的文字指定不同的字體？

CSS Font Stack