關(guān)于網(wǎng)頁(yè)字體你不知道的那些事

微軟雅黑是Microsoft為中文漢字推出的一種字體，和Windows Vista操作系統(tǒng)同期發(fā)布，目前廣泛地被內(nèi)嵌在各種網(wǎng)頁(yè)和軟件中。在Windows系統(tǒng)下微軟雅黑文件名為MSYHBD.TTF，這種字體每個(gè)字造價(jià)在100美元左右，想想新華字典，你就知道什么叫做一字千金了。

你可曾注意過(guò)Win7的啟動(dòng)界面，“啟”字低人一等

在了解微軟雅黑之前，我們需要科普兩個(gè)關(guān)鍵性名詞——ClearType和Hinting。這兩個(gè)名詞是成就微軟雅黑的關(guān)鍵技術(shù)，但也給微軟雅黑的字形帶來(lái)不少非議。其中包含非常復(fù)雜的技術(shù)原理，我在這里就用最簡(jiǎn)單的方式來(lái)給大家講講。

ClearType技術(shù)是Windows系統(tǒng)中的熒幕字體平滑工具，把字體分成紅綠藍(lán)（ RGB ）這三種顏色來(lái)搭配顯示，能夠改善屏幕顯示上的文本顯示效果（打印出來(lái)是沒(méi)有區(qū)別的）。

經(jīng)過(guò)放大的ClearType渲染字體

傳統(tǒng)未經(jīng)ClearType渲染的非黑即白點(diǎn)陣字體（例如常見(jiàn)的宋體），字形看起來(lái)筆畫(huà)分明。

而經(jīng)過(guò)ClearType的字體（例如微軟雅黑）邊緣是用RGB紅綠藍(lán)三種顏色組成。不過(guò)在實(shí)際大小的文字閱讀，邊緣看起來(lái)沒(méi)有上圖這么明顯。上圖只是為了更直觀看出來(lái)區(qū)別，對(duì)五號(hào)的“微軟雅黑”進(jìn)行了放大處理。

未經(jīng)ClearType渲染的小號(hào)字體筆畫(huà)相連，12%下的“微”字筆畫(huà)模糊

經(jīng)過(guò)ClearType渲染的字體，整體顯示起來(lái)更加清晰圓滑，尤其是在小號(hào)字體表現(xiàn)更好。而沒(méi)有經(jīng)過(guò)ClearType渲染的字體，會(huì)顯得筆畫(huà)粘連、粗細(xì)不均。如果文字篇幅比較長(zhǎng)的話，這些突兀黑線條就更加顯得與全文格格不入。

不過(guò)并不是所有字體都支持ClearType渲染的，只有進(jìn)行hinting（微調(diào)）的字體才能使用ClearType技術(shù)。微軟雅黑就是經(jīng)過(guò)hinting處理的字體，而hinting是需要人工目視對(duì)每個(gè)字進(jìn)行調(diào)試的，相比自動(dòng)化成本要高非常多， 所以微軟雅黑字體才需要每字造價(jià)100美元。

宋體和微軟雅黑都是網(wǎng)頁(yè)所用的安全字體，但現(xiàn)在更多網(wǎng)站都更愿意使用經(jīng)過(guò)ClearType渲染的微軟雅黑（像XP這種沒(méi)有自帶雅黑字體的系統(tǒng)打開(kāi)有該字體的網(wǎng)頁(yè)，字體就會(huì)用被默認(rèn)的宋體所取代）。而宋體那非黑即白的點(diǎn)陣原理，讓宋體看起來(lái)比較黑實(shí)銳利。加上本身的字高和間距的影響，宋體的屏顯效果比微軟雅黑差的太多了。

另外微軟雅黑體為了讓字體看起來(lái)更舒適，一直不斷地修復(fù)改版。現(xiàn)在的windows10上這種字體也得到微軟的認(rèn)可，將操作系統(tǒng)界面UI的字體和微軟雅黑進(jìn)行合并同步，看起來(lái)整體界面和樣式都更加統(tǒng)一，字形也漂亮了不少。

Windows 7和Windows10下的微軟雅黑數(shù)字對(duì)比

在最新的微軟雅黑6.20版本中，數(shù)字“1”的腳被取消、“7”開(kāi)始變彎、“8”字也不像以前是用“0”扭出來(lái)的，像這樣微小的改動(dòng)數(shù)不勝數(shù)，文字筆畫(huà)逐漸和書(shū)寫(xiě)體靠攏，字形變得更加簡(jiǎn)潔方正。

那既然微軟雅黑字體優(yōu)點(diǎn)不少，為什么網(wǎng)上評(píng)價(jià)卻那么差呢？

問(wèn)題主要可以歸分成字體Bug、字體變形和字體美感三個(gè)方面。作為一個(gè)和Windows Vista同時(shí)期的產(chǎn)物，微軟雅黑到出生到現(xiàn)在已有十年時(shí)間，但在源遠(yuǎn)流長(zhǎng)的中華文字面前，仍然有些不夠完善。

微軟雅黑的字體Bug：設(shè)計(jì)師的苦難

雖然微軟一直在完善微軟雅黑，但其實(shí)還是有些遺漏的。在Windows7和早前的Windows8操作系統(tǒng)（Windows10已得到修復(fù)）中，微軟雅黑中有些字的vmtx（定義每個(gè)字高和寬）出現(xiàn)了問(wèn)題。正常來(lái)說(shuō)，每個(gè)字都會(huì)有身高和體寬，但“慧”字在微軟雅黑中就是個(gè)沒(méi)有“身高”東西。

Windows7系統(tǒng)下微軟雅黑的疊字Bug

如果你使用Photoshop，用微軟雅黑粗體寫(xiě)下包含“慧”字的句子，在旋轉(zhuǎn)文字方向后就會(huì)出現(xiàn)疊字。因?yàn)檫@個(gè)字的vmtx中沒(méi)有給定義字高，所以豎方向的間距為0， 字體就會(huì)出現(xiàn)重疊。

像這樣出現(xiàn)Bug的字還不在少數(shù)，像憩、戚、扛、押、拙、拭等都有這個(gè)問(wèn)題，即使手動(dòng)加空格文字效果也不會(huì)等距。如果還在使用Windows7操作系統(tǒng)的朋友，可以自行感受一下設(shè)計(jì)師的憂傷。

Hinting后字體變形，影響美感

因?yàn)镃learType渲染和Hinting的手工微調(diào)，會(huì)造成字體的參差不齊，有高有低。嚴(yán)格的講這并不是字體存在的Bug，高低不一也是需要和有落差的字對(duì)比才能夠發(fā)現(xiàn)。

在Mac、Linux以及windows XP這類沒(méi)有自帶微軟雅黑字體的操作系統(tǒng)下，字體就會(huì)被自動(dòng)替換成本機(jī)的安全字體，所以下面以圖片方式展示。

Windows10系統(tǒng)下經(jīng)過(guò)放大的小四字號(hào)微軟雅黑

比如“言語(yǔ)親昵”這四個(gè)字，首字上浮末尾下沉就非常明顯能夠看得出來(lái)了。還有文章開(kāi)頭提到的Windows7開(kāi)機(jī)的正在啟動(dòng)“啟”字下沉，也就是這樣的原因。

所以說(shuō)ClearType和Hinting成就了微軟雅黑，但附帶的問(wèn)題也是很多用戶嫌棄它的理由。雖然微軟雅黑長(zhǎng)得方正、字形統(tǒng)一，但從沒(méi)有“字體等高”一說(shuō)。

這些聊天工具的收費(fèi)字體，應(yīng)該算是火星文的變種吧

字體也有大學(xué)問(wèn)，雖然字體本身就是平淡無(wú)味的東西，但一個(gè)好的字體能提高閱讀的質(zhì)量。

微軟雅黑作為首款全面支持ClearType屏顯技術(shù)的簡(jiǎn)體漢字，看似簡(jiǎn)單卻值得深究。至于美感這回事就見(jiàn)仁見(jiàn)智了，喜歡就用不喜歡就換，反正國(guó)內(nèi)的方正字體也有許多值得我們選用的字體呢。