Web 字體簡介: TTF, OTF, WOFF, EOT & SVG

字體格式有太多選擇，不幸的是始終沒有一個能在所有的瀏覽器上通用。這意味著，你必須使用多種字體的方案來保持用戶跨平台的一致性體驗。本文內容如題，會依次介紹一下 TTF、OTF、WOFF、EOT 和 SVG 幾種字體目前在 Web 上的情況。

瀏覽器支持情況

現在，讓我們複習一些基礎知識，簡單看看現代 Web 上使用的不同字體格式。

TTF

TTF (TrueType Font) 字體格式是由蘋果和微軟為 PostScript 而開發的字體格式。在 Mac 和 Windows 操作系統上，TTF 一直是最常見的格式，所有主流瀏覽器都支持它。然而，IE8 不支持 TTF；且 IE9 上只有被設置成 "installable" 才能支持（譯註：別想了，轉別的格式吧）。

TTF 允許嵌入最基本的數字版權管理標誌————內置標誌可以告訴我們字體作者是否允許改字體在 PDF 或者網站等處使用，所以可能會有版權問題。另一個缺點是，TTF 和 OTF 字體是沒壓縮的，因此他們文件更大。

OTF

OTF (OpenType Font) 由 TTF 演化而來，是 Adobe 和微軟共同努力的結果。OTF 字體包含一部分屏幕和印表機字體數據。OTF 有幾個獨家功能，包括支持多平台和擴展字符集。OTF 字體可以在 Macintosh 和 Windows 系統上使用。

OTF 也允許多達 65000 個字元的存儲。這個額外的空間讓設計師可以自由地添加附加元素，比如小帽子、老式數字體、代替的字元和其他一些以前必須作為獨立字體分發的附加材料。

（譯註：蘋果當年為了對抗 Adobe 在 PostScript 的 Type 1 字體拉上了微軟一起擼了 TTF，結果後來微軟又反水跟 Adobe 搞一套 OTF，還讓 IE 後面的版本取消 TTF 支持，IT圈子還真是亂。。）

EOT

EOT (Embedded Open Type) 字體是微軟設計用來在 Web 上使用的字體。是一個在網頁上試圖繞過 TTF 和 OTF 版權的方案。你可以使用微軟的工具從現有的 TTF/OTF 字體轉成 EOT 字體使用，其中對字體進行壓縮和裁剪使得文件體積更小。同時為了避免一些收版權保護的字體被隨意複製，EOT 還集成了一些特性來阻止複製行為，以及對字體文件進行加密保護。聽起來很有前途？嗯哼，可惜 EOT 格式只有 IE 支持。

（譯註：微軟曾經弄死網景的惡意競爭引起了公憤，在 IE 上推行孤立主義的微軟遭到整個行業的唾棄）

WOFF

WOFF (Web Open Font Format) 本質上是 metadata + 基於 SFNT 的字體（如 TTF、OTF 或其他開放字體格式）。該格式完全是為了 Web 而創建，由 Mozilla 基金會、微軟和 Opera 軟體公司合作推出。 WOFF 字體均經過 WOFF 的編碼工具壓縮，文件大小一般比 TTF 小 40%，載入速度更快，可以更好的嵌入網頁中。metadata 允許在字體文件中包含許可數據，以解決版權問題。這是萬維網聯盟提（qing）倡（ding）的，所以毫無疑問的是字體格式的未來。目前主流的瀏覽器的新版本幾乎都支持 WOFF。

WOFF2 是 WOFF 的下一代。 WOFF2 格式在原有的基礎上提升了 30% 的壓縮率。由於它還沒有 WOFF 的廣泛支持，所以還只是一個可展望的升級。

SVG

SVG (Scalable Vector Graphics font) 字體格式使用 SVG 的字體元素定義。這些字體包含作為標準 SVG 元素和屬性的字形輪廓，就像它們是 SVG 映像中的單個矢量對象一樣。SVG 字體最大的缺點是缺少字體提示（font-hinting）。字體提示是渲染小字體時為了質量和清晰度額外嵌入的信息。同時，SVG 對文本（body text）支持並不是特別好。因為 SVG 的文本選擇（text selection）目前在 Safari、Safari Mobile 和 Chrome 的一些版本上完全崩壞，所以你不能選擇單個字元、單詞或任何自定義選項，你只能選擇整行或段落文本。

然而，如果你的目標是 iPhone 和 iPad 用戶，需要說 SVG 字體是 iOS 上 Safari 4.1 以下唯一允許的字體格式。

明智的選擇 ??? .? ??? )?

正如你所看到的，有許多因素可能會影響 Web 字體的呈現。為了提供質量和一致性，對所有可能的 OS 和瀏覽器組合進行徹底測試是至關重要的。

譯者能想到的無非是造一些 xx2woff（主流兼容）、xx2eot（兼容 IE）、xx2svg （向下兼容 Safari）之類的輪子然後在 webpack 中配置（在 npm 上看了下確實有已經有不少的輪子了, 2333），不過貌似還沒看到最佳實踐（有輪子心的同學們，機會來了！），有知道的同學歡迎在評論中補充。

原文來自 The Missing Guide to Font Formats: TTF, OTF, WOFF, EOT & SVG 。 去年的文章，如果今年有變動歡迎在評論中指出，這裡會修正一下內容。翻譯只是一點微小的工作（我譯的隨意求輕噴，逃）。

推薦閱讀：