项目中引入特殊字体【小程序、h5】包括canvas画图

请看清楚我虚线下面所有的话。

横线上的废话随便你看不看。

说实话这个字体已经把我折腾的死去活来了一段时间，而且我们项目还经常要画分享图去刷朋友圈，默认字体没办法达到设计的那种效果，查了不少资料，也自己摸索了半天，最后终于找到了救星。

废话不多说，其实并不难。

而且找到的这个有帮助的网站很多 免费 可以用的字体，如果没有特殊需求可以不需要花钱。

小程序和h5的页面展示特殊字体

有一个网站，叫 有字库 。

里面随便找到一个你满意的文字，或者可以上传你要的文字，不过有些字体会有版权问题不能用，你自己上传特殊的上面没有的字体也行。

emmmmmm……提醒一下，如果你要自己上传字体的话，最好开个会员，然后加他们的官方号问一下，不然审核时间…………有点久。

然后用css引入会比较方便，按步骤我们来走一遍。

我随便找了一个

这个字体不错

就这个了

点了立即使用然后进入下一个页面

点左边的这个css模式，会让你输入所有你需要的文字，不要有重复的哦～～～

生成！

不好意思打个码，按照上面的方法走就是了。

这就是直接再页面上显示文字的办法

这个在 h5和小程序 上面都可以使用的，非常方便。

接下来就是画图了。

h5的canvas画图引入特殊字体

当时也看了不少文章，直接把4m的字体放入项目也做过，放在服务器上然后css引入也试了，手机上看都没啥用。

真是哭干了我的黄河泪。

后来还是有字库当了我的救星。

里面免费的那些字体我感觉够我用了【够我用有个屁用我又不是设计】

接下来我们看方法

先丢出 文档

里面的意思就是，你先引入它的js，然后使用getFontFace的方法，注意！！！！

注意！！！！

画图一定要在

成功返回之后调用，然后字体使用 result.FontFamily 这个返回的字体名就可以了。

应该不需要代码示范了吧。

小程序canvas画图引入特殊字体

啊这个，其实最开始的时候挺恶心的，因为他引入特殊字体还偶尔会报错，【怪小程序去】

现在好像问题不大，首先

首先！！！！把字体存到你的服务器上，随便丢那里都好，给个网络地址就行。

注意一下，iOS 仅支持 https 格式文件地址，所以地址要https。

引入就是用小程序的引入字体方法啦。

同样还是跟之前一样，canvas的画图需要在success的方法里面进行，不然不能保证字体加载完成你就开始画图了。