中文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

原文地址:https://www.cnblogs.com/zhaoweikai/p/9842155.html