先前用 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.


Comments

# by ChrisTorng

現在網站預設都有 gZip 壓縮,所以沒有壓縮的檔案還是以壓縮格式傳輸吧? 當然事前的壓縮可以用更好但更慢的壓縮演算法壓得更小一點。不過即使是已壓縮的檔案,傳檔時一樣還是再套用 gZip 壓縮後才傳?

# by Jeffrey

to ChrisTorng,每次傳輸重新壓一次解一次,整體效率還是有差。至於重複壓縮的議題,我把 .ttf 跟 .woff 想成 .bmp vs .png,這件事就交給伺服器跟瀏覽器自己去優化,不需要我來操心,呵。

Post a comment


67 - 67 =