html - 字体文件(例如 .ttc .ttf .otf)是否包含不同的权重？

Question

我经常看到元素中的字体(不是来自 Google 字体之类的 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

one font file per weight. Is this always the case?

简短的回答:是的。

传统 OpenType 字体(与较新的可变字体不同)仅涵盖单一粗细，但是:不要将字体粗细与 CSS 粗细混淆。字体在技术上可以有 any weight between 0 and 65336 ，这些数字技术上没有任何意义，它们只是类型转换厂表明他们认为适合整个系列(由许多不同权重/建模的独立字体组成)的一种方式。

在 CSS 中，有一个人为限制，即只有 100 到 900 的权重，以 100 为增量。权重“150”在 CSS 中没有任何意义，例如，即使是字体文件 在其 OS/2 metadata table 中可以有一个权重值 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 绑定(bind)到超轻，将 400 绑定(bind)到普通，将 900 绑定(bind)到超黑，但这是您做主，而不是字体。 CSS 不尊重 OpenType 元数据，@font-face 绑定(bind)拥有最终决定权。

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

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