某些特定情況下,設(shè)計(jì)師為了頁面美觀,會選擇一些特定的字體,由于系統(tǒng)的支持程度不同,前端需要引入字體包,才能讓效果百分百呈現(xiàn)。但如果設(shè)計(jì)提供的字體包太大,又沒有通過工具將字體包提取成一個(gè)只有幾個(gè)字的新字體包給前端的話,字體包會非常大,嚴(yán)重影響頁面加載性能,做了以下嘗試后,成功將一個(gè)8MB的字體包變成了8KB,與大家分享:
前期準(zhǔn)備:
1、mac 或 linux 、Java環(huán)境(Java下載地址)
(下載成功后打開命令窗口輸入:java -version,出現(xiàn)版本號表示安裝成功)
2、新建一個(gè)文件夾myFontsTool,等待存放字體相關(guān)內(nèi)容
3、download此jar包(jar包地址)放到myFontsTool文件夾里
4、將準(zhǔn)備提取的字體包(.ttf后綴的)放到myFontsTool文件夾里
5、新建text.txt(里面寫上你要單獨(dú)生成的內(nèi)容),同樣將text.txt放到myFontsTool文件夾里
開始生成:
1、打開命令窗口,進(jìn)入myFontsTool文件夾,輸入命令:
java -jar sfnttool.jar -s text.txt font.ttf fontc.ttf
text.txt ------ 存放需要提取的文字
font.ttf ------ 原字體文件名
fontc.ttf ------ 提取后的字體文件名
2、好啦,新字體包fontc.ttf已經(jīng)生成在myFontsTool里啦,你可以在項(xiàng)目中引用啦:
@font-face{
font-family:'fontc';/*字體名稱*/
src:url('fontc.ttf');/*字體源文件*/
}
備注:自己在運(yùn)用的過程中,偶爾遇到字體包后綴為.OTF的,通常我會在網(wǎng)上搜一下在線.OTF轉(zhuǎn).ttf,在線轉(zhuǎn)成.ttf的字體包,再運(yùn)用以上方法提?。?/p>