前言

麥時(shí)：我們知道同一種字體在不同瀏覽器上的表現(xiàn)有可能是不同的，除了瀏覽器，還有哪些導(dǎo)致表現(xiàn)不同的因素呢？不同系統(tǒng)下字形的渲染也是不一樣的，根本原因是什么呢？我們希望各瀏覽器下字體排版一致，實(shí)現(xiàn)的話有完美的方案嗎？

帶著這些問題我們來看看字體渲染的過程：

解碼

了解解碼之前，我們稍微先簡(jiǎn)單回顧下編碼的一些知識(shí)，常見的名詞有：ASCII 、GB2312、Big5、Unicode、UTF-8，它們之前有什么區(qū)別或聯(lián)系呢？簡(jiǎn)單來說，起初美國(guó)國(guó)家標(biāo)準(zhǔn)協(xié)會(huì)ANSI制定了一個(gè)標(biāo)準(zhǔn)，規(guī)定了常 用字符的集合以及每個(gè)字符對(duì)應(yīng)的編號(hào)，這就是ASCII字符集（Character Set），也稱ASCII碼，當(dāng)計(jì)算機(jī)慢慢發(fā)展，人們發(fā)現(xiàn)之前的128個(gè)的字符不能滿足需求了，于是便在原基礎(chǔ)上進(jìn)行擴(kuò)展，GB2312、Big5等都屬 于擴(kuò)展后的編碼方式，再后來呢，為了實(shí)現(xiàn)在一份文檔中可以正確顯示所有類型的字符，于是Unicode字符集誕生了，而UTF-8是Unicode的實(shí)現(xiàn) 方式之一, 與之相似的還有UTF-16和UTF-32。

回顧了編碼，我們?cè)賮砜唇獯a，瀏覽器收到網(wǎng)頁內(nèi)容后，首先需要把這些內(nèi)容轉(zhuǎn)化為可閱讀的文本，上面我們也提到了，不同國(guó)家或語言會(huì)使用不同的編碼方式，那怎么去判斷編碼方式呢，方法有下面這些（優(yōu)先匹配前面的規(guī)則，如果沒有，則按順序往下匹配）：

1. Web 服務(wù)器返回的 HTTP 頭中的 Content-Type: text/html; charset=""的編碼
2. 網(wǎng)頁本身 meta header 中的 charset 部分
3. 瀏覽器菜單里一般允許用戶強(qiáng)制指定編碼
4. 部分瀏覽器 (比如 Firefox) 可以選擇編碼自動(dòng)檢測(cè)功能，使用基于統(tǒng)計(jì)的方法判斷未定編碼。

分段

編碼方式確定后，網(wǎng)頁的內(nèi)容就被轉(zhuǎn)化為Unicode字符了，分段的過程就是將文本分為由不同語言組成的小段.

選擇字體

下面我們來談?wù)勛煮w，字體的分類大致有下面這些:
1. 點(diǎn)陣字體（Bitmap Fonts）
2. 輪廓字體（Outline Font）
2-1. PostScript字體
2-2. TrueType字體
2-3. OpenType字體
3.筆畫字體（Stroke-based font）
4.METAFONT

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

如果按照字形來分的話，字體又可以分為：

• 襯線（serif）
• 非襯線（sans-serif）
• 等寬字體（monospace ）
• 書寫體（cursive）
• 夢(mèng)幻體（fantasy）

注：其中"serif"表示"字腳"、"裝飾"的意思，而"sans"來源于法語，是"無"的意思。

常見的襯線有下面這些，字形的末端都會(huì)有"腳"：

常見的非襯線有：

而系統(tǒng)所包含哪些字體跟什么有關(guān)呢？當(dāng)我們想用一種字體，但不確認(rèn)這個(gè)字體是否是系統(tǒng)已有的，怎么去確認(rèn)呢？

首先系統(tǒng)所包含字體不只和系統(tǒng)預(yù)裝的字體有關(guān)，還和系統(tǒng)上安裝哪些軟件有關(guān)，微軟操作系統(tǒng)下，詳細(xì)的系統(tǒng)和一些軟件包含的字體可以查看這個(gè)索引：Microsoft typography，Mac系統(tǒng)可以查看這個(gè)索引：List of typefaces included with OS X

再讓我們回到網(wǎng)頁中，CSS里如果font-family未設(shè)置中文字體時(shí)，我們知道是根據(jù)瀏覽器默認(rèn)的字體來顯示，找到瀏覽器對(duì)應(yīng)的設(shè)置，你也可以手動(dòng)修改這些。

1

p{font:12px/24px Tahoma;}

2

p{font:12px/24px Arial;}

以上兩種寫法按照前面我們所說的規(guī)則來說，在同一個(gè)系統(tǒng)和瀏覽器中匹配的是唯一的字體，那么它們的顯示還會(huì)有區(qū)別嗎？看看下面Windows系統(tǒng)下部分瀏覽器的測(cè)試結(jié)果：

仔細(xì)看，你會(huì)發(fā)現(xiàn)IE6,IE8,Chrome,Firefox下文字底部不在同一水平線上的。所以由此得知：英文字體不會(huì)影響中文的字形，但會(huì)影響其位置。可是…為什么會(huì)影響位置呢？我們?cè)賮砜聪戮W(wǎng)頁中的文字的位置到底是怎么被控制的：

默認(rèn)的規(guī)則是：用行高（line-height）減去內(nèi)容區(qū)（content area）的高度所得到的值一分為二，各放在內(nèi)容區(qū)的上面和下面，但不同瀏覽器的渲染不同，并且結(jié)合上面的測(cè)試結(jié)果，就算內(nèi)容區(qū)的位置是相同的，文字在內(nèi)容區(qū)的位置還可能不同。
而影響文字在內(nèi)容區(qū)的位置的因素有下面幾個(gè)，也就是說這也不是統(tǒng)一的。

• 字體類型
• 排版引擎
• 瀏覽器

排版引擎

總的來說，Mac OS X用戶使用CoreText渲染引擎，Windows7 和Windows Vista用戶使用DirectWrite 或 GDI,而Windows XP則使用GDI.
對(duì)比圖片來看看它們之間的區(qū)別，其中上圖為FacitWeb字體，下圖為 Minion Pro字體。

Core Text 渲染引擎

DirectWrite渲染引擎

GDI渲染引擎，開啟ClearType

GDI渲染引擎，標(biāo)準(zhǔn)抗鋸齒（Standard antialiasing）

GDI渲染引擎，無抗鋸齒（no antialiasing）

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

所以不同系統(tǒng)因?yàn)殇秩疽娴牟煌瑢?dǎo)致文字在細(xì)節(jié)上也表現(xiàn)不同，在這里順便說下微軟和蘋果兩家公司對(duì)于字體表現(xiàn)的不同風(fēng)格，蘋果公司更專注于還原字形設(shè)計(jì)的本來面貌，使字形更優(yōu)雅、平滑。而微軟則更傾向字體的清晰，可讀性。

瀏覽器

確認(rèn)了排版引擎，我們?cè)賮砜纯礊g覽器，瀏覽器會(huì)有布局引擎，它來決定是怎樣用html結(jié)構(gòu)，css樣式表來你渲染網(wǎng)頁。布局引擎和網(wǎng)站外觀表現(xiàn)是息 息相關(guān)的，但是對(duì)于字形渲染，絕大部分還是由操作系統(tǒng)的文本渲染引擎來控制的，這就很好的解釋了為什么同樣的瀏覽器，在不同的操作系統(tǒng)下有不同的字形表 現(xiàn)，見下圖：

Windows下各瀏覽器所使用的渲染模式。

光柵化

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

總結(jié)

現(xiàn)在再回過頭來說說研究字體渲染的初衷，細(xì)節(jié)控對(duì)于不同瀏覽器像素級(jí)統(tǒng)一有時(shí)候要求是很極致，研究的目的是想做出一套方法來實(shí)現(xiàn)它們的統(tǒng)一。可現(xiàn)在 我們知道，這和字體類型、系統(tǒng)排版引擎、瀏覽器都有關(guān)系，并且排版引擎有多種，這里還沒有加上Linux，Android系統(tǒng)，瀏覽器就更不用說了，如果 再加上移動(dòng)端，就更復(fù)雜了。所以完美的方案是近乎沒有的，就算寫一大堆的hack。

如果再跳出來看這個(gè)問題，我們真的一定需要讓不同瀏覽器在字體渲染方面的表現(xiàn)完美一致嗎，其實(shí)普通的用戶不是專門測(cè)試人員，不會(huì)打開所有瀏覽器對(duì)比 區(qū)別，所以細(xì)微的差別對(duì)普通用戶來說幾乎是無法感知的，是的，我這里說的是"細(xì)微"，但是如果差別比較離譜，這些導(dǎo)致表現(xiàn)不同的原因都不會(huì)成為借口。

注：頭圖來自 http://www.gettyimages.cn/

參考資料：

• http://blog.jjgod.org/2011/04/09/how-do-browsers-render-text/
• http://jjgod.org/docs/slides/TextRenderingWithQt.pdf
• http://blog.typekit.com/2010/10/05/type-rendering-on-the-web/
• http://blog.typekit.com/2010/10/15/type-rendering-operating-systems/
• http://blog.typekit.com/2010/10/21/type-rendering-web-browsers/
• http://blog.typekit.com/2010/11/09/type-rendering-the-design-of-fonts-for-the-web/
• http://blog.typekit.com/2010/12/08/type-rendering-font-outlines-and-file-formats/
• http://blog.typekit.com/2010/12/14/a-closer-look-at-truetype-hinting/
• http://blog.csdn.net/easebone/article/details/7382633
• http://zh.wikipedia.org/wiki/%E7%94%B5%E8%84%91%E5%AD%97%E4%BD%93

原文地址：http://isux.tencent.com/website-font-rendering-process.html
作者：麥時(shí)

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】
 
================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是一個(gè)分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程的干貨網(wǎng)站。
【特色推薦】
PS禮儀手冊(cè)：網(wǎng)頁設(shè)計(jì)師必須修煉的內(nèi)功技法，更是不可或缺的WEB設(shè)計(jì)指南http://hao.uisdc.com/ps/。
設(shè)計(jì)微博：擁有粉絲量63萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設(shè)計(jì) 微信號(hào)：【youshege】?jī)?yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：