标签：阿里巴巴 normal base64 iconfont css font 下载
平时使用阿里巴巴的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>
————————————————
版权声明：本文为CSDN博主「朱昶伟」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/VoidLuffy/article/details/123530341
标签：阿里巴巴,normal,base64,iconfont,css,font,下载 来源： https://www.cnblogs.com/mrt-yyy/p/16316620.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。