字形如何变成像素：光栅化与抗锯齿
字体到底是什么讲到字形是一条贝塞尔轮廓就停了。但轮廓是连续的几何，屏幕是离散的像素网格——把轮廓填到网格上的这一步叫光栅化(rasterization)；为了不让斜边出现锯齿，边缘像素按覆盖率取中间灰阶，这叫抗锯齿(antialiasing)。浏览器默认用一种叫
subpixel antialiasing 的方式：它借每个像素内部的 R / G / B 三条子像素条，把横向分辨率撑到三倍——在低 DPI 屏上字更锐利，但代价是边缘出现彩色描边、整体偏重，和你在 Figma 里看到的不一致。用 -webkit-font-smoothing: antialiased /
-moz-osx-font-smoothing: grayscale 切到 grayscale antialiasing（整像素单一灰阶），在今天主流的高 DPI 屏上更轻、更干净、更接近设计稿。
这块网格是机制示意，不是 OS 光栅化器的精确实现：用超采样近似覆盖率，把每个设备像素放大成大方块，好让 subpixel 的彩边肉眼可辨。真机上彩边只有一个像素宽，通常要凑近或截图放大才看得见——这也正是下面「真实文字对照」在高 DPI 屏上差异很微妙的原因。
1 · 真实文字：把开关切给浏览器自己渲
上面是模拟，这里是真的：两栏文字唯一的差别就是 -webkit-font-smoothing 的取值，交给你当前的显示器与系统去渲染。差异取决于显示器和操作系统——在 macOS 上（尤其深色底）最明显，在某些屏幕上可能几乎看不出。
2 · 修法：全局四行，切到 grayscale
多数项目从不覆盖默认值，字就落进平台的渲染管线、出来什么算什么。把它显式切到 grayscale，设一次就不用再管（设在根上即可，纯绘制，不动 layout）：
* {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
3 · subpixel vs grayscale
| 维度 | subpixel-antialiased | antialiased(grayscale) |
|---|---|---|
| 原理 | 借像素内 R/G/B 子像素，横向分辨率 ×3 | 整像素一个灰阶 |
| 适合 | 低 DPI（像素大、子像素可见） | 高 DPI / Retina（今日主流） |
| 边缘 | 更锐，但带彩色描边 | 柔和、无彩边 |
| 视觉重量 | 偏重，离 Figma 更远 | 偏轻，更贴设计稿 |
| 深色底 | 彩边 / 加重最明显 | 保持清晰 |
| 平台 | Win = ClearType 默认且不可改；Mac 默认 | Mac 用两行 CSS 切换；Win 无效 |
| 影响 layout | 否（字宽 / 折行 / 间距不变） | 否 |
两个属性都带 -webkit- / -moz- 前缀——实质只在 macOS 生效。Windows 走自己的 ClearType，CSS 改不动，Windows 用户始终看到 subpixel。
细字重小字号要留心：切到 grayscale 会从字面上「卸掉重量」——这通常正是目的，但在 font-weight: 300 这类很细的字体、且 14px 以下时，可能让文字显得过淡、难读。经验法则：小字号不要低于 font-weight: 400，字号越小越往上加重量补偿。
顺带澄清几点：「antialiased」不等于「关掉抗锯齿」——文字始终是抗锯齿的，这个属性只切换方法(subpixel ↔ grayscale)，没有任何东西被关闭。字体格式(WOFF2 / OTF / TTF)只影响体积与加载，解码出的字形轮廓一致、渲染也一致，与本页无关。它也不改变 layout：字宽、折行、间距全部不变，变的只是每个字形如何与像素网格相接——详见 字体度量。
4 · 相关链接
- Correcting Subpixel on Web——santos.fyi · Marcos Santos。本页蓝本。为什么字在 web 上比 Figma 渲得重、subpixel 当年为何存在、为何在 Retina 上反成累赘，以及那一行修法与细字重小字号的注意点。
- font-smooth(-webkit-font-smoothing)· MDN——developer.mozilla.org。非标准但广泛实现的属性：auto / none / antialiased / subpixel-antialiased 与 -moz-osx-font-smoothing 的 grayscale，以及只在 macOS 生效的现实。
- Web Interface Guidelines——interfaces.rauno.me · Rauno Freiberg。原文作者最初的出处：一份实践细节清单，font-smoothing: antialiased 是其中一条「设一次受益全局」的默认值修正。
- ClearType Overview——learn.microsoft.com。Windows 自己的 subpixel 渲染技术：为什么它由系统统管、CSS 改不动，Windows 用户因此始终看到 subpixel。