本文主要是介绍阿里巴巴 iconfont 字体转 base64 并引入使用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
平时使用阿里巴巴的iconfont字体需要下载字体到本地或通过网址引入字体才能使用，但有些情况可能不允许这么做，例如小程序与平常web开发中引入字体图标的方式不一样，必须先转为base64再引入，以下介绍iconfont字体转base64并引入使用的方法
一、去官网 http://iconfont.cn 下载想要的图标
1.将想要的图标添加入库
2.进入购物车下载代码
3.下载成功后，得到一个压缩文件，然后解压得到这么一堆文件：
二、转换 ttf 文件为 base64
推荐去 https://transfonter.org 转换
1.配置选项，将配置改为如下红色框所示，并打开 Base64 encode 选项：
2.配置完选项，添加ttf文件（刚从阿里巴巴里下载的文件夹里）并开始转换了
3.转换成功后，会提供下载链接，点击下载
4.下载后，得到一个压缩文件，解压后，会有一个stylesheet.css的css文件，
5.该css文件的字体地址就是使用base64的方式了
三、在小程序中使用
1.把该css文件的代码复制到自己的项目里
2.在阿里巴巴下载的css文件里，将除了@font-face之外的代码复制到自己项目里
3.最后项目里的css代码为：
@font-face {font-family: 'iconfont';src: url('data:font/ttf;charset=utf-8;base64,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') format('truetype');
font-weight: 500;font-weight: normal;font-style: normal;
}.iconfont {/* use !important to prevent issues with browser extensions that change fonts */font-family: 'iconfont' !important;speak: none;font-style: normal;font-weight: normal;font-variant: normal;text-transform: none;line-height: inherit;/* Better Font Rendering =========== */-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}.icon-tuige:before {content: "\e61a";
}.icon-riqiqishu:before {content: "\e60e";
}
4.使用
<text class="iconfont icon-tuige"></text> <text class="iconfont icon-riqiqishu"></text>
这篇关于阿里巴巴 iconfont 字体转 base64 并引入使用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
