由于微信小程序的限制问题,我们不会像 Web 项目那样引入阿里的字体图标库,通常采用在线生成链接的方式引入。
但阿里矢量图库在 6-7月份 进行了网站维护,维护之后,不能“生成在线链接”引入到项目中了(但是现在又可以使用在线了,为了防止以后类似的事情发生,写了这篇文章)。
一、生成在线链接的方式(维护后没有找到入口)
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 格式(关键)
推荐去 进行格式转换,当然也可以通过其它方式转换。
配置:打开“ Base64 encode ” 选项,选择上传文件的格式“TTF格式”
点击 ”Add fonts“ 按钮,上传 ttf 文件,如下上传和上传完成的效果:
点击 ”Convert“ 按钮,进行格式转换,转换完成可下载和预览:
点击 ”Download“ 按钮下载得到一个名为 “”开头的字体压缩包,字体包内三个文件如下:
打开 ”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” 中引入和使用了!!同在线引入,不再赘述!!
关注公众号:前端知识分享喵,获取前端学习资料