微信小程序使用自定义字体 - iconfont

发布于 2021-07-07 16:24 阅读 1512

步骤

1、在iconfont网站获取iconfont.ttf字体文件

2、字体文件转化成base64格式 WX202107071603322x.png

下载后解压,得到stylesheet.css,将此文件里的代码复制到app.wxss

3、再次回到iconfont WX202107071614112x.png

点击图片中的css文件链接,将里面的除了@font-face部分,其他都复制到app.wxss,最终app.wxss文件内容如下

@font-face {
  font-family: 'iconfont';
  src: url('data:font/woff2;charset=utf-8;base64,d09GMgABA...') format('woff2'),
  url('data:font/woff;charset=utf-8;base64,d09GRgABAAAAA...') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 24px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-shou:before {
  content: "\e69b";
  color: #ff6400;
  margin-right: 10px;
}

.icon-ji:before {
  content: "\e600";
  color: #015CD7;
  margin-right: 10px;
}

使用

<text class="iconfont icon-ji"></text>

配合vant-weapp一起使用

<van-icon class-prefix="iconfont icon-ji" name="extra" />

广而告之,我的新作品《语音助手》上架Google Play了,欢迎下载体验