阿里巴巴 iconfont 字体转 base64 并引入使用

原创已于 2022-03-16 16:53:09 修改 · 4.3k 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #前端

于 2022-03-16 16:52:45 首次发布

微信小程序专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了如何将阿里云Iconfont的字体图标转换为base64格式，并在微信小程序中进行引用。首先，从官网下载所需图标，然后使用在线工具将.ttf文件转换为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>