某些特定情況下檀葛,設(shè)計師為了頁面美觀,會選擇一些特定的字體蔫敲,由于系統(tǒng)的支持程度不同饲嗽,前端需要引入字體包,才能讓效果百分百呈現(xiàn)奈嘿。但如果設(shè)計提供的字體包太大貌虾,又沒有通過工具將字體包提取成一個只有幾個字的新字體包給前端的話,字體包會非常大裙犹,嚴(yán)重影響頁面加載性能尽狠,做了以下嘗試后衔憨,成功將一個8MB的字體包變成了8KB,與大家分享:
前期準(zhǔn)備:
1袄膏、mac 或 linux 践图、Java環(huán)境(Java下載地址)
(下載成功后打開命令窗口輸入:java -version,出現(xiàn)版本號表示安裝成功)
2沉馆、新建一個文件夾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)用以上方法提日艚 ;