CSS3 使用@font-face引入字体的兼容性方案及优化

引入第三方字体一定要注意字体版权问题

前言

承接上文web 端字体兼容性适配之后，好久没有总结 CSS3 引入字体 @font-face 相关的文章了。一是在掌握 @font-face 的基本使用要领后没遇过兼容性问题，二是觉得 @font-face 已经兼容 ie9+及现代浏览器了，兼容性问题基本可以忽略不计了。事与愿违的是，在多次实战中发现引入第三方字体会出现许多奇形怪状的问题，譬如字体文件的编码问题引发字体可以在桌面系统正常使用而在 Web 端不起作用、字体文件中英文或其他外语的字体行高差异问题、字体文件的等宽比在不同浏览器显示差异问题…现对web 端字体兼容性适配作补充，如果不妥请各位大佬抬手指正(#^.#)。

字体兼容性

字体编码兼容

前段时间有几个需要引入第三方字体的项目，引入过西文、韩文、泰文、以及种类繁多让你眼花缭乱的中文字体，可能是因为引入那种中文字体比较多的缘故吧，老觉得中文字体的兼容性可能会多些，其中编码兼容性像一座大山。

或许你会遇到过这样的情景，字体在 Photoshop 可以正常使用，放在 Web 端通过 @font-face 引入后字体显示不起作用。与相似的还有引入字体在 IE、Firefox 等浏览器正常使用，在 chrome 浏览器却显示编码报错不起作用如：OTS parsing error: cmap: Failed to serialize table的情况，或者完全因为字体编码格式不是被该浏览器所支持。

“工欲善其事必先利其器”，解决编码问题最直接的办法当然是将字体转码处理了。这里推荐两个字体转码工具：

• Webfont Generator
• cloudconvert Generator

只需将字体转化为需要的字体格式即可，另外推荐使用.ttf格式，用途下面有细讲。

字体优化

字体压缩

字体文件体积一般少则 2~4M，多则能达到 20~30M 之多，因此 直接 引入第三方字体尚且存在很大缺陷，尤其是在移动端使用。

当然开发者的智慧是无穷的，社区对此类问题也提供了字体压缩的解决方案。

常用字体压缩有：

• font-spider
• fontmin

上述字体压缩工具的核心是，通过抽离指定预设的字符串来生成新的字体文件，因为排除了大量不需要的字符串集，抽离后的字体文件体积大大变小，从而达到字体压缩的效果。

font-spider

使用font-spider已经有几年时间了，用着方便也是比较推荐使用的。

详细的使用方法可以查看font-spider 官网。

font-spider的主要用途是 将 .ttf 格式的字体文件根据需求预设 css 字体格式来生成字体文件。

特别注意的是，font-spider 只能将 .ttf 格式的字体文件转化为其他格式的字体文件。

fontmin

最近身边有同学也在使用 fontmin 来转化字体格式，因此也贴出来供大家参考食用。

详细的使用方法可以查看fontmin 官网。