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-ligatures、font-variant-postion、font-variant-caps、font-variant-numeric、font-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-family、font-style、font-variant、font-weight、font-size和font。其算法要求UA(User Agent，用户代理)对给定元素中的字符逐个查找匹配的CSS属性，首先尝试匹配font-style，比如italic和oblique。然后匹配font-variant，normal匹配非small-caps(小型大写)字体，而small-caps则匹配(1)标识为small-caps的字体(2)合成小型大写字母的字体(3)将小写字母替换为大写字母的字体(小型大写字母可以通过将normal字体的大写字母缩小来实现)。接着匹配font-weight和font-size，这两个属性都是必须匹配成功的。

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

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

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

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

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

- 阅读剩余部分 -

本文通过分析一个小案例帮大家从一个侧面理解JavaScript的异步执行机制，从而可以在实践中避免类似的尴尬。

小背景

我们都知道，alert这种内置弹框会阻塞后续代码执行：

之所以如此，就是因为JavaScript代码在浏览器中是单线程执行的。换句话说，浏览器中只有一个主线程负责运行所有JavaScript代码（不考虑Web Worker）。

提到浏览器中的JavaScript，基本上只有三个来源：

• BOM API的代码，让我们可以操作并利用浏览器提供的能力
• DOM API的代码，让我们可以操作网页内容
• 我们自己写的ECMAScript代码

这没什么。我们也知道，setTimeout用于“定时”执行代码，比如这样可以定时在3秒钟之后执行一段代码（函数）：

setTimeout(delayCode, 3000)

- 阅读剩余部分 -

提到环境变量，我们都知道PATH中包含着常用可执行文件的路径，有了它在命令行程序中直接输入文件名就可以运行程序。在Node.js环境中，我们也经常使用process.env.NODE_ENV来区分开发和线上环境，比如在开发环境下可以打印日志、不压缩资源，以方便调试。

但是，除了这些，你对环境变量还知道多少？本文将带领大家全面了解一下环境变量。

一点背景

我们现在使用的环境变量是在1979年Version 7 Unix中成型的，此后所有Unix系统包括Linux和macOS都实现了同样的特性。1982年，从PC DOS 2.0起，所有Windows操作系统也包含了环境变量，只是语法、用法和标准变量名有所差异。

环境变量是与进程紧密相关的一个特性。进程是什么？通俗地理解，进程就是“进行中的程序”，书面说法则是“运行中程序的一个实例”。意思其实都一样。之所以要抽象出进程这个概念，部分原因是为了隐藏使用CPU和内存资源的复杂度。有了进程的概念，一个程序在运行时就好像可以占有全部CPU和内存一样，不必考虑其他同时运行的程序。而每个程序都是在一定的上下文中运行，这个上下文中包含了程序正确运行所需的状态。这里所说的状态包括程序的代码、数据、栈、通用寄存器的内容、程序计数器、环境变量及打开的文件描述符，等等。

- 阅读剩余部分 -