背景
在一個項目中，一定要用到某種字體，但是這個字體下下來有10.55MB，這顯然是不行的。
字體壓縮的原理就是你要使用的字符單獨拿出來，不用的就不包含，這樣就可以使得字體文件更小。
一 ：字蛛是一個中文字體壓縮器
字蛛傳送門
先安裝好 NodeJS，然后執行
npm install font-spider -g
新建文件夾：
index.css內容
/*聲明 WebFont*/ @font-face { font-family: 'test'; src: url('./KaiGenGothicSC-Normal.ttf'); font-weight: normal; font-style: normal; } /*使用選擇器指定字體*/ .test { font-family: 'test'; }
index.html內容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" type="text/css" href="./index.css" /> </head> <body> <div class="test"> 日期 攝像頭 </div> </body> </html>
執行命令：
font-spider index.html
限制
- 不支持 javascript 動態插入的元素與樣式
- .otf 字體需要轉換成 .ttf 格式才能被壓縮（免費 ttf 字體資源）
- 僅支持
utf-8編碼的 HTML 與 CSS 文件 - CSS
content僅支持content: 'prefix'和content: attr(value)這兩種形式