字体文件（例如 .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 粗细混淆。字体在技术上可以有any weight between 0 and 65336，而这些数字技术上没有任何意义，它们只是铸造厂表明他们认为适合整个家庭的一种方式（由许多不同的权重组成/建模单个字体）。

在 CSS 中，人为限制只有 100 到 900 的权重，增量为 100。权重“150”在 CSS 中没有任何意义，例如，即使 字体文件 em> 在其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 绑定到超轻，400 绑定到普通，900 绑定到超黑，但这是您做主，而不是字体。 CSS 不尊重 OpenType 元数据，@font-face 绑定说了算。

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

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

Answer 2

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

如果您有 Photoshop，则可以通过跨值更改 ani-aliasing 属性来看到这一点。但是有时，更改字体加载的顺序可能会有所不同，但也会使情况变得更糟。如今，Google 通常会提供平滑的字体再现。

这并不是一个真正的解决方案，但希望我漫不经心的事情有所帮助。