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和内存一样，不必考虑其他同时运行的程序。而每个程序都是在一定的上下文中运行，这个上下文中包含了程序正确运行所需的状态。这里所说的状态包括程序的代码、数据、栈、通用寄存器的内容、程序计数器、环境变量及打开的文件描述符，等等。

- 阅读剩余部分 -

各位，如果你的职业是开挖掘机，你说要不要深入理解挖掘机？通常来说，深入理解你操纵的机器才能最终达到人机一体的境界。

当然，你可以说：不用，因为如果挖掘机不好使，我可以换一台。嗯，也有道理。不过，假如你同时又是一名前端开发者，那你要不要深入理解浏览器呢？注意，身为前端，你不太可能有机会因为浏览器不好使就强迫用户换一个你认为好使的。这时候，你好像别无选择了。

不过也不用害怕，今天我们的现代浏览器深度游会非常轻松、快乐。这首先必须感谢一位名叫Mariko Kosaka（小坂真子，https://kosamari.com/）的同行。她在Scripto工作，2018年9月在Google开发者网站上发表了“Inside look at modern web browser”系列文章。本文就是她那4篇文章的“集合版”。为什么搞这个“集合版”？因为她的4篇文章写得实在太好，更难得的是人家亲手绘制了一大堆生动的配图和动画，这让深入理解现代浏览器变得更加轻松愉快。

好了，言归正传。本文分4个部分，对应上述4篇文章（原文链接附后）。

• 架构：以Chrome为例，介绍现代浏览器的实现架构。
• 导航：从输入URL到获到HTML响应称为导航。
• 渲染：浏览器解析HTML、下载外部资源、计算样式并把网页绘制到屏幕上。
• 交互：用户输入事件的处理与优化。

先来个小小的序言。很多人在开发网站时，只关注怎么写自己的代码，关注怎么提升自己的开发效率。这些当然重要，但是写到一定的阶段，就应该停下来想想：浏览器到底会怎么运行你写的代码。如果你能多了解一些浏览器，然后对它好一点，那么就会更容易达成你提升用户体验的目标。

- 阅读剩余部分 -