簡介字型檔格式：TTF、EOT、WOFF、WOFF2

先前用 FontAwesome 時學到網頁字型檔格式是 woff/woff2，較早期 IIS 需加設 MIME Types 才能正確下載。前陣子查閱 Google Material Icons 文件，讀到一段字型檔放自家網站的 CSS 設定範例：

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
    url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
    url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}

嘩! 一口氣冒出 ttf、eot、woff、woff2 四種檔案型別。印象中都有看過，但不知其來歷及差異，這回就把冷知識補上吧。

由 CSS 設定應該不難推敲，會列這麼多格式是因應瀏覽器不支援時的 Fallback，並可推論，IE6-8 只吃 .eot、其他瀏覽器的偏好順序則為 woff2 > woff > ttf。

找到一篇完整比較：Understanding of Font Formats: TTF, OTF, WOFF, EOT & SVG

各格式的簡介如下：

1. TrueType Font (TTF)
   相信大家一定不陌生，ttf 是 Windows 跟 Mac OS 最常用的字型格式，由 Apple 及微軟發展，目的是要與 Adobe PostScript 字型分庭抗禮。幾乎主要瀏覽器都支援 TTF，除了老 IE (6-8)。
   TTF 提供很基本的著作權保護 - 作者可標註是否可嵌入 PDF 或網站，容易破解是個問題。另一個問題是 TTF 檔未經壓縮，檔案偏大不利網路傳輸。
2. OpenType Font (OTF)
   Adobe 跟微軟聯手推出了 TTF 進化版 - OTF，能同時包含列印跟螢幕顯示字型，並支援多平台及擴充字元集，最多可容量 65,000 個字元，額外的空間讓設計師能放入小型大寫字母、古風體數字、替代字元... 等內容。
3. Web Open Font Format (WOFF)
   為 OTF/TFF 加上 Metadata 壓縮而成，為 Mozilla、微軟、Opera 一起為網站打造的字型格式，幾乎所有瀏覽器都支援。Metadata 可用於標示授權及版權事宜，它是 W3C 官方建議的字型格式。
4. Web Open Font Format 2 (WOFF2)
   第二代 WOFF，WOFF2 壓縮比更好，比 WOFF 再減少 30% 體積，目前各大瀏覽器都已支援，是當今網路字型的首選。
5. Embedded Open Type (EOT)
   微軟推出的網站用字型規格，有工具能將 TTF/OTF 轉為 EOT 格式，重點在於補強 TTF 版權保護的不足。EOT 透過壓縮跟 Subsetting 縮小體積，並藉由 Subsetting 與加密提供保護。聽起來不錯，但只能用在 IE，就讓我們忘了它吧。

Introduction to common web fonts: TTF, EOT, WOFF and WOFF2.