如何使文本呈现完美

如果在屏幕上看起来很丑,选择漂亮的字体是没用的。为了避免隐藏 - 或更糟 - 难以辨认的文本,您应该始终测试该字体是否适合您的访问者使用的设备。你可能会感到惊讶;大多数访问者可能没有使用您用于设计和开发的相同设备。事实上,绝大多数上网的人都在使用Android和Windows机器。

Worldwide operating system usage, according to StatCounter Global Stats (April 2017). Apple’s devices represent a small fraction of global usage, while Android and Windows dominate.

根据StatCounter Global Stats(2017年4月)的全球操作系统使用情况。 Apple的设备占全球使用量的一小部分,而Android和Windows占主导地位。

测试字体行为方式的最佳方法是在字体中设置示例文本,并在您定位的所有设备上进行尝试。不良渲染在薄重量上尤其明显。

例如,在macOS上呈现良好的字体在Windows上可能看起来很脆弱(见下图)。使用真实设备很重要,因为在线浏览器测试工具和虚拟机通常不准确(稍后会详细介绍)。

Jubilat Thin on Windows 7 (left) and macOS (right). Note that on macOS the text looks ‘heavier’ than on Windows 7.

Jubilat Thin在Windows 7(左)和macOS(右)上。请注意,在macOS上,文本看起来比在Windows 7上“更重”。

如果你还没有网站的内容(tsk!),请给Tim添加Web字体标本旋转。它将内容设置为多种文本大小和不同的背景颜色。它不是真正的内容的替代品,但它会在紧要关头。

有时你很幸运,你选择的字体是专门为屏幕设计的:Hoefler&Co的ScreenSmart,Monotype的eText和Font Bureau的Reading Edge是专门设计屏幕的系列的例子,应该看起来很漂亮。当然,无论字体的来源如何,都要仔细检查文本呈现。

但究竟为什么从一个浏览器到另一个浏览器的文本看起来不同?要回答这个问题,我们将不得不快速了解文本呈现的细节。

光栅化和抗锯齿

将字体轮廓转换为像素的过程称为光栅化。操作系统的文本呈现引擎将每个字符的轮廓(即形状)放置在像素网格上的所需字体大小上。接下来,它将中心位于轮廓内的所有像素着色(见下图)。

From Bézier curve to pixels. On the left is the outline of the character ‘a’. In the middle that outline is superimposed on a pixel grid; any pixel whose centre is inside the outline is turned on. On the right is the resulting rasterization.

从贝塞尔曲线到像素。左边是字符'a'的轮廓。在轮廓叠加在像素网格上的中间;任何中心位于轮廓内的像素都会打开。右边是结果光栅化。

在此示例中,无论像素中存在多少轮廓,像素都可以打开或关闭。这种数学上完美轮廓的近似称为混叠;抗锯齿试图减轻由有限的屏幕分辨率引起的粗糙的阶梯式外观。

抗锯齿背后的想法是弄清楚每个像素中有多少轮廓,并用灰度值表示。换句话说,如果轮廓覆盖了50%的像素,则它使用50%的黑色来为该像素着色。如果像素完全在轮廓内,则使用100%黑色,依此类推。这导致抗锯齿渲染,减少混叠(见下图)。您经常会看到用于描述此效果的术语“灰度抗锯齿”。

Antialiasing using greyscale values to represent the outline coverage of each pixel produces better results.

使用灰度值表示每个像素的轮廓覆盖率的抗锯齿产生更好的结果。

虽然抗锯齿提高了文本渲染的质量,但是使用子像素抗锯齿可以进一步改善结果。子像素抗锯齿利用屏幕的特性来提高光栅化文本的分辨率。显示器中的每个像素由三个椭圆形子像素组成:红色,绿色和蓝色(存在其他配置,但适用相同的原理)。操作系统可以单独控制这些子像素;子像素抗锯齿利用通过将覆盖计算应用于每个子像素(见下图)。

By targeting individual subpixels, subpixel antialiasing effectively increases the resolution of rendered text. The colours the naked eye perceives (left) are the result of setting individual coverage values for each subpixel (right); the subpixels for red, green, and blue combine to form a single perceptible colour.

通过定位单个子像素,子像素抗锯齿有效地提高了渲染文本的分辨率。肉眼感知的颜色(左)是为每个子像素设置单独的覆盖值的结果(右);红色,绿色和蓝色的子像素组合形成单个可感知的颜色。

当您开始使用较小的文本大小时,这些文本呈现选项之间的区别变得明显。没有抗锯齿,角色很快就会失去他们独特的轮廓。灰度抗锯齿使角色模糊但保持其形状。子像素抗锯齿渲染锐利的字符,但也在角色的边缘引入了一些颜色边缘。

抗锯齿技巧

您可以通过非标准更改抗锯齿设置-webkit-字体平滑-moz-OSX的字体平滑CSS属性。不幸的是,许多CSS框架和库都使用了抗锯齿灰阶使文本在macOS上显得更亮的值。但是,大多数开发人员和设计人员都没有意识到这会禁用子像素抗锯齿并使文本看起来更模糊,从而损害了易读性。

将其他人的首选文本渲染更改为不太清晰是非常不重要的。如果您必须使用较轻的文本,请使用较轻的重量而不是禁用子像素渲染。

文本呈现引擎

大多数操作系统使用自己专有的文本呈现引擎,而其他操作系统使用相同的开源引擎(尽管不一定使用相同的配置)。但是,它们都支持抗锯齿和亚像素抗锯齿,但在实现上略有不同。在许多操作系统中,抗锯齿方法的选择是用户可选择的。例如,在Windows上,子像素抗锯齿称为ClearType;在macOS上,它被称为LCD字体平滑。

目前有四种主要的文本渲染引擎:Windows上的图形设备接口(也称为GDI)和DirectWrite; macOS和iOS上的核心图形;以及Linux,Chrome OS和Android上的开源FreeType。

一般来说,浏览器将使用其运行的操作系统本机的文本呈现引擎。例如,Chrome在Windows上使用DirectWrite,在macOS上使用Core Graphics,在Android上使用FreeType。 Windows的独特之处在于它提供了两个文本呈现引擎:GDI和较新的DirectWrite。

所有现代浏览器都使用DirectWrite,因此您无需为一个例外而担心GDI保存:如果机器没有专用图形硬件,某些浏览器会依赖于劣质GDI渲染。在线浏览器测试工具和虚拟机通常没有专用的图形硬件,因此这些工具上的文本呈现不准确。

理想情况下,所有文本都使用子像素抗锯齿渲染,因为它创建了最清晰的文本。不幸的是,这并不总是可行的 - 例如,子像素抗锯齿通常在可以旋转的设备上禁用,例如平板电脑和手机。当您转动这些设备的屏幕时,子像素不再以光栅化器预期的图案排列,并且会导致子像素抗锯齿看起来很难看。

Further reading: from selection to optimisation, the Webfont Handbook shows you how webfonts can make the web a more visually diverse, efficient, and readable environment.

进一步阅读:从选择到优化,Webfont手册向您展示webfonts如何使Web更具视觉多样性,高效和可读性。

浏览器还会在类似情况下禁用子像素抗锯齿,例如在旋转或动画文本时。在这种情况下,栅格化文本不再匹配文本原始位置的子像素布局,需要再次进行栅格化。这是昂贵的,特别是对于动画而言,因此大多数浏览器都会依赖于灰度抗锯齿,它不会遇到同样的问题而且可以在任何方向上工作。

有些浏览器 - 例如macOS上的Chrome--也禁用了高分辨率屏幕上的子像素抗锯齿,以提供更一致的用户体验。其他浏览器仅在小文本上启用子像素抗锯齿,因为文本渲染中的微小变化在较大尺寸时不太明显。

还有其他一些浏览器禁用子像素抗锯齿的情况。浏览器用于选择抗锯齿方法的规则会不断更新为找到了新的角落案例和问题。这些频繁的更改使得很难跟踪文本呈现的内容。曾经使用亚像素抗锯齿的东西可能会在下一次浏览器更新时回退到灰度级。确定文本呈现方式的唯一方法是在实际设备上进行测试。

您可能习惯于在多个浏览器中测试您的网站。测试文本渲染会增加您需要进行多种测试的测试量。您不仅需要检查操作系统和浏览器的所有组合,还需要检查所有常见的文本呈现设置。

某些器件可能预先配置为使用灰度抗锯齿,而其他器件则使用灰度和子像素抗锯齿的混合。为了更加困难,不可能使用在线浏览器测试工具或虚拟机,因为文本呈现通常不同于真实设备。

测试时,请始终使用您的内容的代表性示例。模式库非常适合测试类型呈现,因为它包含大量的内容示例:标题,正文,标签,背景颜色和动画。通过在单个页面上显示您的内容示例,您可以快速检查样式和背景颜色的所有组合。

请注意在某些操作系统上不易读或显得薄的文本。如果发现问题,请在同一字体系列中更改为不同的权重,使文本更暗,或选择不同的字体。祝好运。

本文最初发布于net的第301期,这是世界上最畅销的网页设计师和开发者杂志。购买问题301要么订阅网

相关文章:



翻译字数超限