2019年9月

OpenType是TrueType的扩展。本文全流程介绍TrueType从字体设计到字体显示的每个步骤,这些步骤同样也适用于OpenType。

TrueType字体可能诞生于纸上,也可能从其他格式转换而来。但最终,字体文件中一定包含每个字形的描述信息。下图展示了从设计稿原件到数字化字形,再到字体文件中数字化轮廓的过程。

图1 设计稿原件、数字化字形、字体文件中以FUnit坐标表示的数字化轮廓

那么TrueType字体是如何在显示设备(屏幕、打印机)上应用的呢?

首先,要将字体文件中存储的轮廓缩放到要求的尺寸,即将字体文件中以FUnit(Font Uint,字体单位)表示的原始轮廓转换为特定于设备的像素坐标。

然后,解释器运行与字形关联的指令,运行指令的结果是完成字形的网格适配(grid-fit)。完成网格适配,再由扫描转换程序生成最张在目标设备上呈现的位图图像。

图2 字体渲染流程

  1. 在TrueType字体文件中以FUnit坐标形式描述字形的轮廓
  2. 缩放程序将FUnit转换为像素坐标,并缩放至应用程序要求的大小
  3. 轮廓缩放至新网格
  4. 缩放后以像素坐标表示的轮廓
  5. 解释程序执行与字形B关联的指令,进行网格适配
  6. 网格适配后的轮廓
  7. 网格适配后的轮廓
  8. 扫描转换器决定打开哪些像素
  9. 在目标设备上渲染位置

- 阅读剩余部分 -

CSS Font Module Level 3(本文以下简称“ML3”)新增了字体特性(Font Feature)属性,用于扩展font-variant,以支持丰富OpenType字体特性,如连字。

我们知道,字体文件中包含着从Unicode码点到字形的映射。在给简单的拉丁文本应用字体时,就是根据字体文件中的映射表逐个把对应的字形找到并显示出来。而OpenType和AAT(Apple Advanced Typography)等字体标准支持更复杂的处理模式。比如,给定字符的字形不仅可以根据码点来选择和定位,也可以根据相邻字符或者语言、文字以及文本本身启用的特性来选择和定位。

风格性的字体特性分两类:影响与周围字符关系的和影响字形选择的。前者比如字距调整(kerning)和连字(ligature)相关的特性,后者比如小型大写字母(small-caps)、上/下标(superscript/subscript)及替代(alternate)特性。

为了支持这些字体特性,ML3扩展了font-variant,基于它增加了很多子属性用于控制相应的字体特性,比如font-variant-ligaturesfont-variant-postionfont-variant-capsfont-variant-numericfont-variant-east-asian。而font-variant则变成了一个涵盖所有这些属性的简写属性,类似font那样。不过,以上这些子属性只会影响字形选择与定位,不影响字体选择。

因为这些字体特性都与风格有关,所以字体特性的英文也叫stylistic font features。这个意义上,unstyled text就不是"未应用样式文本",而是"未启用风格化字体特性的文本"。

font-kerning

用于根据字体文件中的数据来调整字形间距。auto表示由UA决定,normal表示应用字体文件中的数据,none表示不应用。

对于不包含相关数据的字体,这个属性没有影响。OpenType标准建议默认启用间距调整,即应用OpenType的kern特性(对于垂直文本则是vkrn)。如果同时定义了letter-spacing属性,则字体内置的间距作为默认值,在此基础上再进行调整。

- 阅读剩余部分 -

本文是阅读CSS标准文档的笔记,也是对CSS字体相关知识的一个梳理。

Cascading Style Sheets, level 1

CSS 1定义的字体属性包括:font-familyfont-stylefont-variantfont-weightfont-sizefont。其算法要求UA(User Agent,用户代理)对给定元素中的字符逐个查找匹配的CSS属性,首先尝试匹配font-style,比如italicoblique。然后匹配font-variantnormal匹配非small-caps(小型大写)字体,而small-caps则匹配(1)标识为small-caps的字体(2)合成小型大写字母的字体(3)将小写字母替换为大写字母的字体(小型大写字母可以通过将normal字体的大写字母缩小来实现)。接着匹配font-weightfont-size,这两个属性都是必须匹配成功的。

font-family是一个按照优先级排列的字体或通用字体名字的列表,每个名字以逗号分隔,表示多选一。

body { font-family: gill, helvetica, sans-serif; }

有两种值:字体名和通用字体名。在上面的例子中,gillhelvetica就是明确指定的字体名,而sans-serif则是通用字体名。CSS 1定义了5种通用字体:

  • serif:衬线
  • sans-serif:非衬线
  • cursive:手写
  • fantasy:装饰
  • monospace:等宽

通常,除了指定特定的字体名,最后都应该指定一个通用字体名。另外,如果字体名包含空格,必须用引号括起来。

- 阅读剩余部分 -