前端自定义字体的使用

最近在开发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元素使用改字体，但是如果要发布项目，这个字体库需要把你的项目的服务器添加到白名单才能使用。这一类的在线字体库有很多，如果你要变的字体是英文也可以使用谷歌的webfont。
3、W3C css-font-loading机制，最终我使用的：https://drafts.csswg.org/css-font-loading/ ，w3C的一个关于css的font-face中自定义字体的加载情况检测，里面的原理还需要进一步学习，但是真的很好用，你可以先加载字体，然后再载入你的页面，然后使用上传到云的字体，前面可以加一个loading页面，因为在h5中我们还希望能将资源加载好，在进行下一步操作，避免出现因为不同浏览器加载速度不同，而出现的尴尬。