背景
當一個項目對界面有要求的時候,uni-app中的圖標庫遠遠不及所需,倘若都使用靜態資源調用,對其大小顏色的控制又不太盡人意,最方便的就是更改uni-icons自定義字體的鏈接。記錄該過程方便以后查看。
知識儲備
- 【ttf文件】:一種字體文件表示方式,將字體輪廓轉換成曲線,可以對曲線進行填充,制成各種顏色和效果等,這也是為什么可以對圖標進行顏色和大小的更改。
- 【加載自定義字體】:通過Weex提供的DOM.addRule進行加載,以下是官方介紹:
步驟
- 將自定義的圖標上傳到【阿里字體圖標庫】,這里要以SVG格式上傳。不管是自制的圖標,還是借鑒的圖標,都需要將代碼下載下來,接下來將用到ttf文件
- 進入uni-app官方圖標界面,打開控制台Network模塊,過濾出字體的請求信息,點擊下載ttf文件
- 找一個在線字體編輯器(我用的是FontStore字體編輯器),打開uno-icons的ttf文件,上傳自定義的ttf文件,這時在圖標界面就能看見自定義的圖標,再將添加完畢的字體文件以ttf的格式下載出來
- 獲取下載的ttf文件,將項目中的文件替換掉,若以base64讀取,通過在線Base64解碼器和編碼器將文件編碼成base64碼后在進行替換,注意去掉base64碼的空格和換行(使用Notepad,很方便)
- 將【字體編輯器】上傳圖標的Unicode碼添加到項目中,以便調用