html5字体统一解决方案

背景介绍：

因为项目有涂鸦同步的功能（例如在电脑上画一条直线需要把这条直线同步到各种端）所以需要保证h5内容区域在各种设备上都保持一致众所周知字体在不同设备平台上支持程度是不一样的那么首先需要了解的问题就是字体支持程度。

字体格式的支持程度：

一、TureTpe(.ttf)格式：

.ttf字体是Windows和Mac的最常见的字体，是一种RAW格式，因此他不为网站优化,支持这种字体的浏览器有:
【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】

二、OpenType(.otf)格式：

.otf字体被认为是一种原始的字体格式，其内置在TureType的基础上，所以也提供了更多的功能,支持这种字体的浏览器有:
【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】

三、Web Open Font Format(.woff)格式:

.woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离,支持这种字体的浏览器有: 【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】

四、Embedded Open Type(.eot)格式:

.eot字体是IE专用字体，可以从TrueType创建此格式字体,支持这种字体的浏览器有【IE4+】

五、SVG(.svg)格式:

.svg字体是基于SVG字体渲染的一种格式,支持这种字体的浏览器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】

解决方案：

在@font-face中我们需要以上五种格式的字体来达到更多种浏览版本的支持。笔者已知的字体工具转换网址：
1. https://transfonter.org/
2. https://www.fontsquirrel.com/tools/webfont-generator
优点：不依赖第三方。缺点：字体包资源很大。
利用webfont中文解决方案统一各种端的字体。

优点：动态生成所需字体包，字体资源占用很少。缺点：依赖第三方。

webfont：

目前国内存在的webfont解决方案：

有字库：有字库是全球第一中文 WebFont 服务平台。
阿里妈妈：阿里系的 WebFont 服务平台。
就是字：台湾一家繁体中文 WebFont 服务平台。
字蛛（FontSpider）：一款中文字体压缩器，让网页自由引入中文字体成为可能。希望未来有更多更好的中文 WebFont 解决方案。就是字台湾一家繁体中文 WebFont 服务平台。

参考资料:

https://transfonter.org/formats

转载于:https://juejin.im/post/5b0693366fb9a07abf72ebf9