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里的名稱對應,名稱可以修改,只要對應就可以)
廢了半天的功夫,終於搞明白了,整理一下便於以后查閱,希望能給大家帶來幫助