字体文件（例如.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

每个重量一个字体文件。情况总是如此吗？

简短的回答：是的。

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

在CSS中，有一个人为的限制，即权重只能在100到900之间，以100为增量。例如，权重“150”在CSS中没有任何意义，即使字体文件的权重值可以为150。OS/2 元数据表（顺便说一句，仅出于历史原因才称为 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 将它们打包到网络上是微不足道的，并且让设计者/用户对如何加载这些字体有更多的控制权，因此我们不太可能很快看到集合支持。