痛點
前端開發的同學，我們經常會碰到需要還原設計稿中的特殊字體。我們可能會採用兩種方案
- 使用photoshop將文本圖層單獨導出成圖片;
- 直接引入改字體的字體庫.ttf文件
第一種方案：適合字體加圖案複雜，文案一般不會變
第二種方案：適合普通的文本，文案變化
但字體文件通常都會有幾 M 大小，加載速度很慢，體驗會十分不好。我們可以採用 Font-Spider (字蛛) 來對字體文件進行壓縮。
缺點：不適合前端渲染的頁面，文字數據是從後端接口獲取的
實際操作
我們是拿到一些死文字，或者後端的渲染頁面
<!-- static/font/ysf-white.ttf -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./font.css">
</head>
<body>
<!-- 這裏的class="font" 對應上面font.css中的代碼 -->
<div class="font">
<span></span>解析報告</span>
<span>角色驗證</span>
<span>健康機關</span>
</div>
<div class="font">
<span>角色驗證</span>
<span>請輸入數值，確認您的信息！</span>
<span>體重</span>
<span>身高</span>
<span>腰圍</span>
<span>臀圍</span>
<span>CM</span>
<span>Kg</span>
<span>提交</span>
</div>
</body>
</html>
@charset 'utf-8';
@font-face {
/*所有的ysf-white填入你的字體名稱*/
font-family: 'ysf-white';
/*這裏的路徑填入你的相對路徑即可*/
src: url('./ysf-white.ttf');
font-weight: normal;
font-style: normal;
}
.font {
/*引用字體*/
font-family: 'ysf-white';
}
項目中的字體文件
在 src/style/common.css 我們引入了字體文件
@font-face {
font-family: 'ysf-white';
src: url('../../static/font/ysf-white.ttf');
}
這個字體文件路徑是 static/font/ysf-white.ttf，此文件是壓縮後的文件
壓縮前的文件是 static/font/.font-spider/ysf-white.ttf
字體壓縮font-spider的使用
瞭解更多http://font-spider.org/
首先全局安裝:
npm install font-spider -g
原理：搜索當前頁面所有使用@font-face的字體，然後執行font-spider壓縮的時候，將字體包中沒用用到的文字全部排除，只留下要使用的部分文字已達到壓縮的目的。
修改或添加static/font/font.html中的文字
# 進入字體文件夾
cd static/font
# 把源文件拷貝並替換當前font目錄下的字體文件，並且刪除.font-spider
cp ./.font-spider/ysf-white.ttf ./ysf-white.ttf && rm -rf ./.font-spider
# 執行新的壓縮
font-spider ./font.html
壓縮完會發現，新的壓縮文件在static/font/ysf-white.ttf
源文件在static/font/.font-spider/ysf-white.ttf