問(wèn)題：
1.微信小程序不能隨意使用網(wǎng)絡(luò)資源，如字體,css文件等
2.不能在小程序中使用字體文件
3.不能使用background-position背景圖片定位來(lái)使用內(nèi)部png圖片
下面就介紹一下如何制作base64字體圖標(biāo)绒净。
簡(jiǎn)易方式：
通過(guò)兩個(gè)在線工具兄墅，很容易地生成base64加密的字體圖標(biāo)。
第一步：在線選擇圖標(biāo)诈泼，生成字體及CSS文件
瀏覽器打開(kāi)：https://icomoon.io/app/#/select
-
選擇圖標(biāo)。覺(jué)得不夠的話，在頁(yè)面左下角點(diǎn)擊"Add Icon From Library..."摧扇，添加字體庫(kù)，可以選擇免費(fèi)的挚歧，常用的如FontAwsome字體扛稽。
choice.jpg
- 選擇好圖標(biāo)后，點(diǎn)擊頁(yè)面右下角“Generate Font” ->Download滑负，下載字體文件包icomoon.zip
第二步：在線轉(zhuǎn)換base64編碼字體
解壓icomoon.zip
-
瀏覽器打開(kāi)：https://transfonter.org/
transfonter.jpg 點(diǎn)擊“Add Fonts"按鈕在张，上傳解壓文件夾中的字體文件：fonts/icomoon.ttf
在下面選項(xiàng)中，將Family support橙困，Base64 encode兩項(xiàng)設(shè)置為On瞧掺，F(xiàn)ormats一欄可只勾選woff2(生成文件的字節(jié)數(shù)少)
點(diǎn)擊”Convert“按鈕后，會(huì)在下面出現(xiàn)一個(gè)download鏈接凡傅，點(diǎn)擊下載（transfonter.org-20180805-033630.zip）
第三步：合成小程序使用的 .wxss文件
在小程序工程中新建圖標(biāo)字體樣式文件辟狈，如common/icons.wxss
打開(kāi)第二步下載的文件包中的stylesheet.css，將@font-face內(nèi)容拷貝到小程序的icons.wxss中
打開(kāi)第一步下載的文件包中的style.css夏跷，將[class^="icon-"] 及以下的內(nèi)容拷貝到icons.wxss中
第四步：使用字體圖標(biāo)
在wxml文件中使用view標(biāo)簽或image標(biāo)簽哼转，添加class為wxss文件中的類名即可，若需要改變圖標(biāo)字體大小可以通過(guò)font-size來(lái)改變：
<view class='icon-search' style='font-size:64rpx'></view>
后記：
有些字體圖標(biāo)顯示不出來(lái)槽华，是因?yàn)樾〕绦騼?nèi)核（X5/NWjs/JavaScriptCore)對(duì)woff2識(shí)別不出來(lái)的原因壹蔓。若出現(xiàn)這種情況，就在轉(zhuǎn)換時(shí)的輸出選項(xiàng)上再勾選woff猫态，或只選woff試試佣蓉。
DIY圖標(biāo)字體
主要是采用字體制作工具，如Fontforge等制作矢量字體文件亲雪，然后可以借助icomoon.io網(wǎng)站導(dǎo)入勇凭，后面的步驟就與前面描述的一樣了。
