字体文件（例如.ttc .ttf .otf）是否包含不同的粗细？

Question

我经常看到一些项目，其中的字体（不是来自像 Google Fonts 这样的 CDN）每个权重都有一个字体文件。总是这样吗？

我问这个是因为我从客户那里收到了一个字体文件（Yuanti SC，一个.ttc，但我将其转换为otf和ttf），除了粗体之外，我似乎无法显示任何其他粗细。

@font-face {
    font-family: Yuanti;
    src:  url(/fonts/yuanti.otf) format('otf'),
          url(/fonts/yuanti.ttf) format('truetype');
    font-weight: 100;
}

我想确保一个字体文件中不可能（或至少不可能）存在多个字体粗细。

Answer 1

每个权重一个字体文件。总是这样吗？

• 2018 年中之前：是的。
• 2018 年中之后：是的，如果字体是“传统”opentype 字体。
• 2018 年中之后，对于“可变字体”：没有。 （见本回答末尾）

传统的 OpenType 字体（与较新的可变字体不同）仅涵盖单一粗细，但是：不要将字体粗细与 CSS 粗细混淆。从技术上讲，字体可以具有 0 到 65336 之间的任何粗细，并且这些数字从技术上讲没有任何意义，它们只是铸造厂表明他们认为适合完整系列的一种方式（由许多不同权重组成） /建模单独字体）。

在 CSS 中，有一个人为的限制，即权重只能在 100 到 900 之间，以 100 为增量。例如，权重“150”在 CSS 中没有任何意义，尽管

字体文件可以有一个权重值其 OS/2 元数据表中有 150 个（顺便说一句，仅出于历史原因才被称为 OS/2）。

如果浏览器支持字体集合，您可以使用它们，但它们不支持：加载多个权重的方式实际上是加载多个字体：

@font-face {
  font-family: "myfont";
  font-weight: 100;
  src: url(fonts/super-bold.woff) format("woff");
}

@font-face {
  font-family: "myfont";
  font-weight: 400;
  src: url(fonts/italic.woff) format("woff");
}

@font-face {
  font-family: "myfont";
  font-weight: 900;
  src: url(fonts/ultra-thing.woff) format("woff");
}

并注意那里发生的事情：字体文件本身所说的字体粗细是什么并不重要：

你可以定义哪个粗细映射到哪个实际字体资源，所以如果我们说“在我的CSS中，粗细100映射到超级粗体”然后浏览器就会这样做。 CSS @font-face

 定义定义了资源文件和 CSS 样式/粗细之间的映射，而不是字体文件。

通常您会将 100 绑定到超浅色，将 400 绑定到正常，将 900 绑定到超黑，但这是您在发号施令，而不是字体。 CSS 不尊重 OpenType 元数据，

@font-face

 绑定拥有最终决定权。

至于

为什么浏览器不支持字体集合，这与加载字体时实际使用哪些数据有关。 “真正的”OpenType 字体（在计算机上用于通用排版的字体）附带大量数据，当作为网络字体加载时，这些数据实际上会被忽略（例如名称和上下文元数据），而加载字体集合将需要实际解析大量数据并根据发现的内容进行资源映射，这不仅使哪个打包资源映射到什么的问题变得非常复杂，而且还需要额外的代码来正确处理非远程边缘情况，其中覆盖是必要的。 “如果有人加载一个集合，但他们想要控制哪个子资源映射到哪个样式/权重值，会发生什么？”。

因此，添加集合支持会使事情变得极其复杂，而且没有任何实际好处：将 OpenType 集合提取到单独的 ttf/otf 字体（这两种字体都是 OpenType 字体，它们仅在字形定义上有所不同；所有其他数据的编码相同） ）并且简单地使用 WOFF 或 WOFF2 将它们打包到网络上是微不足道的，并且让设计者/用户对如何加载这些字体有更多的控制权，因此我们不太可能很快看到集合支持。

但是，截至 2018 年中期，所有浏览器

do都支持可变字体，这些字体是单一字体，其中轮廓不是“固定”的，而是使用（毫不奇怪）变量来确定轮廓顶点的位置和控制值等内容。这允许单个文件编码“单个但可变”的字体。您将看到的典型示例是带有“粗细”变量的单个字体，有效地为您提供（最多）1000 个不同的粗体/亮度级别，但变量是任意的，并且 CSS 已更新为允许您控制任何变量通过使用 font-variation-settings

 属性

，由使用它们的字体支持。

Answer 2

正如 nwellnhof 所说，TrueTypeCollections 可以包含不同的字体，这可能会影响重量，但浏览器渲染字体的方式也可能会给人额外重量的印象。

如果您有 Photoshop，您可以通过更改值之间的 ani-aliasing 属性来看到这一点。然而，有时，更改字体加载的顺序可能会对此产生影响，但也可能使情况变得更糟。如今，谷歌通常会提供平滑的字体呈现。

这并不是真正的解决方案，但希望我闲聊的内容有所帮助。