微信小程序离线引入 iconfont 字体图标

MagnumHou

已于 2023-03-30 13:42:42 修改

阅读量1.1k

点赞数

文章标签：微信小程序前端小程序

于 2022-10-19 09:34:23 首次发布

本文链接：https://blog.csdn.net/qq_39335404/article/details/127382916

版权

由于微信小程序的限制问题，我们不会像 Web 项目那样引入阿里的字体图标库，通常采用在线生成链接的方式引入。

但阿里矢量图库在 2022年 6-7月份进行了网站维护，维护之后，不能“生成在线链接”引入到项目中了（但是现在又可以使用在线了，为了防止以后类似的事情发生，写了这篇文章）。

数字化管理平台
 Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus
权限系统-商城
 个人博客地址

一、生成在线链接的方式（维护后没有找到入口）

1.1 查看在线链接

在这里插入图片描述

注意：如果在项目中每次加入了新的图标，必须更新代码，重新生成外部样式链接
在这里插入图片描述

1.2 点击“下载至本地”按钮，得到字体包

在这里插入图片描述

打开项目中自定义的“iconfont.css”文件如下：
在这里插入图片描述

1.3 上面选中部分，替换为在线链接：

在这里插入图片描述

1.4 在 app.js 中引入，即可在 page 中使用：

在这里插入图片描述

1.5 在 wxml 文件中使用：

<view class="padding-20-0 m-t-100 bgc">
		    <view wx:if="{{safetyEmps.length}}">
		        <view wx:key="this" wx:for="{{safetyEmps}}" class="mrg-0-10 {{index !== 0 ? 'm-t-30' : ''}}">
		            <view class="font30 fontB padding20 colorfff" style="background-color: {{index % 2 == 0 ? '#0062D9' : '#5C75F2'}};">{{item.ename}}</view>
		            <view class="flex-wrap text-right space-around m-t-10">
		                <view class="w50p padding20 bgc border-box position-r  {{index % 2 == 0 ? 'item' : 'item2'}}">
		                    <view class="">今年计划投入<text class="font20">（万元）</text></view>
		                    <view class="fontB font36 m-l-15p m-t-10">{{fn.transInput(item.sumMoney)}}</view>
		                    <text class="iconfont icon-lvzhou_zongshu font70 theme-color posi-br"></text>
		                </view>
		                <view class="w50p padding20 bgc border-box position-r  {{index % 2 == 0 ? 'item' : 'item2'}}">
		                    <view class="">今年实际支出<text class="font20">（万元）</text></view>
		                    <view class="fontB font36 m-l-15p  m-t-10">{{fn.transInput(item.siOut)}}</view>
		                    <text class="iconfont icon-a-touruzhichu theme-color font70 posi-br"></text>
		                </view>
		                <view class="w50p m-t-10 padding20 bgc border-box position-r  {{index % 2 == 0 ? 'item' : 'item2'}}">
		                    <view class="">
		                        <view>上年安全生产费</view>
		                        <view>提取金额<text class="font20">（万元）</text></view>
		                    </view>
		                    <view class="fontB font36 theme-color m-l-15p  m-t-10">{{fn.transInput(item.snExtract)}}</view>
		                    <text class="iconfont icon-yiqianding font100 theme-color posi-br"></text>
		                </view>
		                <view class="w50p m-t-10 padding20 bgc border-box position-r  {{index % 2 == 0 ? 'item' : 'item2'}}">
		                    <view class="">
		                        <view>上年安全生产费</view>
		                        <view>余额<text class="font20">（万元）</text></view>
		                    </view>
		                    <view class="fontB font36 theme-color m-l-15p  m-t-10">{{fn.transInput(item.snBalance)}}</view>
		                    <text class="iconfont icon-qiandinghezuoxieyi font70 theme-color posi-br" style="bottom:24rpx;"></text>
		                </view>
		            </view>
		        </view>
		    </view>
		    <view class="text-center padding20 bgc" wx:else>
		        请选择企业
		    </view>
</view>

页面效果：
在这里插入图片描述

二、6-7 月份官网维护后，没有找到在线生成链接的入口。维护后是这样的：

在这里插入图片描述
这样就没有办法像之前那样在线生成链接引入微信小程序了，又不能像 Web 那样去引入字体，下面说一下微信小程序离线引入字体的处理。
由于微信小程序线上的资源限制了各种接口安全域名，所以在小程序里使用 iconfont 字体图标时，需要把平时的 iconfont 字体图标远程路径换成 base64 引入，就可以解决小程序引入iconfont字体图标这个问题了。
下载字体图标的过程和前面一样，就不再赘述。字体下载成功后，将得到一个名为“download.zip”的压缩包，解压后文件如下：
在这里插入图片描述

这里需要将 ttf 文件转为 base64 格式（关键）
推荐去 https://transfonter.org 进行格式转换，当然也可以通过其它方式转换。
配置：打开“ Base64 encode ” 选项，选择上传文件的格式“TTF格式”
在这里插入图片描述
点击 ”Add fonts“ 按钮，上传 ttf 文件，如下上传和上传完成的效果：

点击 ”Convert“ 按钮，进行格式转换，转换完成可下载和预览：

点击 ”Download“ 按钮下载得到一个名为 “transfonter.org”开头的字体压缩包，字体包内三个文件如下：
在这里插入图片描述
打开 ”stylesheet.css“ 文件，并复制里面的内容：

打开项目中自定义的 ”iconfont.css“ 文件，将下面 “@font-face”和 “.iconfont”中的代码，替换为上面复制的代码（注意这里替换的是两段代码）：

你以为这样就完事儿了吗，不还没有，还需要加一段代码才能正常使用，如下：

[class^="icon-"],
[class*=" icon-"] {
		    /* use !important to prevent issues with browser extensions that change fonts */
		    font-family: 'iconfont' !important;
		    font-style: normal;
		    font-weight: normal;
		    font-variant: normal;
		    text-transform: none;
		    line-height: 1;
		    /* Better Font Rendering =========== */
		    -webkit-font-smoothing: antialiased;
		    -moz-osx-font-smoothing: grayscale;
}

好了，到这里算是真正的处理完成。就可以正常的在 “app.wxss” 和 “page” 中引入和使用了！！同在线引入，不再赘述！！

关注公众号：前端知识分享喵，获取前端学习资料
在这里插入图片描述