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

阿新 • • 發佈：2019-12-12

原文連結：使用 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 網頁自定義字型

微信公眾號

掃一掃下面的二維碼關注微信公眾號，在公眾號中回覆◉加群◉即可加入我們的雲原生交流群，和孫巨集亮、張館長、陽明等大佬一起探討雲原生技術

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

1. 字型難題

2. 解決思路

3. 裁剪工具

4. font-spider-plus 使用方法

書寫 HTML 檔案

壓縮本地 WebFont

書寫 CSS

base64 編碼

引入 CSS

5. 總結

6. 參考資料

微信公眾號

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

用grunt對css代碼進行壓縮

【JS代碼壓縮】使用YUI Compressor對js文件進行壓縮處理

js實現對上傳圖片進行壓縮並且預覽

怎麽對PDF文件進行壓縮操作

對前端web js，css文件進行壓縮混淆

對圖像進行壓縮再進行圓形處理

Linux下如何實現對某個文件夾進行壓縮

怎麼線上對圖片進行壓縮不改變清晰度

怎麽在線對圖片進行壓縮不改變清晰度

使用js對在網頁中開啟Excel表格，並進行自動求和操作。

淺談前端效能優化（二）——對HTTP傳輸進行壓縮

web外部字型檔壓縮（font-spider），安裝，使用及陷阱

使用Compression對檔案流進行壓縮後寫入資料庫

使用Python批量對圖片進行壓縮處理

利用python對mnist資料集中的0，1手寫字型進行二分類

JAVA使用thumbnailator對base64圖片進行壓縮

nodejs 對檔案進行壓縮加密和解壓縮解密

c#利用zlib.net對string進行壓縮（與java程式生成結果對應）

對動態網頁進行逆向工程

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

1. 字型難題

2. 解決思路

3. 裁剪工具

4. font-spider-plus 使用方法

書寫 HTML 檔案

壓縮本地 WebFont

書寫 CSS

base64 編碼

引入 CSS

5. 總結

6. 參考資料

微信公眾號

相關推薦