在Web上校正子像素

Most typefaces fail on web after the design hits production. The browser loads your font and then makes its own rendering decisions, and those automatic decisions are almost always the wrong ones.

大多数字体在设计投入生产后，在 Web 端的表现都会不尽如人意。浏览器加载你的字体，然后做出自己的渲染决策，而这些自动决策几乎总是错误的。

By default, browsers use subpixel antialiasing. This makes text render heavier than intended, slightly blurry, and inconsistent with what you designed in Figma. But it is fixable with just four lines of CSS.

默认情况下，浏览器使用 subpixel 抗锯齿。这会使文本渲染得比预期更粗、略微模糊，并且与你在 Figma 中设计的效果不一致。但这只需四行 CSS 即可修复。

CSS

* {

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

}

Figma Lies

Figma 的谎言

The way a typeface renders on screen has nothing to do with which typeface you chose. It has to do with how the browser rasterizes the letterforms onto the pixel grid.

字体在屏幕上的渲染方式与你选择哪种字体无关。它取决于浏览器如何将字形光栅化到像素网格上。

The same font at the same size and weight can look noticeably different depending on the OS and display, because each platform has its own rendering pipeline and antialiasing method.

相同大小和字重的同一款字体，在不同的 OS 和显示器上看起来可能会有明显的差异，因为每个平台都有自己的渲染管线和抗锯齿方法。

Figma has none of this. It uses its own renderer which is consistent across every machine you open it on, which means what you see in the design file is not what ships.

Figma 完全没有这些问题。它使用自己的渲染器，在你打开它的每台机器上都保持一致，这意味着你在设计文件中看到的并不是最终交付的效果。

You can override these defaults in CSS, but most projects never do, so the font lands in whatever rendering pipeline the platform has set up and the output is whatever comes out.

你可以在 CSS 中覆盖这些默认设置，但大多数项目从不这么做，因此字体最终会落入平台设置的任何渲染管线中，输出的结果就是管线渲染出的样子。

Antialising OFF

抗锯齿关闭

Antialising ON

抗锯齿开启

Why It Exists

为何存在

Subpixel was a clever solution to a real problem. On low-DPI screens, each pixel is large enough to be visible, so rendering letterforms cleanly onto that grid requires some trickery.

Subpixel 是解决一个实际问题的巧妙方案。在 low-DPI 屏幕上，每个像素都大到足以被看见，因此要将字形清晰地渲染到该网格上需要一些技巧。

The browser would use the individual R...