uni-app引入base64字体图标

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第23天，点击查看活动详情

uni-app中使用字体图标的方式有两种，一种是网络路径的字体图标，另一种就是base64格式的字体图标，当字体文字大于40kb时，需开发者自传成base64格式，特别是微信小程序中必须使用base64。本章介绍uniappbase64方式引入iconfont。

首先，准备两个网站：

1. www.iconfont.cn 阿里巴巴字体库
2. transfonter.org 在线转换字体

在阿里巴巴字体库中，选择自己想要的字体，添加到项目中，并下载到本地，如下图操作：

下载下来是个zip压缩包，解压之后出现下面几个文件：

接下来，将下载的字体文件转换成base64格式，打开 transfonter.org，点击按钮上传字体文件：

注意，这里我们只需要上传.ttf格式的字体文件，上传成功后，如下图所示，勾选Family support、Base64 encode和TTF，最后点击上方Convert按钮。

等待一小会，转换成功后，点击Download下载一个压缩包：

解压后，得到3个文件：

使用编辑器打开stylesheet.css，将全部代码复制。

stylesheet.css

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

打开原文件夹里iconfont.css，将复制内容并替换顶部前六行代码，如下图：

 @font-face {
   font-family: "iconfont"; /* Project id 3602296 */
   src: url('iconfont.woff2?t=1661088249888') format('woff2'),
        url('iconfont.woff?t=1661088249888') format('woff'),
        url('iconfont.ttf?t=1661088249888') format('truetype');
 }

在uni-app的static目录下新建子目录iconfont，将修改后iconfont.css和iconfont.ttf复制到此目录中，在需要使用字体图标的页面引入该css即可：

 <template>
     <view class="base">
         <view class="iconfont icon-User">
 ​
         </view>
     </view>
 </template>
 <style>
     @import url("@/static/iconfont/iconfont.css");
 ​
     .icon-User {
         font-size: 40px;
     }
 ​
     .base {
         width: 200px;
         height: 200px;
     }
 ​
 </style>