中文WebFont探索

本文主要讲中文webFont的相关知识，包含了业界现状、WebFont优势、实现方案等。

一 业界使用WebFont现状

1.1 英文WebFont使用现状

英文版已使用非常广泛。比较有名的字体库：GoogleFonts ：https://fonts.google.com/

1.2 中文WebFont使用现状

中文版字体库正在起步，目前各种图标使用已经很普遍了，例如华为云字体图标库。汉字库在部分大公司页面中有使用，效果还是很好的。例如：苹果、沃尔沃、汽车之家等。

案例1：苹果公司的pingfang字体，在window操作系统中没有集成，但是在windows中打开苹果中文官网，看到的字体效果还是一样，其使用的就是一套webfont字体。苹果官网地址：https://www.apple.com/cn/。

案例2：沃尔沃公司的中文官网用的是Volvo Sans Regular字体系列，实际也是webfont字体，是一套沃尔沃公司专门定制的webfonts。沃尔沃中文官网地址：https://www.volvocars.com/zh-cn。

注意：分析这两个网站webFont的实现方案，都是讲页面用的的中文字，全部转成对应的webFont，通过@fontFace功能实现。

二 业界中文字体库现状

2.1 目前中文字体库有不少，但只限于提供字体库，没有配套的web使用方法。例如：方正、汉仪。

2.2 目前做的比较好的webfont服务公司很少，其中有字库还不错，提供了字库服务：https://www.youziku.com/。

三 使用WebFont的好处

主要有三方面的好处：

3.1 视觉体验提升

好的webfont字体比目前使用的微软雅黑，在很多方面都有比较大的视觉提升。例如：思源（google和Adobe推出）、平黑等。

3.2 各个操作系统、PC端、移动端视觉体验一致性提升

使用webfont，可以确保mac、windows、Andorod等操作系统下字体显示效果都一致。而不是目前的：mac和ios手机是pingfang、widows是雅黑、Android手机是东青。

3.3 WebFont是业界趋势

英文版网站已大量采用WebFont；
苹果的移动端、PC端等字体都是统一的，体验效果很好；
好些大公司的网站都采用了WebFont。

四 使用中文WebFont需要解决的问题

需要解决两个核心问题：

4.1 中文字体库来源

有两种方式：使用已有的字体类型（方正、思源）；开发一套自己的字体库。

4.2 如何应用到页面中

中文字非常多（基础字库6000个），不可能一次性将所有字的源文件加载到页面中，只能是按需加载。这样又存在大量问题：如何实现按需加载、各个页面需要适配。

五 业界使用中文webFont的方案

主要有两种使用方案：

方案一： 手动将页面用到所有与汉字转换为webFont。

只适用于静态页面。工作量大，页面内容变更后需要手动补充新增汉字的webfont。

方案二：采用字体服务，动态实现汉字webFont化。

采用国内目前做的比较好的webFont的字体服务（https://www.youziku.com/）。

有三种使用场景和方式：

JS方式：解决静态页面场景，例如官网；

编辑器方式：解决表单提交等东西数据场景；

后端方式：解决后端大量数据场景。

参考资料&内容来源：

有字库：https://www.youziku.com/help/MF95ems.html

博客园：https://www.cnblogs.com/best/p/6132612.html

W3ctech：https://www.w3ctech.com/topic/669