由于微信小程序不方便直接使用外部字體庫(kù)(目前看來(lái)是這樣)瘫筐,普遍的做法旱眯,是使用transfonter耕魄,將外部字體画恰,轉(zhuǎn)化成base64格式,然后在wxss中引入該font-face吸奴。大致流程梳理成以下兩點(diǎn):
1.使用transfonter(https://transfonter.org/#)允扇,將字體文件上傳缠局。
2.參數(shù)選填好后,convert一下考润。
3.download下jar包
4.將jar包解壓狭园,將css文件中的font-face拷貝到微信小程序頁(yè)面的wxss文件中
這里遇到一個(gè)問(wèn)題糊治,一般外部的字體庫(kù)妙啃,一般都很大,大多超過(guò)10M俊戳,這個(gè)首先不符合微信的要求揖赴,其次,文件過(guò)大抑胎,導(dǎo)出的font-face的src字段值也會(huì)很大燥滑。將該font-face內(nèi)容拷貝到wxss中,會(huì)導(dǎo)致文件過(guò)大阿逃,wxss報(bào)錯(cuò)铭拧。
寫(xiě)到這里,解決方案恃锉,只能使用自定義字體搀菩,用到哪些字,就生成哪些破托,這樣就可以控制字體庫(kù)的大小了
fontCreator解決了該問(wèn)題肪跋。
首先我們來(lái)熟悉下fontCreator的簡(jiǎn)單操作
首先我們創(chuàng)建一個(gè)字體文件file----->new font project
然后我們通過(guò)file------>Open Install font,打開(kāi)一個(gè)現(xiàn)有的字體庫(kù)
在主面板上就可以看到打開(kāi)的幼圓字體了
然后我們點(diǎn)擊新建字符按鈕,比如說(shuō)我們要添加一個(gè)中文字符“白”土砂。
選擇ok州既,就會(huì)發(fā)現(xiàn)字體文件上多了一個(gè)$767D編號(hào)的字符了。
在幼圓字體中萝映,使用ctrl+f找到‘白’這個(gè)字符吴叶,右鍵copy,選中剛剛新建的$767D的字符序臂,右鍵粘貼蚌卤。就可以看到添加成功了
然后通過(guò)export導(dǎo)出成ttf文件,再將ttf文件轉(zhuǎn)化成base64格式等操作奥秆,我就不詳細(xì)贅述了逊彭。