小程序引入字体包和图标

小程序无法直接引入本地字体包使用，需要使用在线链接或者转成base64格式，不论是字体包我们直接使用https://transfonter.org/ (opens new window) 网站来把字体包转成base64格式使用。

我们打开字体包或iconfont的包，可以看到里面都有多种字体文件包，iconfont其实也是一种字体包，字体包里面有.ttf格式文件，我们就需要这个文件就可以了，然后打开网站将其转成base64。

点击上传ttf文件

上传好后点击Convert进行转换，然后点击Download下载，这样ttf字体包就被转成base64格式了。

打开转换后的文件，打开stylesheet.css可以看到里面是一个@font-face引入的字体不再是字体包，而是引入的base64。

我们直接把这个stylesheet.css文件引入到我们的项目中，把css改成wxss，原来的字体包都不需要了，只引入这个stylesheet.css就可以了。

在app.wxss中全局引入，然后直接使用字体。

上面是普通字体包使用方式，iconfont在压缩好后使用会有点区别，iconfont需要使用它class类名才行，所以在压缩好后复制stylesheet.css文件的全部代码，把下面iconfont.wxss中的代码替换掉。

替换后还需在iconfont.wxss中加上下面代码，然后在app.wxss中引入就可以全局使用了。

[class^="icon-"],
[class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'iconfont' !important;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

使用直接添加class类名就可以了，样式可以直接设置。

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