使用 font-spider 對 webfont 網頁字體進行壓縮

原文連接：使用 font-spider 對 webfont 網頁字體進行壓縮

隨着當前 Web 技術的突飛猛進，網頁界面內容愈來愈豐富，讓人眼花繚亂，其中就包括了網頁中的各類自定義字體。

例如，我的博客的首頁字體：

CSS3 引入的 @font-face 這一屬性能夠很好的解決這個問題，能夠幫助咱們很是靈活的使用一些特殊的字體，即便用戶電腦裏面沒有安裝這個字體，網頁也能夠顯示。

EOT 字體是 IE 瀏覽器的首選格式，其餘瀏覽器都不支持；其餘瀏覽器更鐘愛常見的 TTF、SVG、WOFF。

基本語法以下：

@font-face {
    font-family: <自定義一個字體的名稱>;
    src: url('<下載好的字體，在電腦中保存的路徑>');
    font-variant: <font-variant>; 
    font-stretch: <font-stretch>;
    font-style: <style>;
    font-weight: <weight>;

例如：

@font-face {
    font-family: 'Lora';
    src: url('../fonts/STKaiti.eot'); /* IE9 Compat Modes */
    src: url('../fonts/STKaiti.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('../fonts/STKaiti.woff2') format('woff2'), /* Super Modern Browsers */
           url('../fonts/STKaiti.woff') format('woff'), /* Modern Browsers */
           url('../fonts/STKaiti.ttf') format('truetype'), /* Safari, Android, iOS */
           url('../fonts/STKaiti.svg#STKaiti') format('svg'); /* Legacy iOS */
    font-style: normal;
    font-weight: normal;
}

body {
  font-family: STKaiti;
  ...
}

測試效果：Chrome，Firefox，IE7-IE11 都可以實現

1. 字體難題

自定義中文字體雖炫酷，但有一個弊端，那就是中文字體太大了，很耗費資源，具體的緣由其實很簡單：英文只有 26 個字母，一張 ASCII 碼錶上 128 個字符集幾乎能夠表示任何英文語句。因爲字符集小，字體文件也能夠作的很是小；中文字體就徹底不一樣，單單 GB2313 編碼的中文字符（含符號）就達到 7445 個，字符數量是 ASCII 碼錶的 58 倍，而字體設計師須要爲每個中文字符設計字體，簡單計算下，中文字體文件大小也幾乎達到英文字體文件的數十倍。

2. 解決思路

解決思路其實也很簡單，只在字庫中保留頁面中出現的文字，將其餘大量不用的文字刪掉，生成一個只包含特定字符的小字體文件，即可以大大減小字體文件，從而提升訪問速度。如今思路有了，那麼有沒有現成的工具呢？

3. 裁剪工具

還真有。通過我一番搜尋，找到了兩款工具：一個是華人開發的「字蛛」，英文名 font-spider，依賴 Node.js 環境，是一款命令行工具。主要思路是採集線上網頁使用到的字體，從字體文件中分離出來，完成大幅度壓縮。另外一個是騰訊的大佬改版後的 font-soider，叫 font-spider-plus。它們的工做原理以下：

我選擇使用 font-spider-plus，畢竟改版過的，bug 更少，功能更多，還支持線上動態渲染的頁面。惟一的不足就是官方文檔寫的太含糊了，許多人看了根本不知道怎麼用。下面我將給我一個詳細的範例，手把手教你如何使用 font-spider-plus。

4. font-spider-plus 使用方法

根據官方文檔，要想使用 font-spider-plus，首先要在 CSS 文件中經過 @font-face 引入全量大小的特殊字體。具體怎麼作呢？並無說，我來告訴你。

書寫 HTML 文件

首先咱們新建一個文件夾用來放 html 文件：

$ mkdir index

而後在 index 目錄中建立一個 index.html 文件，內容以下：

<div class="test">
米開朗基楊
</div>
<style>
  @font-face {
    font-family: 'font';
    src: url('../fonts/<font>.eot');
    src:
      url('../fonts/<font>.eot?#font-spider') format('embedded-opentype'),
      url('../fonts/<font>.woff2') format('woff2'),
      url('../fonts/<font>.woff') format('woff'),
      url('../fonts/<font>.ttf') format('truetype'),
      url('../fonts/<font>.svg') format('svg');
    font-weight: normal;
    font-style: normal;
  }
  .test{
      font-family: 'font';
  }
</style>

• 請將<div class="test"> </div> 中的文字換成你本身的網站的文字。你能夠選擇將你的博客全部文章內容全選，而後粘貼到此處。
• 下載你想使用的字體到 fonts 文件夾，而後將 index.html 中的 <font> 換成你下載的字體的前綴。

特別說明： @font-face 中的 src 定義的 .ttf 文件必須存在，其他的格式將由工具自動生成

下面是中文字體對應的英文名稱：

新細明體：PMingLiU 
細明體：MingLiU 
標楷體：DFKai-SB 
黑體：SimHei 
宋體：SimSun 
新宋體：NSimSun 
仿宋：FangSong 
楷體：KaiTi 
仿宋_GB2312：FangSong_GB2312 
楷體_GB2312：KaiTi_GB2312 
微軟正黑體：Microsoft JhengHei 
微軟雅黑體：Microsoft YaHei 

裝Office會多出來的一些字體： 
隸書：LiSu 
幼圓：YouYuan 
華文細黑：STXihei 
華文楷體：STKaiti 
華文宋體：STSong 
華文中宋：STZhongsong 
華文仿宋：STFangsong 
方正舒體：FZShuTi 
方正姚體：FZYaoti 
華文彩雲：STCaiyun 
華文琥珀：STHupo 
華文隸書：STLiti 
華文行楷：STXingkai 
華文新魏：STXinwei 

蘋果電腦中的字體： 
華文細黑：STHeiti Light [STXihei] 
華文黑體：STHeiti 
華文楷體：STKaiti 
華文宋體：STSong 
華文仿宋：STFangsong 
麗黑 Pro：LiHei Pro Medium 
麗宋 Pro：LiSong Pro Light 
標楷體：BiauKai 
蘋果麗中黑：Apple LiGothic Medium 
蘋果麗細宋：Apple LiSung Light

壓縮本地 WebFont

而後執行下面的命令來壓縮本地 WebFont：

$ fsp local index/index.html

哦對了，你須要先經過 npm 安裝 fsp 命令：

$ npm i font-spider-plus -g

壓縮完成後，就會在 fonts 目錄下生成壓縮後的字體文件：

$ ll fonts/

total 41328
-rw-rw-rw-  1 cnsgyg  staff   7.7K 11 21 01:08 STKaiti.eot
-rw-rw-rw-  1 cnsgyg  staff   8.2K 11 21 01:08 STKaiti.svg
-rw-rw-rw-  1 cnsgyg  staff   7.6K 11 21 01:08 STKaiti.ttf
-rw-rw-rw-  1 cnsgyg  staff   7.7K 11 21 01:08 STKaiti.woff
-rw-rw-rw-  1 cnsgyg  staff   3.9K 11 21 01:08 STKaiti.woff2

壓縮以前的字體文件會被移到 fonts 目錄下的 .font-spider 目錄：

$ ll fonts/.font-spider

total 24880
-rw-rw-rw-  1 cnsgyg  staff    12M 11 21 01:08 STKaiti.ttf

書寫 CSS

如今字體壓縮完了，怎麼應用到本身的網站中呢？也很簡單，先寫個 CSS 經過 @font-faxe 引入壓縮後的字體，格式與第一步中的 index.html 相似：

/* fonts-zh.css */
@font-face {
  font-family: 'font';
  src: url('../fonts/<font>.eot');
  src: url('../fonts/<font>.eot?#font-spider') format('embedded-opentype'),
         url('../fonts/<font>.woff2') format('woff2'),
         url('../fonts/<font>.woff') format('woff'),
         url('../fonts/<font>.ttf') format('truetype'),
         url('../fonts/<font>.svg') format('svg');
  font-weight: normal;
  font-style: normal;
  }

這樣還不行，你還須要將壓縮後的字體文件拷貝你的網站中，CSS 中經過相對路徑要能找到這些字體文件。可我不想這麼作，太麻煩了，我還想更簡單點。

base64 編碼

靈機一動，想到了 base64，編碼以後能夠不用拷貝這些字體文件，還能減小網站字體的加載體積，真是一舉兩得啊！具體的步驟我就不解釋了，直接把全部步驟放到腳本中：

#!/bin/bash

font=STKaiti

eot=$(cat fonts/$font.eot|base64|tr -d '\n')
woff=$(cat fonts/$font.woff|base64|tr -d '\n')
woff2=$(cat fonts/$font.woff2|base64|tr -d '\n')
ttf=$(cat fonts/$font.ttf|base64|tr -d '\n')
svg=$(cat fonts/$font.svg|base64|tr -d '\n')

cat > fonts-zh.css <<EOF
@font-face {
    font-family: '$font';
    src: url(data:application/font-eot;charset=utf-8;base64,$eot) format('eot');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: '$font';
    src: url(data:application/font-woff2;charset=utf-8;base64,$woff2) format('woff2'),
         url(data:application/font-woff;charset=utf-8;base64,$woff) format('woff'),
     url(data:application/font-ttf;charset=utf-8;base64,$ttf) format('truetype'),
     url(data:application/font-svg;charset=utf-8;base64,$svg) format('svg');
    font-weight: normal;
    font-style: normal;
}
EOF

執行完上面的腳本後，就生成了一個 fonts-zh.css，這是咱們惟一須要的東西，再也不須要任何額外的文件。

引入 CSS

最後一步就是在你的網站中引入該 CSS，具體的作法大同小異，以 hugo 爲例，先將 fonts-zh.css 複製到網站主題目錄的 static/css/ 目錄下，而後在 <head></head> 中引入該 css，以 beatifulhugo 主題爲例，直接在 layouts/partials/head_custom.html 中加上下面一行：

<link rel="stylesheet" href="{{ "css/fonts-zh.css" | absURL }}" />

最後讓網站的 body 使用該中文字體，具體的作法是修改 body 的 css，以 hugo 的 beatifulhugo 主題爲例，修改 static/css/main.css 中的 body 屬性：

body {
  font-family: STKaiti;
  ...
}

能夠再加上備用字體，例如：

body {
  font-family: STKaiti,Cambria;
  ...
}

表示若是 STKaiti 字體不可用，將使用 Cambria 字體。到這裏就大功告成了，具體的效果能夠參考個人網站：https://fuckcloudnative.io/。

5. 總結

若是你沒有強迫症，到這一步就大功告成了，可我還以爲不夠簡單，那麼多步驟實在是太繁瑣了，我要讓它們所有自動化，把全部的步驟放到一個自動化腳本中。這還不夠，爲了造福大衆，我在 GitHUb 中新建了一個倉庫，全部的腳本和步驟都在上面，有需求的小夥伴能夠拿去 happy 啦~~

項目地址：https://github.com/yangchuansheng/font-spider-plus

6. 參考資料

• 如何優雅的在網頁裏使用中文字體
• 字蛛（font-spider）讓你愛上 @font-face 網頁自定義字體

微信公衆號

掃一掃下面的二維碼關注微信公衆號，在公衆號中回覆◉加羣◉便可加入咱們的雲原生交流羣，和孫宏亮、張館長、陽明等大佬一塊兒探討雲原生技術