完美像素适配

教程
作者:Rainer Erich Scheichelbauer
en zh

8 一月 2013 发布日期: 19 十二月 2012

Preparing a webfont? Or an icon font that is to be used on the screen? If you can control the pixel size at which it is going to be displayed, this blogpost is for you.

字体由矢量构成,但是计算机屏幕上都是像素。字体显示在屏幕上时,矢量会被栅格化。其原理是,将矢量图形布置在像素网格上,完全落在矢量图形内部的像素将变为黑色,外部像素将保持白色,或者你设置的无论何种前景和背景色。轮廓上的像素会呈现灰色色阶,至少在应用了抗锯齿的情况下如此。渲染提示也会起到一定作用,但基本原理是一样的。

计算像素尺寸

现在,屏幕上的实际字体尺寸由 PPM(pixels per em,每全身字宽包含的像素数)决定。这个值,你猜怎么着,它表示每个全身字宽会占用多少个像素,咄。Glyphs 以 “单位” 测量各种尺寸,UPM(units per em,每全身字宽包含的单位数)值表示每个全身字宽是多少单位,咄 ×2。

所以如果我们想知道多少单位代表 1 像素,我们必须清楚字体会在屏幕上显示的字号,即 PPM,以及相应字体文件的分辨率,即 UPM。然后用 UPM 除以 PPM,我们就知道了每个像素的尺寸。就这么简单。如果结果不是个整数, 那么你可能要在 “字体信息”(Cmd-I)中调整 UPM

例 1:我们要以 20 屏幕像素的字号显示字体,因此 PPM=20。默认 UPM 值为 1000。现在回想:UPM÷PPM=1 像素的尺寸,所以屏幕上的一像素对应字符形中的 1000÷20=50 单位。

例 2:我们要以 16 屏幕像素的字号使用字体,因此 PPM = 16。默认 UPM 值还是 1000,所以我们算一下:1000÷16=62.5,咄。不是个好数。我们现在怎么做呢?别怕,首先来看一下什么数会更好。我建议让 62.5 变成 60,因为后者足够接近,也是个很好的整数。现在,打开你的 “字体信息”(Cmd-I)并将 UPM 值改为 60×16=960。

请确保这个数离原本的值 1000 不算太远。不同的应用程序应该会允许不同的 UPM。经验表明,从 UPM 3000 开始就会有危险了。

当我们在 “字体信息” 中时,你可能要进入 “其他设置” 并将 “网格间距” 和 “细分” 都设置为像素大小。

使用精确像素来绘制

这样,当你在 Glyphs 中绘制形状时,你会在背景看到一组网格,根据所设置的 PPM 指示实际的屏幕像素。如果你紧贴网格绘制,那么导出字体后,它在你选择的 PPM 及其各种倍数下都会是像素完美的。如果你绘制的 PPM=16,那么它在 32、48、64 和 80 PPM 的尺寸下看起来也会不错。

这是上述图标在 16 PPM 的效果:

当然了,在其他大部分字号下,它都不会是像素完美的。如果用户选择了非本机屏幕分辨率,或是使用了缩放,那么就看不到我们花费汗水和血泪制作的完美像素。所以,同一个图形在 21 PPM 是这样:

但是,由于我们不能强迫人们使用我们选择的矢量设置,像素完美就只能做的这种程度了。咄。

Retina 屏幕,谁想问吗?

随着 Apple 的 Retina 显示器等高分辨率屏幕的出现,针对屏幕显示进行优化的需求正在消失。 无论如何,你不需要对高清显示器进行进一步的优化。 对于台式机显示器,则不仅是高像素分辨率起作用。请记住,字体还会利用次像素渲染,会产生三倍增大水平分辨率的效果。咄 ×3!

但是这对我们而言意味着什么呢?是否注意过像素完美的 GIFs 或 PNG 在 Retina 屏幕上看上去如何?对,它们看上去发虚,是吧。你可以将它们替换为 SVG 或网页字体,免去像素化图标的需要,从而有效避免了为 Retina 和非 Retina 显示器制作不同的版本。另外,如果你的网站上用了很多图标,那么网页字体可以节省大量带宽。一箭双雕,击掌!


19-12-2012 更新:修正了一些录入错误,并将 “在其他任何字号下” 改为 “在其他大部分字号下”。

Chinese translation by Willie Liu (刘育黎) from 3type (三言).