uniapp關於ttf字體圖標使用的問題


uniapp關於ttf字體圖標使用的問題

一、使用流程:

  1、首先要有一個字體圖標文件(例如:uni.ttf),文件位置/static/uni.ttf,以及如何增加、編輯字體圖標;

  2、將uni.ttf文件轉成Base64(轉碼后的字符串不能包含回車換行等)

  3、修改/components/uni-icons/uni-icons.vue文件,將Base64碼寫入

  4、編輯/components/uni-icons/icons.js

  5、頁面引用

二、下面將每個流程詳細說明一下

  1、首先要有一個字體圖標文件(例如:uni.ttf),文件位置/static/uni.ttf,以及如何增加、編輯字體圖標;

  利用百度字體平台編輯(http://fontstore.baidu.com/static/editor/index.html),可以增加、編輯字體圖標

  增加字體圖標:

    1、字體平台首頁(http://fontstore.baidu.com/store#!/)找到想要的圖標,選中圖標后,點擊該圖標右上角“+”,加入到購物車,點擊購物車導出字體文件

    2、字體平台編輯(http://fontstore.baidu.com/static/editor/index.html),打開要編輯的圖標文件(uni.ttf),導入剛生成的字體文件

    3、編輯字體圖標:選中要編輯的字體圖標,點【設置代碼點】修改改字體的代碼點;點【字形信息】修改代碼點及名稱

    4、修改完成后,點【保存項目】,點【ttf導出】

  2、在線轉Base64(https://www.motobit.com/util/base64-decoder-encoder.asp)

    請自行百度

  3、修改/components/uni-icons/uni-icons.vue文件,將Base64碼寫入

    

  4、編輯/components/uni-icons/icons.js,按下圖格式寫入新增字體圖標

    

  5、頁面引用(紅色部分名稱要和icons.js里的名稱對應,名稱可以修改,只要對應就可以)

    

廢了半天的功夫,終於搞明白了,整理一下便於以后查閱,希望能給大家帶來幫助


免責聲明!

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



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