是的，父親節快樂

近幾年web字體在web開發中，越來越受到歡迎。開發者可以使用web字體，渲染特定的內容。

一、字體文件格式

webfont支持的常見格式有以下幾種：

eot, ttf, woff, woff2, svg

為嘛是這幾種呢？

我們翻閱分檔得出如下結論；

Webkit/Safari(3.2+)：TrueType/OpenType TT (.ttf) 、OpenType PS (.otf)；

Opera (10+)： TrueType/OpenType TT (.ttf) 、 OpenType PS (.otf) 、 SVG (.svg)；

Internet Explorer： 自ie4開始，支持EOT格式的字體文件；ie9支持WOFF；

Firefox(3.5+)： TrueType/OpenType TT (.ttf)、 OpenType PS (.otf)、 WOFF (since Firefox 3.6)

Google Chrome：TrueType/OpenType TT (.ttf)、OpenType PS (.otf)、WOFF since version 6

是不是已經看粗來了。

（圖片引用至: https://isux.tencent.com/）

.eot + .ttf /.otf + svg + woff = 完美兼容方案

所以我們需要eot , ttf , woff, svg都引入進來，瀏覽器根據需要下載不同類型的字體；

就有了

至於woff2，它是一種更高級的文件格式，它使用了最時下最先進的Brotli壓縮演算法，壓縮體積更小就意味著它比普通字體文件更快載入，在要求極為嚴格的情況下有利於提升用戶體驗

二、瀏覽器字體載入

Safari會等待字體文件下載完畢之後才渲染使用到webfont的內容；

Chrome 和 Firefix 會等待字體載入，如果3s之內字體文件不能完全載入，將先使用備選字體渲染，等待文件載入完畢之後重新渲染；

IE下如果請求字體不可用，會立即使用備選字體渲染，當字體文件載入完畢之後重新渲染

所以，從頁面開始渲染，到瀏覽器完全載入字體文件的過程中，會出現頁面空白以及抖動的現象；那麼我們就需要用到css字體載入API。

Font Loading API 向javascript提供了兩個主要介面： FontFace 和 FontFaceSet 介面，我們可以使用FontFace介面在確認字體載入完成之後渲染；

對於尚未直至API的瀏覽器，請使用FontLoader polyfill來兼容；

優化天朝漢字

下載字體，如下「my-font.ttf」

執行命令 font-spider index.html

字體文件比5.9MB少了不止一丁點哦

但是，目前font-spider還不支持動態的生成，demo生成字體效果如下

結語：

WebFont適合於活動頁，推廣頁，邀請函等輕量級的web頁面場景使用；

另外，在使用webfont技術時，還需要注意字體的知識產權，免得將猴子惹上身。

Reference:

css字體載入API:

https://www.w3.org/TR/css-font-loading/

FontLoader polyfill兼容:

https://github.com/bramstein/fontloader

Web Font Loader:

https://github.com/typekit/webfontloader

字蛛:

http://font-spider.org/

本文作者：谷家禾（點融黑幫），前端開發，一隻怎麼吃都長不胖的程序猿。喜歡拆機器玩過氣遊戲。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！