前端自定义字体的使用

最近在开发h5手机端的时候，需要使用自定字体去生成贺卡。

主要功能点是：1、在canvas中使用自定字体，并将这个cavans生成为图片。2、使用自定义字体的文字是用户自己输入的，不是固定的。3、h5需要适应不同手机的字体渲染速度。一开始，只是使用了css3的font-face标签，将本地的字体引入，定义一个字体，然后在cavans中直接使用，后来发现，canvas对自定义字体的渲染很不好，经常保存下来的图片还是默认字体。后来了解了几种办法，下面简单介绍：
1、font-spider，但是在安装后，才发现这个工具只能将html中固定不变的文字转换。因为这个工具的原理是从庞大的中文字体库中检索出你要用的文字的，然后重新生成一个字体文件，这样字体文件就会大大压缩，也就是能快速加载了。font-spider工具是基于nodejs 的需要安装nodejs ，再nodejs中安装font-spider为全局工具，如何安装在，我的另外一个文章中有，然后使用 font-spider xxx.html 来提取页面中的汉字，然后简化字体库，如果你是使用gulp构建的项目，也可以直接将font-spider加入要执行的任务中。
2、在线字体库，有字库https://www.youziku.com/，可以选择自己需要自己需要的字体，只需要引入一个js,然后使用方法就能让指定标签的html元素使用改字体，但是如果要发布项目，这个字体库需要把你的项目的服