6

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

 2 years ago
source link: https://blog.darkthread.net/blog/web-font-type/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

簡介字型檔格式：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，就讓我們忘了它吧。

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK