转战微信小程序已经有段时间了，在这段时间里大大小小也参与了三四个小程序的开发，感慨挺多的，总结来说就四个字，坑不胜数，刚爬出一个坑又掉进另一个坑没尽头的感觉，怎么说呢？

有了解过微信小程序的朋友都应该知道，微信小程序其实说白了就是一个浏览器，一个基于webkit内核的浏览器，我们浏览特定的小程序其实就是在浏览特定的网页，但是问题是这个浏览器和同样基于webkit内核的其他浏览器比如chrome并不一样，他是一个内核被修改过的浏览器，而且你完全不知道到底修改了些什么？到底哪些功能被改掉了？在修改的过程中又留下了一些什么坑，当然本文并不旨在谈论这些坑和其解决方案，因为太多了，我会在后面的文章中一一道来，本文的重点是如何在小程序中使用外部字体。

其实对于一般的需求，系统预置的字体已经够用了，但是总归会有使用到外部字体的时候，在普通浏览器中我 们可以直接在css中导入本地字体或者一个网络字体，但是这种方式在微信小程序中并不适用（网络字体并不是不行不过会有诸多限制，而且中文字体一般都不小，请求很耗时的），那么我们如何导入外部字体呢？对于图片我们可以转换成base64，然后直接通过dataUrl来访问，那么对于字体我们是不是也能做同样的操作呢？答案当然是可以的，我们需要借助一个第三方网站。https://transfonter.org/

具体如何操作呢？

1、首先找到我们需要使用的字体文件包，格式的话TTF, WOFF, WOFF2， SVG随便哪一种都可以,但是大小不要超过10MB，如果文件大小超过10MB，我们也可以通过字蛛（font-spider）服务来压缩，具体使用方式这里不细说，可以去官网了解安装及使用方式，官网链接：http://font-spider.org/

2、打开我们上面提到的转换网站：https://transfonter.org/，界面是下面的样子，

记住已定要勾选base64哦，接着我们点击Add fonts添加字体文件，等到字体上传完毕后点击convert转换字体文件，转换完毕后点击Download下载资源文件压缩包，

压缩包包括了转换后的字体文件目录fonts, css，styles还有一个demo页，下载完毕后我们找到stylesheet.css文件

将所有内容复制到app.wxss中,接下来我们就可以在小程序中任意使用我们导入的外部字体了，另外此中方法也适用于阿里巴巴iconfont字体的导入哦，有兴趣的朋友不妨去试试。