平時使用阿里巴巴的iconfont字型需要下載字型到本地或通過網址引入字型才能使用，但有些情況可能不允許這麼做，例如小程式與平常web開發中引入字型圖示的方式不一樣，必須先轉為base64再引入，以下介紹iconfont字型轉base64並引入使用的方法

一、去官網 http://iconfont.cn 下載想要的圖示

1.將想要的圖示新增入庫

2.進入購物車下載程式碼

3.下載成功後，得到一個壓縮檔案，然後解壓得到這麼一堆檔案：

二、轉換 ttf 檔案為 base64

推薦去 https://transfonter.org 轉換

1.配置選項，將配置改為如下紅色框所示，並開啟 Base64 encode 選項：

2.配置完選項，新增ttf檔案（剛從阿里巴巴裡下載的資料夾裡）並開始轉換了

3.轉換成功後，會提供下載連結，點選下載

4.下載後，得到一個壓縮檔案，解壓後，會有一個stylesheet.css的css檔案，

5.該css檔案的字型地址就是使用base64的方式了

三、在小程式中使用

1.把該css檔案的程式碼複製到自己的專案裡

2.在阿里巴巴下載的css檔案裡，將除了@font-face之外的程式碼複製到自己專案裡

3.最後專案裡的css程式碼為：

@font-face {
font-family: 'iconfont';
src: url('data:font/ttf;charset=utf-8;base64,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') format('truetype');
font-weight: 500;
font-weight: normal;
font-style: normal;
}

.iconfont {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'iconfont' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: inherit;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.icon-tuige:before {
content: "\e61a";
}

.icon-riqiqishu:before {
content: "\e60e";
}
4.使用

<text class="iconfont icon-tuige"></text>
<text class="iconfont icon-riqiqishu"></text>
————————————————
版權宣告：本文為CSDN博主「朱昶偉」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處連結及本宣告。
原文連結：https://blog.csdn.net/VoidLuffy/article/details/123530341