html - 关于字体和字体间距，Adobe 中的光学字距调整和 CSS 中的 font-optical-sizing 大小调整有什么区别？

Question

令人困惑的是，CSS 和 Adob​​e 有相似的名称，但我认为这是两个截然不同的概念。

在 Adob​​e 中，当您选择字体时，在字距调整规则方面，您有几个选项:自动、光学、公制罗马。

在CSS中，有一个规则可以这样表达:

font-optical-sizing: auto;
font-optical-sizing: none;

Illustrator 完成的光学字体大小调整是通过此 algorithm 完成的.

但是，在 CSS 中，我不认为这种间距是通过算法完成的。在为 Google 字体团队撰写的这篇文章中，他们将光学尺寸描述为“字体类型转换厂创建稍微不同版本的字体以用于不同尺寸的做法。一般来说，小(正文或标题)光学尺寸往往具有更少的笔划对比度、更大的 x 高度、更宽的字符和更多的开放间距。- Elliot Jay Stacks”。全文here .

CSS 描述中需要注意的重要一点是，它是类型类型转换厂自己添加的内容。

有人可以确认这两者实际上是两个独立且截然不同的事物吗？

Answer 1

The Optical font sizing done by Illustrator is done via this algorithm.

问题中的术语混淆了:这是光学字距，而不是光学尺寸。

.. similar names to what I believe are two very different concepts.

唯一的相似之处是两者都有“光学”，但它们是非常不同的概念，并且可以被打印者很好地理解。

字距调整与调整字形之间的间距有关，以使整行间距更加一致。一个代表性的例子是字母对 AV，TA 是另一个很好的例子。比较这些:

在第一个中，T 和 A 之间的空间太大，A 和 V 之间的空间也太大。在第二个中，对这些对进行字距调整以减少空间。 (快速完成的示例并不完美，但说明了这一点。)

光学字距调整可以理解为一种使用形状自动分析来设置字距调整的算法。

光学尺寸完全不同。使用了该术语，但实际上并不是对该过程的准确描述 - 没有进行尺寸调整。

相反，这与某些字体系列是用不同的字形和不同的文本大小制作的这一事实有关。 Google Fonts 文章正在解释这一点。例如，在下图中，四行是来自同一字体系列的示例，旨在用于不同的尺寸。

这四种字体旨在用于不同的尺寸，但它们被缩放到相同的尺寸以使设计中的差异更加明显。第一个用于大文本尺寸，具有精细的细节，例如细衬线和字母 e 中圆形笔画宽度的显着变化(调制)。但是，如果您将正文或标题的字体缩小到较小的尺寸，那么这些细节就会丢失，并且字形将变得不太清晰。此外，字形之间的间距会变得太紧，进一步妨碍易读性。因此，对于较小的尺寸，会创建字体的变体来权衡设计的一些细节以提高易读性。

字体系列中的这些字体变体被打印者称为光学尺寸，并且包含此类变体的字体系列可能被称为光学尺寸系列 em> 或具有光学尺寸。

Adobe’s Kepler系列是具有光学尺寸的系列的示例。请注意，该系列中的 168 种字体中的大多数在名称末尾都有一个额外的描述符:“Caption”、“Display”、“Subhead”:这些是针对非常小尺寸文本(“Caption”)的设计变体，非常大的文本，例如标题(“显示”)，以及比正文文本更大的文本(“副标题”)

在 CSS 中，当 font-optical-sizing 设置为 auto 时，如果所选系列有光学尺寸变体，则浏览器将根据 font-size 属性值自动选择特定的光学变体。

CSS 中的这一功能与六年前 OpenType Font Variations 的引入密切相关。在金属活字时代，活字具有光学尺寸变化是很常见的。当可扩展的照片排版在二十世纪中叶发明时(在胶片上设计的字体，用黑色掩模透明，然后用于曝光照相底片)，相同的设计开始用于所有尺寸，并且排版质量普遍下降。可扩展的数字字体延续了这一趋势:一些光学尺寸类型(例如 Adob​​e Kepler)仍然可用，但大多数字体没有光学尺寸变体。然而，随着 OpenType 中可变字体的出现，光学尺寸变体正在强势卷土重来。

2017/2018 年 CSS 中添加了 font-optical-sizing 属性，同时还添加了对可变字体的支持。

因此，这两个术语都包含“光学”，但它们确实是非常不同的概念。