瀏覽器渲染文本過(guò)程分析
發(fā)布時(shí)間：2012-11-29 14:34:04 作者：佚名 
我要評(píng)論
我要評(píng)論瀏覽器是我們最常用的軟件之一，文本又是網(wǎng)頁(yè)中最主要的元素，在瀏覽器顯示文本的過(guò)程中有許多有趣的細(xì)節(jié)，值得展開(kāi)來(lái)講講，或許能減少一些誤,本文將詳細(xì)介紹，需要了解的朋友可以參考下
瀏覽器是我們最常用的軟件之一，文本又是網(wǎng)頁(yè)中最主要的元素，在瀏覽器顯示文本的過(guò)程中有許多有趣的細(xì)節(jié)，值得展開(kāi)來(lái)講講，或許能減少一些誤解。這是一個(gè)比較粗略的，概括性的介紹，盡可能不涉及過(guò)多的技術(shù)細(xì)節(jié)和具體實(shí)現(xiàn)，而立足于給 Web 開(kāi)發(fā)者和設(shè)計(jì)師提供一些正確的概念。
下面的介紹主要根據(jù)我對(duì) WebKit 和 Gecko (Firefox) 的印象來(lái)談，其他的瀏覽器也大致相同，如有闕漏之處歡迎指出。
當(dāng)瀏覽器收到來(lái)自 Web 服務(wù)器的網(wǎng)頁(yè)數(shù)據(jù)之后，第一步是要把它解碼成可以閱讀的文本，因?yàn)闅v史原因，不同區(qū)域和語(yǔ)言的網(wǎng)頁(yè)可能會(huì)使用不同的編碼方式，而瀏覽器判斷編碼主要是依據(jù)以下方法：
1.Web 服務(wù)器返回的 HTTP 頭中的 Content-Type: text/html; charset= 信息，這一般有最高的優(yōu)先級(jí)；
2.網(wǎng)頁(yè)本身 meta header 中的 Content-Type 信息的 charset 部分，對(duì)于 HTTP 頭未指定編碼或者本地文件，一般是這么判斷；
3.假如前兩條都沒(méi)有找到，瀏覽器菜單里一般允許用戶強(qiáng)制指定編碼；
4.部分瀏覽器 (比如 Firefox) 可以選擇編碼自動(dòng)檢測(cè)功能，使用基于統(tǒng)計(jì)的方法判斷未定編碼。
編碼確定后，網(wǎng)頁(yè)就被解碼成了 Unicode 字符流，可以進(jìn)行進(jìn)一步的處理，比如 HTML 解析了，不過(guò)我們這里跳過(guò) HTML/XML 解析的細(xì)節(jié)，單講得到了解析后的文本元素之后該怎么處理。
因?yàn)槲覀兊玫降奈谋究赡苁呛芏喾N語(yǔ)言混雜的，里面可能有中文、有英文，它們可能要用不同的字體顯示；也可能有阿拉伯文、希伯來(lái)文這種從右到左書(shū)寫(xiě)的文字；也有可能涉及印度系文字這樣涉及復(fù)雜布局規(guī)則的文字；另外，還可能有網(wǎng)頁(yè)內(nèi)自己指定的文本語(yǔ)言，比如 <span lang="jp">日本語(yǔ)</span> 這樣的標(biāo)記，使得日文漢字可以使用日文字體顯示 (因?yàn)?Han Unification 導(dǎo)致這些漢字和中文里的漢字使用同樣的代碼點(diǎn)，盡管很多寫(xiě)法不同)，"lang" 屬性也可以在 HTTP 頭、<meta> 或者 <html> 出現(xiàn)，用于標(biāo)記整個(gè)文檔的全局語(yǔ)言，通常這是一種好的習(xí)慣，方便瀏覽器進(jìn)行字體匹配。
為了統(tǒng)一處理所有這些復(fù)雜的情況，我們要將文本分為由不同語(yǔ)言組成的小段，在有的文本布局引擎里，這個(gè)步驟稱為“itemize”，分解后的文本段常被稱作“text run”，但是具體劃分的規(guī)則可能根據(jù)不同的引擎有所區(qū)別，比如 HarfBuzz 和 ICU 一般是根據(jù)要使用的不同排版類(lèi)來(lái)劃分 (常稱作“shaper”)，比如英語(yǔ)和法語(yǔ)可能使用同一個(gè) shaper 排版，那么相鄰的英語(yǔ)和法語(yǔ)文本就會(huì)劃分到同一個(gè) run 里，而希伯來(lái)文需要另一個(gè) shaper，就劃分到它自己的 run 里，以 HarfBuzz 為例，它有這樣一些 shaper：
通用的 (適用于中文、英文等等大多數(shù)布局規(guī)則簡(jiǎn)單的語(yǔ)言)
阿拉伯文
希伯來(lái)文
印度系文字
高棉文
緬文
諺文
不少瀏覽器還會(huì)在這個(gè)劃分下面，在確定具體使用的字體之后，根據(jù)使用字體的不同劃分更細(xì)的 run，這種 run 可能稱作“SimpleTextRun”，每個(gè)都會(huì)使用和相鄰不同的字體，最后把它們逐一交給 shaper 進(jìn)行排版得到要繪制的字形，這樣一來(lái)，shaper 的工作就被簡(jiǎn)化為在確定的語(yǔ)言、確定的字體下排版確定的文本，生成對(duì)應(yīng)的字形和它們應(yīng)該放置的位置、占用的空間。下面先詳細(xì)說(shuō)說(shuō)確定字體的步驟。
說(shuō)到字體，首先必須提到的就是 CSS 里的 font 和 font-family 等規(guī)則。比如這樣的規(guī)則：
p { font-family: Helvetica, Arial, sans-serif; }
strong { font-weight: bold; }
如果對(duì)于這樣一段文本：
<p>A quick brown fox <strong>jumps</strong> over the lazy dog.</p>
表示這個(gè)段落里優(yōu)先使用 Helvetica 這個(gè) family 的字體，如果找不到，就找 Arial，如果還是找不到，就用瀏覽器設(shè)置的默認(rèn)非襯線字體 (有的瀏覽器，比如 Safari 只給你一個(gè)設(shè)置，有的像 Firefox 則允許根據(jù)不同語(yǔ)言設(shè)置，這時(shí)可以根據(jù)前面分析得到的文本 run 語(yǔ)言信息來(lái)判斷該用哪個(gè))，這個(gè)過(guò)程非常簡(jiǎn)單，大家都很好理解。稍微復(fù)雜一點(diǎn)的是“jumps”，它應(yīng)該繼承父元素的 font-family，也用 Helvetica，但不用默認(rèn)的 Regular，而用 Bold 版本，假如找不到 Helvetica Bold，就找 Arial Bold，否則就找瀏覽器設(shè)置的那個(gè)字體的 Bold 版本，假如都沒(méi)有呢？就要考慮用人工偽造的方式來(lái)顯示粗體了，這個(gè)且按下不談，先看對(duì)于中文常見(jiàn)的情況：CSS 指定的字體沒(méi)有覆蓋我們需要的文本時(shí)，該怎么做。比如還是上面的 CSS 規(guī)則，但對(duì)這樣的文本：
<p>一只敏捷的狐貍...</p>
這里的“一只敏捷的狐貍”該用什么字體呢？假設(shè) CSS 里具體指定了中文字體，比如 Helvetica, STHeiti, sans-serif，那很簡(jiǎn)單，按照英文字體一樣的規(guī)則來(lái)判斷：逐個(gè)字符嘗試當(dāng)前的字體是否提供了針對(duì)該字符的字形，如果沒(méi)有則嘗試下一個(gè)，要是到了最后都沒(méi)找到匹配的字體呢？CSS 規(guī)范里只簡(jiǎn)單的說(shuō)執(zhí)行“system font fallback”，但這個(gè)過(guò)程在不同的瀏覽器下可能很不一樣，比如 WebKit 會(huì)使用 font-family 列表里的第一個(gè)字體和這段文本所屬的語(yǔ)言來(lái)尋找 fallback 字體，像 Times 這樣的 serif 字體對(duì)應(yīng)的中文 fallback 字體，在 Mac OS X 下是華文宋體 (STSong)；而 Firefox 則會(huì)根據(jù) sans-serif 這樣的通用 font family 和對(duì)應(yīng)的語(yǔ)言匹配到設(shè)置中針對(duì)對(duì)應(yīng)語(yǔ)言的默認(rèn)字體，比如在 Mac OS X 默認(rèn)的中文非襯線字體是華文黑體 (STHeiti)。Linux 下一般通過(guò) fontconfig 去根據(jù)語(yǔ)言、風(fēng)格等參數(shù)來(lái)選擇 fallback，但不同瀏覽器的實(shí)現(xiàn)還可能有區(qū)別；Windows 下則一般會(huì)使用系統(tǒng)的 Font Linking 機(jī)制，根據(jù)注冊(cè)表內(nèi)的 FontSubstitutes 信息來(lái)尋找。因?yàn)樵谶@里不同的瀏覽器可能有不同的行為，所以建議在 CSS 中寫(xiě)明對(duì)應(yīng)平臺(tái)該用的字體。
具體的字體選擇還有一些不太容易注意的細(xì)節(jié)，也是各個(gè)瀏覽器差異比較大的一點(diǎn)，可能會(huì)出現(xiàn)這樣一些問(wèn)題：
是否支持用字體的 PostScript name 選擇：如 STHeiti 的 Light 版本又稱作 STXihei，或者是否能用 full name 選擇：有的瀏覽器不能正確地將 CSS 里對(duì)字體的 font-weight 或者 font-style 等要求映射到特定的字體上，尤其是在字體使用了非標(biāo)準(zhǔn)的 style 命名的情況下，考慮到很多廠商有自己的字體命名規(guī)則，這其實(shí)很容易出現(xiàn)，像 Helvetica Neue 的 UltraLight, Light, Regular, Medium, Bold 這些不同的 weight，是怎么對(duì)應(yīng)到 CSS font-weight 的 100 到 900 數(shù)值上的？這就是特別容易出現(xiàn) bug 的地方。
是否支持按 localized name 選擇：比如能不能用 "宋體" 來(lái)代表 "SimSun"。以 Mac OS X 下的瀏覽器為例，F(xiàn)irefox 支持這樣的寫(xiě)法，但基于 WebKit 的瀏覽器一般不支持，這樣的問(wèn)題 CSS 規(guī)范沒(méi)有限定，所以無(wú)論哪種情況都是允許的。
總的說(shuō)來(lái)，如果要保證最大限度的兼容性，在 CSS 書(shū)寫(xiě)的時(shí)候應(yīng)該盡可能選擇明確、不容易出錯(cuò)的寫(xiě)法，盡量少隱式地讓瀏覽器自己確定 (be explict instead of implict)，雖然隱式寫(xiě)法通常比較簡(jiǎn)潔，但除非你 100% 確定想支持的瀏覽器在你想支持的平臺(tái)下都能支持這個(gè)寫(xiě)法，否則還是不應(yīng)該輕易用。
CSS3 新增的 @font-face 規(guī)則則是對(duì)于現(xiàn)有規(guī)則的擴(kuò)展，提供了 web fonts 功能，但字體匹配算法的邏輯并沒(méi)有改變，詳細(xì)的算法可以看 CSS 規(guī)范里的說(shuō)明。
當(dāng)確定了字體以后，就可以將文本、字體等等參數(shù)一起交給具體的排版引擎，生成字形和位置，然后根據(jù)不同的平臺(tái)調(diào)用不同的字體 rasterizer 將字形轉(zhuǎn)換成最后顯示在屏幕上的圖案，一般瀏覽器都會(huì)選擇平臺(tái)原生的 rasterizer，比如 Mac OS X 下用 Core Graphics，Linux/X11 下用 FreeType，Windows 下用 GDI/DirectWrite 等等。關(guān)于這個(gè)步驟，typekit 的這篇 blog 可以作為參考。各個(gè)瀏覽器的差異主要來(lái)自使用的排版引擎可能對(duì)不同的語(yǔ)言支持有差異，調(diào)用 rasterizer 使用的參數(shù)可能有差異 (比如是否啟用 subpixel rendering、使用的 hinting 級(jí)別等等)，但在同一個(gè)操作系統(tǒng)下的效果差別不會(huì)很大。
基于以上的介紹，可以嘗試提出一個(gè)在現(xiàn)有瀏覽器下，針對(duì)中文用戶的，書(shū)寫(xiě) CSS 字體選擇規(guī)則的建議，如下：
1.首先確定要選擇字體的元素應(yīng)該使用的字體風(fēng)格，比如是襯線字體、非襯線字體還是 cursive、fantasy 之類(lèi)的；
2.確定了風(fēng)格之后，先選擇西文字體，優(yōu)先把平臺(tái)獨(dú)特的、在該平臺(tái)下效果更好的字體寫(xiě)上，比如 Mac OS X 下有 Helvetica 也有 Arial，但 Helvetica (可能) 效果更好，Windows 下則一般只有 Arial，那么寫(xiě) Helvetica, Arial 就比 Arial, Helvetica 或者只有 Arial 更好；
3.然后列出中文字體，原則相同，多個(gè)平臺(tái)共有的字體應(yīng)該盡量放在后邊，獨(dú)有的字體放在前面，還需要照顧到 Mac OS X/Linux 下一般用戶習(xí)慣用(細(xì))黑體作為默認(rèn)字體，Windows 下習(xí)慣以宋體作為默認(rèn)字體的情況，比如 STXihei, SimSun 這樣的寫(xiě)法比較常見(jiàn)，如果寫(xiě)作 SimSun, STXihei，但 Mac OS X 上裝了 SimSun 效果就不會(huì)太好看。
4.最后還是應(yīng)該放上對(duì)應(yīng)的 generic family，比如 sans-serif 或者 serif。
5.盡量用字體的基本名稱 (比如 English locale 下顯示的)，而不要用本地化過(guò)的名稱。除非特殊情況 (Windows 下“某些”瀏覽器在特定編碼下只能支持本地化的字體名稱)。Mac OS X 下字體名稱可以用 Font Book 查到 (菜單 Preview -> Show Font Info)，Windows 下字體信息在微軟的網(wǎng)站可以得到，Linux/X11 下可以使用 fc-list 命令查到。
6.字體名稱中包含空格時(shí)記住用引號(hào)擴(kuò)起，比如 "American Typewritter" 和 "Myriad Pro"。
7.文檔開(kāi)頭最好指明語(yǔ)言，比如 <html lang="zh-CN">，可以使用的語(yǔ)言標(biāo)記參見(jiàn) W3C 的說(shuō)明。
下面的介紹主要根據(jù)我對(duì) WebKit 和 Gecko (Firefox) 的印象來(lái)談，其他的瀏覽器也大致相同，如有闕漏之處歡迎指出。
當(dāng)瀏覽器收到來(lái)自 Web 服務(wù)器的網(wǎng)頁(yè)數(shù)據(jù)之后，第一步是要把它解碼成可以閱讀的文本，因?yàn)闅v史原因，不同區(qū)域和語(yǔ)言的網(wǎng)頁(yè)可能會(huì)使用不同的編碼方式，而瀏覽器判斷編碼主要是依據(jù)以下方法：
1.Web 服務(wù)器返回的 HTTP 頭中的 Content-Type: text/html; charset= 信息，這一般有最高的優(yōu)先級(jí)；
2.網(wǎng)頁(yè)本身 meta header 中的 Content-Type 信息的 charset 部分，對(duì)于 HTTP 頭未指定編碼或者本地文件，一般是這么判斷；
3.假如前兩條都沒(méi)有找到，瀏覽器菜單里一般允許用戶強(qiáng)制指定編碼；
4.部分瀏覽器 (比如 Firefox) 可以選擇編碼自動(dòng)檢測(cè)功能，使用基于統(tǒng)計(jì)的方法判斷未定編碼。
編碼確定后，網(wǎng)頁(yè)就被解碼成了 Unicode 字符流，可以進(jìn)行進(jìn)一步的處理，比如 HTML 解析了，不過(guò)我們這里跳過(guò) HTML/XML 解析的細(xì)節(jié)，單講得到了解析后的文本元素之后該怎么處理。
因?yàn)槲覀兊玫降奈谋究赡苁呛芏喾N語(yǔ)言混雜的，里面可能有中文、有英文，它們可能要用不同的字體顯示；也可能有阿拉伯文、希伯來(lái)文這種從右到左書(shū)寫(xiě)的文字；也有可能涉及印度系文字這樣涉及復(fù)雜布局規(guī)則的文字；另外，還可能有網(wǎng)頁(yè)內(nèi)自己指定的文本語(yǔ)言，比如 <span lang="jp">日本語(yǔ)</span> 這樣的標(biāo)記，使得日文漢字可以使用日文字體顯示 (因?yàn)?Han Unification 導(dǎo)致這些漢字和中文里的漢字使用同樣的代碼點(diǎn)，盡管很多寫(xiě)法不同)，"lang" 屬性也可以在 HTTP 頭、<meta> 或者 <html> 出現(xiàn)，用于標(biāo)記整個(gè)文檔的全局語(yǔ)言，通常這是一種好的習(xí)慣，方便瀏覽器進(jìn)行字體匹配。
為了統(tǒng)一處理所有這些復(fù)雜的情況，我們要將文本分為由不同語(yǔ)言組成的小段，在有的文本布局引擎里，這個(gè)步驟稱為“itemize”，分解后的文本段常被稱作“text run”，但是具體劃分的規(guī)則可能根據(jù)不同的引擎有所區(qū)別，比如 HarfBuzz 和 ICU 一般是根據(jù)要使用的不同排版類(lèi)來(lái)劃分 (常稱作“shaper”)，比如英語(yǔ)和法語(yǔ)可能使用同一個(gè) shaper 排版，那么相鄰的英語(yǔ)和法語(yǔ)文本就會(huì)劃分到同一個(gè) run 里，而希伯來(lái)文需要另一個(gè) shaper，就劃分到它自己的 run 里，以 HarfBuzz 為例，它有這樣一些 shaper：
通用的 (適用于中文、英文等等大多數(shù)布局規(guī)則簡(jiǎn)單的語(yǔ)言)
阿拉伯文
希伯來(lái)文
印度系文字
高棉文
緬文
諺文
不少瀏覽器還會(huì)在這個(gè)劃分下面，在確定具體使用的字體之后，根據(jù)使用字體的不同劃分更細(xì)的 run，這種 run 可能稱作“SimpleTextRun”，每個(gè)都會(huì)使用和相鄰不同的字體，最后把它們逐一交給 shaper 進(jìn)行排版得到要繪制的字形，這樣一來(lái)，shaper 的工作就被簡(jiǎn)化為在確定的語(yǔ)言、確定的字體下排版確定的文本，生成對(duì)應(yīng)的字形和它們應(yīng)該放置的位置、占用的空間。下面先詳細(xì)說(shuō)說(shuō)確定字體的步驟。
說(shuō)到字體，首先必須提到的就是 CSS 里的 font 和 font-family 等規(guī)則。比如這樣的規(guī)則：
復(fù)制代碼
代碼如下:p { font-family: Helvetica, Arial, sans-serif; }
strong { font-weight: bold; }
如果對(duì)于這樣一段文本：
復(fù)制代碼
代碼如下:<p>A quick brown fox <strong>jumps</strong> over the lazy dog.</p>
表示這個(gè)段落里優(yōu)先使用 Helvetica 這個(gè) family 的字體，如果找不到，就找 Arial，如果還是找不到，就用瀏覽器設(shè)置的默認(rèn)非襯線字體 (有的瀏覽器，比如 Safari 只給你一個(gè)設(shè)置，有的像 Firefox 則允許根據(jù)不同語(yǔ)言設(shè)置，這時(shí)可以根據(jù)前面分析得到的文本 run 語(yǔ)言信息來(lái)判斷該用哪個(gè))，這個(gè)過(guò)程非常簡(jiǎn)單，大家都很好理解。稍微復(fù)雜一點(diǎn)的是“jumps”，它應(yīng)該繼承父元素的 font-family，也用 Helvetica，但不用默認(rèn)的 Regular，而用 Bold 版本，假如找不到 Helvetica Bold，就找 Arial Bold，否則就找瀏覽器設(shè)置的那個(gè)字體的 Bold 版本，假如都沒(méi)有呢？就要考慮用人工偽造的方式來(lái)顯示粗體了，這個(gè)且按下不談，先看對(duì)于中文常見(jiàn)的情況：CSS 指定的字體沒(méi)有覆蓋我們需要的文本時(shí)，該怎么做。比如還是上面的 CSS 規(guī)則，但對(duì)這樣的文本：
復(fù)制代碼
代碼如下:<p>一只敏捷的狐貍...</p>
這里的“一只敏捷的狐貍”該用什么字體呢？假設(shè) CSS 里具體指定了中文字體，比如 Helvetica, STHeiti, sans-serif，那很簡(jiǎn)單，按照英文字體一樣的規(guī)則來(lái)判斷：逐個(gè)字符嘗試當(dāng)前的字體是否提供了針對(duì)該字符的字形，如果沒(méi)有則嘗試下一個(gè)，要是到了最后都沒(méi)找到匹配的字體呢？CSS 規(guī)范里只簡(jiǎn)單的說(shuō)執(zhí)行“system font fallback”，但這個(gè)過(guò)程在不同的瀏覽器下可能很不一樣，比如 WebKit 會(huì)使用 font-family 列表里的第一個(gè)字體和這段文本所屬的語(yǔ)言來(lái)尋找 fallback 字體，像 Times 這樣的 serif 字體對(duì)應(yīng)的中文 fallback 字體，在 Mac OS X 下是華文宋體 (STSong)；而 Firefox 則會(huì)根據(jù) sans-serif 這樣的通用 font family 和對(duì)應(yīng)的語(yǔ)言匹配到設(shè)置中針對(duì)對(duì)應(yīng)語(yǔ)言的默認(rèn)字體，比如在 Mac OS X 默認(rèn)的中文非襯線字體是華文黑體 (STHeiti)。Linux 下一般通過(guò) fontconfig 去根據(jù)語(yǔ)言、風(fēng)格等參數(shù)來(lái)選擇 fallback，但不同瀏覽器的實(shí)現(xiàn)還可能有區(qū)別；Windows 下則一般會(huì)使用系統(tǒng)的 Font Linking 機(jī)制，根據(jù)注冊(cè)表內(nèi)的 FontSubstitutes 信息來(lái)尋找。因?yàn)樵谶@里不同的瀏覽器可能有不同的行為，所以建議在 CSS 中寫(xiě)明對(duì)應(yīng)平臺(tái)該用的字體。
具體的字體選擇還有一些不太容易注意的細(xì)節(jié)，也是各個(gè)瀏覽器差異比較大的一點(diǎn)，可能會(huì)出現(xiàn)這樣一些問(wèn)題：
是否支持用字體的 PostScript name 選擇：如 STHeiti 的 Light 版本又稱作 STXihei，或者是否能用 full name 選擇：有的瀏覽器不能正確地將 CSS 里對(duì)字體的 font-weight 或者 font-style 等要求映射到特定的字體上，尤其是在字體使用了非標(biāo)準(zhǔn)的 style 命名的情況下，考慮到很多廠商有自己的字體命名規(guī)則，這其實(shí)很容易出現(xiàn)，像 Helvetica Neue 的 UltraLight, Light, Regular, Medium, Bold 這些不同的 weight，是怎么對(duì)應(yīng)到 CSS font-weight 的 100 到 900 數(shù)值上的？這就是特別容易出現(xiàn) bug 的地方。
是否支持按 localized name 選擇：比如能不能用 "宋體" 來(lái)代表 "SimSun"。以 Mac OS X 下的瀏覽器為例，F(xiàn)irefox 支持這樣的寫(xiě)法，但基于 WebKit 的瀏覽器一般不支持，這樣的問(wèn)題 CSS 規(guī)范沒(méi)有限定，所以無(wú)論哪種情況都是允許的。
總的說(shuō)來(lái)，如果要保證最大限度的兼容性，在 CSS 書(shū)寫(xiě)的時(shí)候應(yīng)該盡可能選擇明確、不容易出錯(cuò)的寫(xiě)法，盡量少隱式地讓瀏覽器自己確定 (be explict instead of implict)，雖然隱式寫(xiě)法通常比較簡(jiǎn)潔，但除非你 100% 確定想支持的瀏覽器在你想支持的平臺(tái)下都能支持這個(gè)寫(xiě)法，否則還是不應(yīng)該輕易用。
CSS3 新增的 @font-face 規(guī)則則是對(duì)于現(xiàn)有規(guī)則的擴(kuò)展，提供了 web fonts 功能，但字體匹配算法的邏輯并沒(méi)有改變，詳細(xì)的算法可以看 CSS 規(guī)范里的說(shuō)明。
當(dāng)確定了字體以后，就可以將文本、字體等等參數(shù)一起交給具體的排版引擎，生成字形和位置，然后根據(jù)不同的平臺(tái)調(diào)用不同的字體 rasterizer 將字形轉(zhuǎn)換成最后顯示在屏幕上的圖案，一般瀏覽器都會(huì)選擇平臺(tái)原生的 rasterizer，比如 Mac OS X 下用 Core Graphics，Linux/X11 下用 FreeType，Windows 下用 GDI/DirectWrite 等等。關(guān)于這個(gè)步驟，typekit 的這篇 blog 可以作為參考。各個(gè)瀏覽器的差異主要來(lái)自使用的排版引擎可能對(duì)不同的語(yǔ)言支持有差異，調(diào)用 rasterizer 使用的參數(shù)可能有差異 (比如是否啟用 subpixel rendering、使用的 hinting 級(jí)別等等)，但在同一個(gè)操作系統(tǒng)下的效果差別不會(huì)很大。
基于以上的介紹，可以嘗試提出一個(gè)在現(xiàn)有瀏覽器下，針對(duì)中文用戶的，書(shū)寫(xiě) CSS 字體選擇規(guī)則的建議，如下：
1.首先確定要選擇字體的元素應(yīng)該使用的字體風(fēng)格，比如是襯線字體、非襯線字體還是 cursive、fantasy 之類(lèi)的；
2.確定了風(fēng)格之后，先選擇西文字體，優(yōu)先把平臺(tái)獨(dú)特的、在該平臺(tái)下效果更好的字體寫(xiě)上，比如 Mac OS X 下有 Helvetica 也有 Arial，但 Helvetica (可能) 效果更好，Windows 下則一般只有 Arial，那么寫(xiě) Helvetica, Arial 就比 Arial, Helvetica 或者只有 Arial 更好；
3.然后列出中文字體，原則相同，多個(gè)平臺(tái)共有的字體應(yīng)該盡量放在后邊，獨(dú)有的字體放在前面，還需要照顧到 Mac OS X/Linux 下一般用戶習(xí)慣用(細(xì))黑體作為默認(rèn)字體，Windows 下習(xí)慣以宋體作為默認(rèn)字體的情況，比如 STXihei, SimSun 這樣的寫(xiě)法比較常見(jiàn)，如果寫(xiě)作 SimSun, STXihei，但 Mac OS X 上裝了 SimSun 效果就不會(huì)太好看。
4.最后還是應(yīng)該放上對(duì)應(yīng)的 generic family，比如 sans-serif 或者 serif。
5.盡量用字體的基本名稱 (比如 English locale 下顯示的)，而不要用本地化過(guò)的名稱。除非特殊情況 (Windows 下“某些”瀏覽器在特定編碼下只能支持本地化的字體名稱)。Mac OS X 下字體名稱可以用 Font Book 查到 (菜單 Preview -> Show Font Info)，Windows 下字體信息在微軟的網(wǎng)站可以得到，Linux/X11 下可以使用 fc-list 命令查到。
6.字體名稱中包含空格時(shí)記住用引號(hào)擴(kuò)起，比如 "American Typewritter" 和 "Myriad Pro"。
7.文檔開(kāi)頭最好指明語(yǔ)言，比如 <html lang="zh-CN">，可以使用的語(yǔ)言標(biāo)記參見(jiàn) W3C 的說(shuō)明。
相關(guān)文章
如何實(shí)現(xiàn)div 圖片在DIV內(nèi)水平居中
本文介紹了div 圖片如何在DIV內(nèi)水平居中，無(wú)論文字居中、圖片居中等內(nèi)容居中我們都可以使用以上兩種方法實(shí)現(xiàn)，一般推薦使用CSS進(jìn)行，但網(wǎng)頁(yè)多時(shí)候，我們只需要修改CSS文件2021-11-30
DIV CSS實(shí)現(xiàn)網(wǎng)頁(yè)背景半透明效果
DIV半透明實(shí)現(xiàn)，使用CSS實(shí)現(xiàn)DIV成半透明效果，CSS實(shí)現(xiàn)層與背景半透明效果。本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友參考下吧2021-11-30
新手在使用web標(biāo)準(zhǔn)（div css）開(kāi)發(fā)網(wǎng)頁(yè)的時(shí)候，遇到第一個(gè)問(wèn)題是div與span有什么區(qū)別，什么時(shí)候用div，什么時(shí)候用span標(biāo)簽。下面小編就通過(guò)本文給大家講解下，感興趣的朋友2021-11-30
這篇文章主要介紹了設(shè)置div背景透明的方法示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)2021-02-20
CSS實(shí)現(xiàn)div不設(shè)高度完全居中
這篇文章主要介紹了CSS實(shí)現(xiàn)div不設(shè)高度完全居中，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)2021-02-04
這篇文章主要介紹了div自適應(yīng)高度自動(dòng)填充剩余高度,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)2020-07-08詳解DIV+CSS的命名規(guī)矩才能有利于SEO優(yōu)化的實(shí)現(xiàn)方法
這篇文章主要介紹了DIV+CSS的命名規(guī)矩才能有利于SEO優(yōu)化的實(shí)現(xiàn)方法,需要的朋友可以參考下2018-11-15- 這篇文章主要介紹了DIV或者DIV里面的圖片水平與垂直居中的方法,需要的朋友可以參考下2018-11-15
詳解如何用div實(shí)現(xiàn)自制滾動(dòng)條
這篇文章主要介紹了詳解如何用div實(shí)現(xiàn)自制滾動(dòng)條,滾動(dòng)條是瀏覽器中最常見(jiàn)的組件了。想要學(xué)習(xí)如何自制滾動(dòng)條的方法，需要了解的朋友可以參考下2018-03-21- Div布局是學(xué)習(xí)的重點(diǎn)，這篇文章主要為大家詳細(xì)介紹了div對(duì)齊與網(wǎng)頁(yè)布局的相關(guān)學(xué)習(xí)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-31
