新年伊始也來談談Webfont

開篇

隨着設備終端的不斷升級，瀏覽器的支持度愈來愈高。網頁字體的流行也是必然的趨勢，他的課選取，可搜索，可縮放，適配度高以及高性能、良好用戶體驗等優點讓它一躍成爲網頁前端們實現設計師天馬行空的設計圖首選。 今天咱們就來介紹一下webfont及其應用，順便講講怎麼優化webfont。

介紹

簡而言之，webfont就是可讓網頁使用在線字體的一種技術手段。在此以前設計師在設計稿當中使用的一些特殊字體因爲在別人的設備裏沒有這個字體而沒法顯示預想的效果，咱們的解決方案是用圖片來替換特殊字體，webfont的出現這個問題就引刃而解了。

它經過 CSS的@font-face語句引入在線字體，使用CSS選擇器指定運用字體的文本。目前網絡上使用的字體格式有四種EOT、TTF、WOFF 和 WOFF2

支持狀況以下：

• WOFF 2.0 提供給支持它的瀏覽器（對許多瀏覽器來講還沒有實現）。
• WOFF 支持大多數瀏覽器。
• TTF 支持舊 Android（4.4 版如下）瀏覽器。
• EOT 支持舊 IE（IE9 版如下）瀏覽器。

注：從技術角度來說還有一種格式，即SVG字體，但IE和Firefox從不支持它，而且好像如今的Chrome也放棄了對他的支持，因此暫且就忽略它了。

font-face

css3推出了一個at-rule屬性@font-face，來指定特定字體資源的位置、樣式特性及其支持的 Unicode 子集。

語法以下：

@font-face {
      [ font-family: <family-name>; ] ||
      [ src: [ <url> [ format(<string>#) ]? | <font-face-name> ]#; ] ||
      [ unicode-range: <urange>#; ] ||
      [ font-variant: <font-variant>; ] ||
      [ font-feature-settings: normal | <feature-tag-value>#; ] ||
      [ font-variation-settings: normal | [ <string> <number>] # ||
     [ font-stretch: <font-stretch>; ] ||
      [ font-weight: <weight>; ] ||
      [ font-style: <style>; ]
    }
複製代碼

font-family: 指定字體的名字，所指定的字體名字將會被用於font或font-family屬性； local() 指令用於引用、加載和使用安裝在本地的字體； format(): 經過該屬性來指示URL資源引用的字體格式（可選）； unicode-range: 指定要使用的字體的Unicode子集，從而減少字體載入的體積；

好比上圖設計師想要的結果，騷氣的科技感數字咱們要使用DIN字體，可是DIN字體不是全部設備都支持因此咱們打算讓他支持：

@font-face {
    font-family: DIN;
    font-style: normal;
    font-weight: 400;
    src: url(../assets/font/DIN_Alternate_Bold.eot);
    src: local("DIN Alternate"),
      url(../assets/font/DIN_Alternate_Bold.woff) format("woff"),
      url(../assets/font/DIN_Alternate_Bold.ttf) format("truetype"),
      url(../assets/font/DIN_Alternate_Bold.svg#DINAlternateBold) format("svg")
}
複製代碼

當瀏覽器察覺到本地沒有DIN字體的時候，他會按照指定的順序循環訪問提供的資源列表，若是存在一個format格式提示則先檢查是否支持，若是支持就加載該資源，若是不支持則跳過進入下一個格式提示，若是不存在格式提示則不論如何會嘗試加載相應的資源。

性能優化

壓縮

字體是字形的集合，其中的每一個字形都是一組描述字母形狀的路徑。每種不一樣字形，每每包含了大量的共同信息，這些信息是能夠壓縮的。 常見的壓縮方式是：GZIP及其餘兼容的壓縮模式：

• EOT 和 TTF 格式默認狀況下不進行壓縮，你能夠在服務器開啓GZIP進行壓縮；
• WOFF 具備內建壓縮
• WOFF2 採用自定義預處理和壓縮算法，提供的文件大小壓縮效率比其餘格式高大約 30% 你能夠選擇其餘的壓縮方式來減少字體的體積，但要注意作好瀏覽器測試。

unicode-range

利用unicode-range指定編碼子集，能夠大大減少字體的體積。使用方法有：

• 指定單一的字符編碼用逗號隔開（例如 U+416）
• 間隔範圍 用橫槓- 表示代碼的起始，例如 （U+400-4ff）
• 通配符（例如 U+4??）？表明任何16進制數字 上述三者能夠配合使用，並用逗號隔開。 注：有時候有些瀏覽器對unicode-range支持的很差，這個時候咱們就須要對所使用的字體進行手動的選取子集。網絡上不少第三方工具 如fonttools 字蛛等。

font-display

注：這是最新的屬性，還沒達到可以使用標準（目前Safari還不支持，Chrome部分版本支持） 這是最近剛剛提出來的一個方案，就爲了解決字體渲染空白問題，說這個以前咱們先來說講網頁字體的加載和渲染問題。

主要誘因是瀏覽器在構建渲染樹（DOM和CSSOM樹）以前會延遲字體請求，由於瀏覽器必須構建萬渲染樹以後才能知道使用哪些字體來渲染文本，同時在獲取到構建渲染樹關鍵資源以前可能會阻止瀏覽器渲染文本（網頁內容的首次渲染和字體資源加載之間的「競賽」時，瀏覽器會產生遺漏渲染全部文本的渲染 注意是全部）。固然對於空白問題在不一樣瀏覽器的表現不一樣，好比Safari會在字體下載完成以前都阻斷文本渲染，而chrome會等待最多三秒開始啓用後背字體並在下載完成後重渲染。總結下來就下面這個圖：

在Block階段瀏覽器使用不可見字體渲染文本（出現空白渲染）；到了Swap階段瀏覽器使用後備字體（sans-serif）渲染文本；在Failure這個階段意味着字體下載失敗，瀏覽器將一隻延用後背字體。 目前的問題在於咱們無法控制這些階段的時間長短以及當其中一個階段失敗後怎麼處理，font-display給了這種可能。它有四個值：block, swap, fallback 以及 optional，固然也有auto其表現和block一致。 各個屬性值表現以下圖：

• font-display: block ,文本將被阻斷一段時間（長短看瀏覽器，新版Safari， Chrome ，Firefox是3秒；IE爲0秒可視爲沒有block階段；舊版本Safari無限長時間），會出現所謂的空白渲染問題（FOIT）
• font-display: swap ，文本將不會出現block階段，文本會當即用後背字體展示知道所需字體加載完成。會出現字體切換效果（FOUT）
• font-display: fallback ，表現介於block和swap之間。空白期縮短至100ms，而後切換到後備字體直到所需字體加載完成
• font-display: optional ，表現和fallback相似，區別在於它會自動的去根據網絡的速度（如2g網絡）來決定是否切換字體。

此屬性使用時，咱們須要根據具體狀況來使用：若是咱們使用webfont來作icon圖時候，咱們是不可能接受fallback的，因此咱們須要使用font-display:block。

更多

想要說的是@font-face 下面提到的屬性（如font-weight,font-style等）對於性能優化來講也是很重要的，他會影響瀏覽器匹配資源和加載資源的效率以及視覺一致性等因素，因此儘量準確的給瀏覽器於明確的指示。 固然了其餘的優化方案還有不少，包括HTTP緩存，利用FontLoading API優化起加載和渲染等自行探索吧。

結語

2017年過去了，原本想寫個總結的。但人在歐洲的火車上，思緒全不在這上面。眨巴眼的功夫2018年已經悄然開始三兩天了，雜貨鋪開篇也快兩年了，因爲17年後期也懶了許多文章一直沒跟上，粉絲也沒達到年初一萬的小目標，但也9900有餘，專欄共收錄文章112篇（算上這，113篇）。在此感謝做者天方夜，於秋，謝然，染陌同窗，蔣歡，林鑫，SimplyY ，Awee，鬍子大哈，吳成琦，LeviDing ，黃俊亮 ，林列歡 ，危險 ，ahonn 等（排名不分前後，可能有紕漏見諒）的投稿，爲熱愛前端的同窗們帶來知識的饕餮大餐，沒有大家的支持雜貨鋪也不會受到如此多關注。同時也感謝成千上萬的粉絲一如即往的支持，大家是我堅持的動力。在知乎裏遇到你們是個人榮幸，但願在接下來的一年裏咱們能延續這樣的默契和友誼，爲了這份純粹的愛好共同進步。