完整回放｜《网页字体初探》系列讲座第一期：什么是网页字体？

第一期：什么是“网页字体”？

内容概要：设备字体与网页字体；网页字体的优势；网页字体也有美中不足？

1 什么是网页字体

顾名思义，它是在网页上显示的字体。字体的重要性不必多言，平面设计往往就是图片和字体，因此字体对于企业形象和品牌识别非常关键，是一项重要资源。例如马自达汽车便是邀请蒙纳字体总监小林章先生定制了一款品牌字体，应用到数字网页、车机嵌入、印刷物料等多个渠道。

1.1 设备字体与网页字体

而关于设备字体和网页字体的区别，关键就是字体在哪里的问题。字体其实是一款电脑软件，如果安装在你的电脑、平板、手机等操作系统内，就是设备字体；而由于大家设备预装的字体往往不同，因此如果要在网页上统一显示某个字体，需要开发者在服务器上进行配置，而非依赖用户设备自有的字体，从而有了网页字体这一概念。

W3C 的 CSS 的字体模块第三等级在 2018 年已经成为推荐标准，非常扎实稳定。在这样一个规范里，可以用 @font-face 语句来调用网页字体。

1.2 WOFF 格式

字体到底是怎样一个格式呢？大家比较熟知的，也是我们设备上常见安装的 OpenType 格式；而网页字体有着专属的格式 WOFF2。二者的区别如下：

• 可靠的压缩：WOFF2 相当于把 OpenType 格式内含的信息进行了压缩，并在头尾补充了一些信息。
• 健全的授权：WOFF2 补充的其实就是授权信息，发布到网页的时候不能被下载至桌面使用，相对于 OpenType 更便于字体厂商规避字体文件被免费传播的情况。
• 普遍的兼容：WOFF2 的支持率很高，可以兼容几乎所有浏览器，非常成熟，可以放心使用。

2 网页字体的优势

2.1 外观：统一、可预见

网页字体能够让品牌在各个设备都能表达出一致、可预见的外观。由于设备和平台的差异，自适应的排版和布局可能会造成实际效果的差异，统一使用品牌专属的网页字体，便能够优化这一问题，使得设计可控。

2.2 告别图片：搜索引擎优化、高清易认

网页字体不必嵌入到图片中，字体成为了「活」的，由此可以复制粘贴、可以被语音朗读、有利于搜索引擎优化（SEO），也有利于灵活的响应式布局。例如 Monotype 蒙纳字库官网首页的 banner 便是利用了图文分开。

2.3 可及性

• 可感知：有替代文字能够进行语音朗读，帮助到视障人群；对比度、字号等。
• 可操作：能多种方式导航、聚焦等。
• 可理解：易认易读、可预测、错误预防等。
• 稳健：易于兼容、维护。

3 网页字体的挑战

3.1 访问很慢？

我们固有的印象是，由于 CJK 字体涵盖字符集很大，字体包文件大，因此应用于网页字体时读取、加载和显示的速度会受到影响。目前已经有了几种成熟的解决方案：

• 外部托管：利用字体厂商的服务器进行托管，直接嵌入 CSS 代码。
• 自主托管：生成 WOFF 文件，放在自己的服务器上。

蒙纳旗下的企业级字体管理平台 Monotype Fonts 也为以上两种方式提供了优化加载速度的方法：

• 直接生成 CSS 代码：利用外部托管技术，选择好字体后，可以在 Monotype Fonts 中直接生成嵌入代码。
• 启发式子集、字体包切分等技术：对于 CJK 这类较大的字符集，可以在 Monotype Fonts 生成更小的子集。
  • 利用「启发式子集」（heuristic subsetting）。虽然这个术语让人感觉陌生，但我们仍然可以用非技术的语言来解释：你可以通过 Monotype Fonts 挑选字体包中你需要用到的字符（而非完整字体包），以此来大幅缩小浏览网页时加载的字体包。
  • 字体包切分技术（font-slicing）。原始的字体包被切分成若干份「小包」（可以多达上百份）。网页访问者打开网页时，页面代码通过指令查询所需字体「小包」，减少加载时间。

3.2 授权复杂？

网页字体的授权可能会更为复杂，例如要根据 page views、按年付费等等，具体要咨询到字体厂商。Monotype 蒙纳字库目前推出的 Monotype Fonts 就是一个偏向于全家桶的方案，对于用户来说获取授权会更为方便。

3.3 我能做什么？

• 产业标准：确保需求、提供更多可能性
• 厂商：优秀的字体、清晰的授权
• 品牌经理：精准的策略、可靠的执行
• 设计师：掌握可用资源、发挥多样用途