微信小程序使用base64字体图标（生成字体图标+将字体图标转为base64格式）

小咪咪 2023-07-01 11:51 129阅读 0赞

问题：

1.微信小程序不能随意使用网络资源，如字体,css文件等

2.不能在小程序中使用字体文件

3.不能使用background-position背景图片定位来使用内部png图片

下面就介绍一下如何制作base64字体图标。

简易方式：

通过两个在线工具，很容易地生成base64加密的字体图标。

第一步：在线选择图标，生成字体及CSS文件

1.  浏览器打开：[https://icomoon.io/app/\#/select][https_icomoon.io_app_select]
2.  选择图标。觉得不够的话，在页面左下角点击"Add Icon From Library..."，添加字体库，可以选择免费的，常用的如FontAwsome字体。
    
    ![format_png][]
    
    choice.jpg

1.  选择好图标后，点击页面右下角“Generate Font” ->Download，下载字体文件包icomoon.zip

![format_png 1][]

generate.jpg

第二步：在线转换base64编码字体

1.  解压icomoon.zip
2.  浏览器打开：[https://transfonter.org/][https_transfonter.org]
    
    ![format_png 2][]
    
    transfonter.jpg
    
     
3.  点击“Add Fonts"按钮，上传解压文件夹中的字体文件：fonts/icomoon.ttf
4.  在下面选项中，将Family support，Base64 encode两项设置为On，Formats一栏可只勾选woff2(生成文件的字节数少)
5.  点击”Convert“按钮后，会在下面出现一个download链接，点击下载（transfonter.org-20180805-033630.zip）

第三步：合成小程序使用的 .wxss文件

1.  在小程序工程中新建图标字体样式文件，如common/icons.wxss
2.  打开第二步下载的文件包中的stylesheet.css，将**@font-face**内容拷贝到小程序的icons.wxss中
3.  打开第一步下载的文件包中的style.css，将**\[class^="icon-"\] 及以下**的内容拷贝到icons.wxss中

第四步：使用字体图标

在wxml文件中使用view标签或image标签，添加class为wxss文件中的类名即可，若需要改变图标字体大小可以通过font-size来改变：

后记：

有些字体图标显示不出来，是因为小程序内核（X5/NWjs/JavaScriptCore)对woff2识别不出来的原因。若出现这种情况，就在转换时的输出选项上再勾选woff，或只选woff试试。

DIY图标字体

主要是采用字体制作工具，如Fontforge等制作矢量字体文件，然后可以借助icomoon.io网站导入，后面的步骤就与前面描述的一样了。

[https_icomoon.io_app_select]: https://icomoon.io/app/#/select
[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMjkwNDAzMS0xYjA5NDYyNzg3ODBiNDkxLmpwZz9pbWFnZU1vZ3IyL2F1dG8tb3JpZW50L3N0cmlwfGltYWdlVmlldzIvMi93Lzc2OS9mb3JtYXQvd2VicA?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMjkwNDAzMS1kZjU5YmFmZWRlNWY1NTg4LmpwZz9pbWFnZU1vZ3IyL2F1dG8tb3JpZW50L3N0cmlwfGltYWdlVmlldzIvMi93Lzc3NC9mb3JtYXQvd2VicA?x-oss-process=image/format,png
[https_transfonter.org]: https://transfonter.org/
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMjkwNDAzMS1hNzZlMTU0Nzc4ODY2Yzg2LmpwZz9pbWFnZU1vZ3IyL2F1dG8tb3JpZW50L3N0cmlwfGltYWdlVmlldzIvMi93Lzc4Ni9mb3JtYXQvd2VicA?x-oss-process=image/format,png