微信小程序中使用.ttf字體


小程序內,不支持使用 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文件
繼續上面步驟


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM