完整回放|《网页字体初探》系列讲座第二期:网页字体排印基础

第二期:Web Typography 网页字体排印基础

内容概要: 字(Unicode)体(OpenType)排(CSS)印(屏幕显示);常用 OpenType 特性;可变字体与擦边球“图标字体”。

1 字:Unicode

  • 正确的编码:Unicode/GB18030
  • 多文种并存
  • 看得见与看不见的字符

电脑上的字都需要有编码,我们会遵循一定的编码标准。且现在的电脑字体涵盖了更多的语言,比如印度天城文等,从而更容易实现混排。其次是网页字体的代码中包含了更多元素,来实现更佳的排版效果(例如苹果网站以此实现了特定的两个单词间的不间断空格)。

2 体:WOFF2、OpenType

2.1 什么是 OpenType 特性

  • OpenType Layout feature: 版式特性
  • 字形替换(GUSB)与字形定位(GPOS)
  • 标签标记:四个小写字母

微软的 Typography 网页中列出了详细的 OpenType 特性规范,其中包括文本标签、语种标签、特性标签和基线标签。因此具体来说,OpenType 特性应该是版式特性(Layout Feature),为实现更好的排版效果而生。

具体而言,这一特性是在对字形进行替换,或是进行定位和挪动,来实现字体排印特殊的需求。每个特性都是一个标签,用四个小写字母进行标记,例如小型大写字母(smcp)。

由于 OpenType 特性丰富多样,所以大家在应用时首先可以查看字体厂商所提供的说明,以及自己查找特定特定的应用方式。

2.2 兼容性与成熟度

目前在 CSS 语句中调用特性的支持性已经非常好,目前几乎所有浏览器都能支持,涵盖桌面端和移动端。2022 年,美国 Web Almanac 统计表示,44% 的网页字体都会有 OpenType 特性,其中应用最多的是 Kerning。

上期讲到蒙纳旗下 Monotype Fonts 生成子集从而压缩字体包大小的功能,如果你进入到后台,也可以找到是否包含 OpenType 特性的选项,强烈推荐勾选这一选项。

2.3 使用 OpenType 特性

  • 特性太多、四字标签太难记,在应用时需多查多看
  • 默认行为与参数不统一
  • 确认浏览器支持与否、多做测试

3 排:CSS

3.1 内容与样式的分离

制作网页的基本原则是,内容与样式的分离。文章实际内容放在 HTML(超文本标记语言),而呈现样式则是利用 CSS(层叠样式表),互相搭配才能实现网页的最终效果。

3.2 与文字相关的 CSS

最重要的是 CSS Font 和 CSS Text,当然也有很多其他与文字相关的 CSS 的规范和属性。我们在网页字体排版时,常常会需要调整字体、字号、字重等基础要素,也需要实现两端对齐、标点悬挂、首字下沉、标点挤压等各种版式,都能够用 CSS 来实现,多了解具体代码的效用,来匹配我们的需求。

3.3 易读性的组成要素

所谓的易读性,可以被比喻为一个三角凳,需要同时平衡行长、行距、字号三个要素,三者互相关联缺一不可,无法单独地进行考虑。

4 印:设备与平台

现在企业和品牌的内容往往要分发到多个设备和平台,现在也很流行响应式设计,但这也对字体排版和渲染提出了新的挑战。例如蒙纳官网桌面端和手机端的设计就针对图片和文字的排版位置进行了控制,这些细节会直接影响到视觉效果。

5 网页字体排印的各种擦边球

5.1 表情符号

Emoji 遍布各个平台和设备,现在已经是 Unicode 标准了,所以长得像图,但实际上有文字编码。

5.2 图标字体

  • 便于与文字对齐位置
  • 全面使用字体机制(字重、颜色)
  • 节约空间、便于管理
  • 网页图标字体服务

6 我能做什么?

  • 了解需求、打好基础
  • 综合判断、妥协与最优
  • 限定环境设备、多测试