反抗锯齿

或者,在Mac Os X Web浏览器中,您希望听到的关于抗锯齿的方式比您想要的更多

让我们澄清几点关于上周的“抗锯齿“文章(Note: this article isn’t going to make much sense if you haven’t yet read that one.) Last week I relied solely on the term “anti-aliasing” to describe the problem of Safari’s rendering of small-point monospaced fonts这不是很准确,我需要在继续之前澄清这一点。

消除锯齿类型使用渐变色调来有效地平滑字体例如,当在白色背景上显示黑色文本时,反锯齿使用多种灰色阴影,而不是仅使用黑白像素。你可以很容易地看到这种效果在Mac OS X上使用小精灵,从苹果的应用程序,可以让你放大个人屏幕上的像素(Pixie是开发人员工具的一部分,并已安装在/开发/应用/。)

例如,这是18点ProFont中的数字“8”,由Safari进行抗锯齿渲染:
反锯齿“8”的屏幕截图。

这是相同字体中的相同字符,没有Camino的抗锯齿渲染:
非抗锯齿“8”的屏幕截图

我上周的抱怨是Safari反对小型等宽字体,如9点和10点摩纳哥这是事实,但有点误导抗锯齿是一种影响的问题,而不是原因在批判性思维中,将原因与效果分开是至关重要的。

原因问题是Safari在所有情况下都喜欢使用位图字体的轮廓字体大多数Mac OS X应用程序而不是喜欢一个位图字体,如果可用,一点小的等宽字体因此,在继续之前,我们需要了解位图和轮廓字体的区别。

位图和轮廓字体

位图字体只是像素在原始Macintosh上,位图字体是唯一可用的字体,对于任何给定的点大小,您需要为该精确大小创建特定的位图字体在Mac上,位图字体系列通常收集在一个手提箱文件中例如,您的“时代”行李箱中可能有四种尺寸:时间9,时间12,时间18和时间24您可以使用这四种尺寸中的任何一种,并且看起来很棒每个字体大小的字体设计,由像素的像素想象创建自己的字体在Photoshop中,创建一个单独的图像每一个字母,每一个的大小这几乎就是位图字体。

但这意味着其他大小,所需的计算机生成的字形从实际存在的最亲密的大小比例例如,考虑到Times的上述大小,如果你要求Times 48,那么Mac会使用Times 24并且每个像素的大小加倍结果是锯齿状,原始的Times 24字形中的每个单个正方形像素在插值的Times 48输出中转换为笨拙的4像素正方形或者,如果你想要的8倍,Mac需要乘以9,使猜测哪些像素可以删除结果通常难以辨认。

因此,在大多数情况下,在Macintosh的旧时代,您通常将自己限制在系统上安装的位图字体的特定大小,很少指定与安装的位图字体不对应的任意字体大小位图字体本质上是低分辨率的,专为大约72 DPI原始Macintosh显示器而设计这听起来很可怜​​,但事实上它比Apple II或DOS应用程序的类型功能更加灵活和富有表现力And there weren’t any high-resolution output devices anyway; the ImageWriter printer had 72 DPI output, so these bitmap fonts worked just as well for printing as they did on-screen.

改变LaserWriter时出现了最初的LaserWriters提供前所未有的300 DPI输出,低于今天的标准,但与ImageWriter相比令人难以置信的高点阵字体看起来不太好对激光打印输出——他们看起来凹凸不平,粗糙。

因此,轮廓字体Adobe’s Postscript came first; later, Apple and Microsoft introduced TrueType as a response to Adobe’s Postscript licensing termsThe differences between Postscript and TrueType fonts are not important for this discussion; the general principals are the same.

In an outline font, letterforms are not comprised of pixels相反,它们使用数学公式来定义以描述平滑的曲线和线条而位图字母就像Photoshop图像一样,轮廓字体就像Illustrator EPS文件一个轮廓字体可以扩展任何大小,在任何解析度。

Outline fonts look great on high resolution devices like laser printers; the higher the resolution, the better outline fonts look.

轮廓字体在低分辨率设备(如显示器)上看起来不那么好电脑屏幕提供极其粗糙的分辨率原始的Macintosh位图字体在屏幕上看起来很好是因为它们是手工创建的,逐个像素另一方面,轮廓字体在缩放到仅仅72 DPI时,看起来很糟糕实际上,如果没有Adobe的ATM软件,你甚至无法在屏幕上显示Postscript字体。

因此,达成妥协如果存在,Mac OS会对屏幕显示使用点阵字体,但将使用轮廓字体打印输出(这是一个过于简单的过度简化,但它对于这个概述来说已经足够了。)换句话说,你可能有相同的四个位图版本的Times(9,​​12,18和24),但是大纲版本(即TrueType or Postscript)在屏幕上,Mac OS会将这些位图版本用于特定尺寸印刷品和生成屏幕尺寸不可以作为位图,它将使用大纲版本(值得注意的是,TrueType字体可以或多或少地包含用于屏幕显示的内置位图版本这就是为什么微软的TrueType字体(如Verdana和Georgia)在没有抗锯齿的情况下在屏幕上看起来很棒,即使它们只是TrueType格式,没有单独的位图字体文件。)

在过去,大纲字体在屏幕上看起来很糟糕的原因之一是抗锯齿是不可行的首先,直到90年代中期,许多Macintosh显示器都是黑白的 - 不是灰度,而是2位黑白 - 你不能只用两种颜色来执行抗锯齿Worse, anti-aliasing was computationally expensive for the CPUs of the era; even if you had a grayscale or color display, anti-aliasing would have been办法使用太慢。

关于Mac OS X的大纲和位图字体的渲染

CPU现在要快得多,因此现在相对抗锯齿昂贵因此,Mac OS X不仅可以在屏幕上显示轮廓字体,还可以在执行此操作时自动应用消除锯齿功能结果通常清晰可读。

然而,问题是如何处理位图字体点阵字体,根据定义,是为了好看屏幕没有反走样但是,这并不是说你不能在渲染时应用抗锯齿,或者结果看起来很糟糕因此,在大多数情况下,Mac OS X只是继续使用,并且在渲染位图字体时也应用抗锯齿 - 除了小型位图等宽字体(例如Monaco)之外。

了解大纲和位图字体之间的区别对于理解我对Safari渲染小型等宽字体(特别是摩纳哥)的抱怨至关重要。

Safari工程师戴夫凯悦是善意回应到我的“抗锯齿”文章该评论他的文章,或者至少前半部分,也值得一读,包括凯悦自己的几个技术要点。

凯悦建议让用户通过CSS控制抗锯齿:

也就是说,我调查的是实施CSS3字体平滑属性这将在网站上提供作者级别的[抗锯齿]控制,并使用户能够通过用户样式表进行控制,例如,您可以说:

body {
  font-smooth: never;
}

最终需要的是将细粒度控制的反锯齿到用户的手中,并添加支持此属性会给用户级别的控制。

您还可以指定AA的截止点,例如,只有12px或更大的字体才能获得AA,例如,

pre, tt {
  font-smooth: 12px;
}

马修托马斯对此解决方案有疑问,写(在文章的评论中):

当你所有的编程都是一个样式系统时,每个bug都会开始看起来像缺少的CSS功能吗?

与MPT不同,我希望看到Safari实现CSS3的这个功能但这不是重点,因为它无法解决这个特殊问题Why? Because the main problem isn’t that Safari always anti-aliases Monaco 9 and 10, but rather that Safari always uses the大纲摩纳哥的版本,从来没有位图。

如果Safari只是为摩纳哥关闭了抗锯齿,但仍然使用了字体的轮廓版本,结果会非常糟糕没有人会感到高兴,因为字体形式既不会像平面图那样平滑,也不会像位图版本那样手工调整像素完美。

在没有抗锯齿的情况下在屏幕上渲染轮廓字体看起来很粗糙例如,考虑使用Mac OS X中的系统字体Lucida Grande它是一种轮廓字体,从一开始就是用于屏幕显示的消除锯齿然而,当您关闭反锯齿在小字号(通过使用选项一般系统首选项面板或通过周围的胸襟用Tinkertool),Lucida Grande看起来很糟糕这是因为不像芝加哥和木炭系统字体用于旧的Mac OS,明星Grande没有对应的位图版本——它只是一个轮廓字体因此,屏幕上看起来不错的唯一方法就是反走样。

How do I know Safari is using the outline version of Monaco, and not simply applying anti-aliasing to the bitmap version? Well, compare how Safari and Camino render this test document:monaco.html

九分摩纳哥在Safari:
Safari中的Monaco 9的屏幕截图。

九分摩纳哥在卡米诺:
Camino的Monaco 9的屏幕截图。

请注意字母和指标是如何显着不同的For example, the capital “I” has serifs in Safari, but not in Camino; punctuation characters like the period are much more subtle in Safari这些是不同的字形,而不是平滑的字形。

与此形成对比,例如,ProFont9点ProFont非常类似于9点摩纳哥 - 更多的是摩纳哥衍生物而不是原始字体测试文件在这里:profont.html(虽然如果安装了ProFont,它只能在您的机器上正确显示)。

Safari中的9点ProFont:
在Safari截图ProFont 9。

九分ProFont在卡米诺:
Camino的ProFont 9的屏幕截图。

请注意,在Camino,Monaco和ProFont几乎无法区分你需要至少有一点字体书呆子来注意细微的差别但在Safari中,摩纳哥和ProFont看起来非常不同,尽管两者都是抗锯齿的这是因为ProFont,Safari反锯齿ProFont的点阵式版本,所以它使用相同的字形和指标,卡米诺(连同其他Mac OS X应用程序),但它只是缓和曲线和反锯齿的边缘呈现尽管Safari具有ProFont,效果比与摩纳哥的要微妙得多,因为ProFont首先是一个中位图字体,不是一个大纲。

最后,再举一个例子,这对于Safari来说是最不讨人喜欢的(虽然可以肯定有点做作)。杰森科特克的丝网印刷是一种非常小的位图字体,旨在以8个像素的大小使用Camino按预期渲染它,但Safari的强制抗锯齿看起来很糟糕示例文档:silkscreen.html(与ProFont示例一样,如果您安装了Silkscreen,它将仅适用于您)。

Safari中的8点丝网印刷:
Safari中的Silkscreen 8的屏幕截图。

卡米诺的8点丝网印刷:
Camino的丝网印刷8的屏幕截图。

关于主观性

凯悦在回复我的文章时提出的要点是抗锯齿的吸引力是非常主观的,他是正确的美丽在旁观者的眼中,没有考虑品味等这也是两极分化 - 人们通常喜欢它或讨厌它。

一般来说,忽略(现在)更大的抗锯齿类型问题,甚至在是否对小等宽字体进行反别名的具体细节上存在分歧Although the feedback I’ve seen indicates that more people agree with me — that Monaco 9- and 10- are best left as non-anti-aliased bitmaps — there certainly are quite a few people who think the opposite, preferring anti-aliasing for all fonts, at all sizes.

就像任何两极分化的问题,没有解决方案,会让每个人都快乐,没有中间地带无论某些用户是否对他们感到满意,都需要为开发人员创建合理的指导方针一致性是关键Mac OS X的指导方针是使用默认用户首选项,屏幕类型通常是反锯齿的,除了小monospaced点阵字体这不像是书写的 -HIG指南(如果是,我不知道它在哪里写),但在查看其他Mac OS X本机应用程序时很明显还有全球“关闭平滑字体”选项在一般系统首选项面板,Safari完全忽略了。

在任何主观性问题上,很容易忽视围栏另一边的人的批评但并非所有对主观问题的批评本身都是主观的现在,如果我说非抗锯齿位图Monaco 9看起来更好,并且比抗锯齿轮廓Monaco 9更具可读性,那将是我的主观意见You might think the opposite; we all have different eyes and different tastes.

但是当我说Safari错误的使用反锯齿摩纳哥9和10,我这么说,不是因为我不喜欢它(尽管我不),而是因为它的治疗这些不同的字体写得比所有其他应用程序在Mac OS X上。

指南 - 摩纳哥9和10的位图版本应该是屏幕显示的首选 - 是我们可以不同意的我认为这是一个很好的指南(我的上一篇文章中概述的原因),但你可能不会这就是主体性。

但是你不能否认存在这样一个指导原则(即使是不成文的),而且Safari会反对它这就是我的主要观点:Safari不应该把这些字体不同于其他应用程序。

现在它最终在宏观计划中,这是一个小问题,琐碎的问题我花在描述它上面的努力可能不值得事实上,根据一个来自凯悦自己的评论,它可能甚至不是故意的,而是来自低级Safari绘图代码中的性能优化的副作用:

不遵守操作系统设置的问题实际上是Safari的错误,因为我们实际使用较低级CG API测量文本而不是更常用(和推荐)的CG API这些低级的api不看看操作系统设置,但它们更快(尤其是测量),所以最终我们获得了速度但是为代价向操作系统设置。

这实际上甚至使得字体平滑的实现变得困难,因为一旦我关闭了AA,我仍然在测量AA就好了。

日内瓦会议Redux

最后,我在前一篇文章指出,卡米诺喜欢点阵字体不仅为等宽字体(比如摩纳哥),但也任何老式位图Mac字体,如Geneva或Times。

举个例子,我提供了Dan Benjamin的导航栏截图Hivelogic网站,被指定为九分日内瓦又在这里:

卡米诺:

Safari:

我也认为Camino的渲染看起来更好再次,这是主观的,凯悦自己承认更喜欢Safari的抗锯齿日内瓦的外观。

但在这种情况下的差异不仅仅是抗锯齿字体的整个大小和间距是不同的As rendered in Camino, the text precisely fits the width of the navigation bar (which is what Benjamin intended); in Safari, the text is much smaller and wispier.

不过,我不会说Safari在这件事上是错的(正如我对等宽字体所做的那样)如果有的话,Safari可能更符合Mac OS X的精神只是位图日内瓦是美丽的,一个典型的年龄,但轮廓日内瓦只是一个可怕的Helvetica敲诈。

万一你已经没有足够的废话了

Michael Tsai将Safari的文本渲染与iCab相比较,丰富的截图和深刻的分析。

以前: 代码的猴子
下一个: 位图就像1989年