【 vue / uniapp 】定制自己的字体图标库,兼容 H5 / App / nvue

一、创建线上图标库:

 

登录阿里巴巴矢量图标库:https://www.iconfont.cn

创建项目,注意认真填写其中的 Font Family在引用字体图标时将使用这个名称。

然后,从网站上挑选合适的图标,逐个将其添加到项目中。

 

二、图标库转码

 

在图标库中,点击 下载至本地,得到一个压缩包文件。

解压缩后,主要使用其中的 iconfont.ttf 文件。

打开转码网:https://transfonter.org/,点击 ”Add fonts“按钮,选择那个 iconfont.tff 文件。

然后选中下图中的 “TTF" 复选框:

点击 “Convert” 按钮,转换完成,点击 “Download” ,将转换后的字体库压缩包下载到本地。

打开其中的 stylesheet.css 文件,我们只需要 src 属性中,url 括号里的大长串字符:

@font-face {
    font-family: 'myIcon';
    src: url(...括号内的字符...) format('truetype');
    font-weight: normal;
    font-style: normal;
}

至此为止,字体图标库的准备工作就完事了,重点就两个:

1、font family;2、url括号中的base64字符串。

 

三、创建图标库组件

 

参考DCloud官方的uniIcon组件:https://ext.dcloud.net.cn/plugin?id=28

将其导入到项目中,将其中的 font familybase64 编码串改成之前创建的值就大功告成了。

 

四、说明

 

在uniapp中,只能以 TTF 的方式引用才能成功显示图标

从阿里巴巴下载的压缩包中,有一个url是使用 woff2 的base64编码串,经过实测,使用这个串无法成功显示图标

只有 TTF 文件转换的串才可以成功显示。

 

posted @ 2020-02-29 22:51  网无忌  阅读(248)  评论(0编辑  收藏