动态

详情 返回 返回

關於前端壓縮字體的方法 - 动态 详情

我在編寫一個撰寫日常的網站,需要用到自定義字體,在網上找到一ttf的字體,發現體積很大,需要進行壓縮

如何壓縮

目前我們的字體是.ttf字體,其實我們需要把字體轉換成.woff字體

WOFF本質上是包含了基於SFNT的字體(如TrueType、OpenType或其他開放字體格式),且這些字體均經過WOFF的編碼工具壓縮,以便嵌入網頁中。[[3]](https://zh.wikipedia.org/wiki/Web%E9%96%8B%E6%94%BE%E5%AD%97%...)WOFF 1.0使用zlib壓縮,[[3]](https://zh.wikipedia.org/wiki/Web%E9%96%8B%E6%94%BE%E5%AD%97%...)文件大小一般比TTF小40%。[[11]](https://zh.wikipedia.org/wiki/Web%E9%96%8B%E6%94%BE%E5%AD%97%...)而WOFF 2.0使用Brotli壓縮,文件大小比上一版小30%

CloudConvert在線字體轉換

image.png

可以看下實際效果

image.png

20M 轉換為 9M 大小,效果還是很明顯

image.png

transfonter

這個網站https://transfonter.org/只接受轉換15M以下的字體

image.png

工具壓縮

先下載這個工具字體壓縮工具下載,這個工具是從Google的代碼編譯而來,是用Cygwin編譯的,Windows下可以使用

解壓出來後大概包含以下幾個文件

image.png

下載後打開,其中包括woff2_compress.exewoff2_decompress.exe,使用方法很簡單使用命令行:

woff2_compress myfont.ttf
woff2_decompress myfont.woff2

實測效果還不錯

image.png

user avatar Leesz 头像 pengxiaohei 头像 aqiongbei 头像 inslog 头像 Z-HarOld 头像 DingyLand 头像 it1042290135 头像 haixiudezhusun 头像 beckyyyy 头像 jmix 头像 johanazhu 头像 junxiudetuoba 头像
点赞 65 用户, 点赞了这篇动态!
点赞

Add a new 评论

Some HTML is okay.