小程序內,不支持使用 webfont 的 @font-face 引入本地的 ttf 等文件,這時候需要使用線上地址或者 base64。
第一步:
在阿里的iconfont中找到自己想要的字體加入購物車
http://iconfont.cn/

點擊下載代碼;解壓文件
正常使用方法是引用iconfont.css文
件就好了,但是在小程序里面無法引用 .ttf 文件

第二步:
通過
https://transfonter.org/ 將.ttf文件轉換為base64文件

1:點擊Add fonts 找到iconfont中下載解壓的文件中找到:iconfont.ttf
2:將 Base64 encode選中
3:選擇被轉換文件的格式
4:點擊Convert
完成之后出現下面Download 點擊下載,解壓就好了
解壓之后的文件如下圖:


三:在微信小程序中使用
可以在需要使用的文件中新建 fontAwesome.wxss文件
1、將轉換之后的stylesheet.css內容拷貝到fontAwesome.wxss文件中;
2、將第一步阿里下載的iconfont.css文件中的,除了下圖@font-face紅色區域的內容不要 其他的都內容都拷貝到fontAwesome.wxss文件中;

3、在需要使用的pages或者components中.wxss文件中引入新建的
@import '路徑/fontAwesome.wxss'文件,在wxml文件中使用對應的class就ok。
其他:將png或者jpg之類的圖片轉換為字體圖標
①jinaconvert.com 想將圖轉換為svg格式
②
https://icomoon.io/app/#/select 將svg轉換為ttf格式
③通過
https://transfonter.org/ 將.ttf文件轉換為base64文件
繼續上面步驟