各浏覽器下字體排版一致的問題

 　　我們知道同一種字體在不同浏覽器上的表現有可能是不同的，除了浏覽器，還有哪些導致表現不同的因素呢?不同系統下字形的渲染也是不一樣的，根本原因是什麼呢?我們希望各浏覽器下字體排版一致，實現的話有完美的方案嗎?

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

　　解碼

　　了解解碼之前，我們稍微先簡單回顧下編碼的一些知識，常見的名詞有：ASCII 、GB2312、Big5、Unicode、UTF-8，它們之前有什麼區別或聯系呢?簡單來說，起初美國國家標准協會ANSI制定了一個標准，規定了常 用字符的集合以及每個字符對應的編號，這就是ASCII字符集(Character Set)，也稱ASCII碼，當計算機慢慢發展，人們發現之前的128個的字符不能滿足需求了，於是便在原基礎上進行擴展，GB2312、Big5等都屬 於擴展後的編碼方式，再後來呢，為了實現在一份文檔中可以正確顯示所有類型的字符，於是Unicode字符集誕生了，而UTF-8是Unicode的實現 方式之一, 與之相似的還有UTF-16和UTF-32。

　　回顧了編碼，我們再來看解碼，浏覽器收到網頁內容後，首先需要把這些內容轉化為可閱讀的文本，上面我們也提到了，不同國家或語言會使用不同的編碼方式，那怎麼去判斷編碼方式呢，方法有下面這些(優先匹配前面的規則，如果沒有，則按順序往下匹配)：

　　Web 服務器返回的 HTTP 頭中的 Content-Type: text/html; charset=”"的編碼

　　網頁本身 meta header 中的 charset 部分

　　浏覽器菜單裡一般允許用戶強制指定編碼

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

　　分段

　　編碼方式確定後，網頁的內容就被轉化為Unicode字符了，分段的過程就是將文本分為由不同語言組成的小段.

　　選擇字體

　　下面我們來談談字體，字體的分類大致有下面這些:

　　1. 點陣字體(Bitmap Fonts)

　　2. 輪廓字體(Outline Font)

　　2-1. PostScript字體

　　2-2. TrueType字體

　　2-3. OpenType字體

　　3.筆畫字體(Stroke-based font)

　　4.METAFONT

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

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

　　襯線(serif)

　　非襯線(sans-serif)

　　等寬字體(monospace )

　　書寫體(cursive)

　　夢幻體(fantasy)

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

　　常見的襯線有下面這些，字形的末端都會有”腳”：

　　常見的非襯線有：

　　而系統所包含哪些字體跟什麼有關呢?當我們想用一種字體，但不確認這個字體是否是系統已有的，怎麼去確認呢?

　　首先系統所包含字體不只和系統預裝的字體有關，還和系統上安裝哪些軟件有關，微軟操作系統下，詳細的系統和一些軟件包含的字體可以查看這個索引：Microsoft typography，Mac系統可以查看這個索引：List of typefaces included with OS X

　　再讓我們回到網頁中，CSS裡如果font-family未設置中文字體時，我們知道是根據浏覽器默認的字體來顯示，找到浏覽器對應的設置，你也可以手動修改這些。

1

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

2

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

　　以上兩種寫法按照前面我們所說的規則來說，在同一個系統和浏覽器中匹配的是唯一的字體，那麼它們的顯示還會有區別嗎?看看下面Windows系統下部分浏覽器的測試結果：

　　仔細看，你會發現IE6,IE8,Chrome,Firefox下文字底部不在同一水平線上的。所以由此得知：英文字體不會影響中文的字形，但會影響其位置。可是…為什麼會影響位置呢?我們再來看下網頁中的文字的位置到底是怎麼被控制的：

　　默認的規則是：用行高(line-height)減去內容區(content area)的高度所得到的值一分為二，各放在內容區的上面和下面，但不同浏覽器的渲染不同，並且結合上面的測試結果，就算內容區的位置是相同的，文字在內容區的位置還可能不同。

　　而影響文字在內容區的位置的因素有下面幾個，也就是說這也不是統一的。

　　字體類型

　　排版引擎

　　浏覽器

　　排版引擎

　　總的來說，Mac OS X用戶使用CoreText渲染引擎，Windows7 和Windows Vista用戶使用DirectWrite 或 GDI,而Windows XP則使用GDI.

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

　　Core Text 渲染引擎

　　DirectWrite渲染引擎

　　GDI渲染引擎，開啟ClearType

　　GDI渲染引擎，標准抗鋸齒(Standard antialiasing)

　　GDI渲染引擎，無抗鋸齒(no antialiasing)

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

　　所以不同系統因為渲染引擎的不同，導致文字在細節上也表現不同，在這裡順便說下微軟和蘋果兩家公司對於字體表現的不同風格，蘋果公司更專注於還原字形設計的本來面貌，使字形更優雅、平滑。而微軟則更傾向字體的清晰，可讀性。

　　浏