如何避免 web font 在瀏覽器中的鋸齒現象，製作字體時有沒有什麼方法可以優化字體的細節？

01-14

高DPI/Mac下其實還好，重點是Windows下，字體本身有沒有提升的方法。

中文 web font 目前還不怎麼可用，所以以下都針對這兩年越來越成熟的西文 web font 來說：

Mac OS X 對一切字體一視同仁，web font 的渲染效果和系統自帶字體一樣好。
Windows 里字體渲染的「鋸齒」結果主要都是因為：1. 一些 TrueType 輪廓字體缺乏必要的 hinting [1]；2. ClearType 渲染的 TrueType 輪廓字體天生就這德行。
如果沒有 hinting，正文字體無法在 Windows 里清晰顯示 [1]，不論 ClearType 開啟與否。
Windows 字體渲染風格的重點就是黑白分明。ClearType 之前（或不開啟 ClearType 的時候）由小字型大小時的點陣實現（大字型大小時用平滑的灰度抗鋸齒），ClearType 時代由 ClearType 實現（無論大小字型大小，一律亞像素抗鋸齒，但抗鋸齒風格很粗糙，大字型大小時曲線上的鋸齒非常明顯——「ClearType is effectively a hybrid of subpixel and black-and-white rendering」[2]）。所以說「ClearType 渲染的 TrueType 輪廓字體天生就這德行」。
因為 ClearType 對曲線的抗鋸齒質量實在太差，在 web font 領域，專業的用於大字型大小顯示的標題字體（英語稱「display face/font」）會提供 PostScript 輪廓的版本。因為 ClearType 不支持 PostScript 輪廓的字體，所以系統會對其使用傳統的灰度抗鋸齒，這樣效果比 ClearType 好 [3]。而 DirectWrite 可以處理 PostScript 輪廓的字體，並且效果很不錯。

所以，為了讓 web font 在 Windows 上顯示得好一些：

對於正文字體，一定要有 hinting。
對於標題字體，一定要用 PostScript 輪廓。

這兩條倒不算「細節」。前一條是多年來為 Windows 提供字體時的基本要求，後一條是將業界標準的主流技術用在 Windows 的落後技術上來做 hack。

似乎 web font 服務商都不怎麼標註字體是否有 hinting 以及是 TrueType 輪廓還是 PostScript 輪廓，最好選擇字體的時候留意一下。來自 FontFont 的 FF * Web 系列字體都是為屏幕顯示優化字形並人工 hint 的版本，很值得考慮。[4]

[1] 看 Typekit 的〈Skolar Web hinted for better screen rendering〉這篇日誌里的對比圖： http://blog.typekit.com/2011/03/16/skolar-web-hinted-for-better-screen-rendering/

[2]〈A Closer Look At Font Rendering〉這篇文章介紹了一些字體渲染、web font 的基礎知識： http://www.smashingmagazine.com/2012/04/24/a-closer-look-at-font-rendering/

[3] 看 Typekit 的〈Improved font rendering on Windows〉這篇日誌里的對比圖： http://blog.typekit.com/2011/07/26/new-from-typekit-improved-font-rendering-on-windows/

[4] FontFont 在 Typekit 的頁面： https://typekit.com/foundries/fontfont

可能唯一的方法是使用複合字體，西文用 TTF，用 ttfautohint 生成間距數據；漢字用 CFF，不要加 PS hint。

但是這辦法最近在 chrome 里不好用了，因為 chrome 里 CFF 字體的 Gamma 會變得很奇怪。

每種瀏覽器對web font文件都有各自的喜好,IE對.eot支持得比較好，一般不會有鋸齒，Firefox對.woff支持得比較好，效果堪稱完美。chrome對.svg支持得比較好，一般不會有鋸齒，同時chrome也支持.woff，不過對.woff支持得比較差。

一般產生鋸齒的情況都出在以chrome為內核的瀏覽器上，如果@font-face語句里有.woff也有.svg，chrome會優先使用.woff。不可避免地會產生鋸齒。如果把.woff文件引用去掉，chrome就會使用.svg文件，就不會產生鋸齒了。但這樣頁面在Firefox瀏覽器下就會有問題。

試試有字型檔(www.youziku.com)吧，它是有檢測瀏覽器版本，如果是chrome瀏覽器自動推送.svg