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

Question

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

3

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

我问这个问题是因为客户给我发送了一个字体文件（源自于圆体简体，是一个.ttc文件但我将其转换为otf和ttf格式），但我似乎无法显示除粗体以外的任何其他字重。

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

我想确认一下，在一个字体文件中是否可能（或者至少不太可能）存在多个字重。

- A.com

TrueType Collections（.ttc）可以包含多种字体。 - nwellnhof

嗯...谢谢。这是一个很大的文件，所以必须这样做。 - A.com

1

请注意，自OpenType 1.7起，“truetype collections”已不再存在。现在只有OpenType collections（https://www.microsoft.com/typography/otspec/otff.htm - “font collections”部分）。真正的“truetype”字体已经不存在几十年了，从1995年开始就是OpenType，称为“带有truetype字形数据的OpenType字体”，由于历史原因，这些字体被称为“.ttf”文件，与“带有CFF字形数据的OpenType字体”形成对比，后者由于同样的历史原因被称为“.otf”文件。两者都是具有相同重要数据组织方式的OpenType字体。 - Mike 'Pomax' Kamermans

2个回答

3

正如nwellnhof所说，TrueTypeCollections可以包含不同的字体，这可能与字体的粗细有关，但也可能是浏览器呈现字体的方式，会给人额外的压力感。

如果您使用photoshop，则可以通过更改抗锯齿属性来查看此内容。然而，有时候，改变加载字体的顺序可能会对此有影响，但也可能使情况变得更糟。谷歌通常能够提供最流畅的字体呈现效果。

虽然没有确切的解决方案，但希望我所说的一些东西能够帮到您。

- Web Develop Wolf

请注意，自OpenType 1.7起，“truetype collections”不再存在。它只是OpenType集合（https://www.microsoft.com/typography/otspec/otff.htm - “字体集合”部分）。 - Mike 'Pomax' Kamermans

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mike 'Pomax' Kamermans · Accepted Answer

每个字重一个字体文件。这总是这种情况吗？

简短回答：是的。

传统的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 字体（用于计算机上的通用排版）带有大量数据，但在作为 webfont 加载时实际上被忽略（例如名称和上下文元数据），而加载字体集合则需要实际解析很多数据并根据找到的内容进行资源映射，不仅会显着复杂化哪些打包资源映射到哪里的问题，还需要额外的代码来正确处理甚至不是边缘情况的覆盖情况。 "如果有人加载了一个集合，但他们想保持对哪个子资源映射到哪个样式/重量值的控制，会发生什么？"

因此，添加集合支持将使事情变得非常复杂，没有任何实际的好处：将 OpenType 集合提取为单个 ttf/otf 字体（两者都是 OpenType 字体，它们只在其字形定义上有所不同；所有其他数据均以相同方式编码）并通过使用 WOFF 或 WOFF2 打包它们用于 web 是微不足道的，并且让设计师/用户更加掌握如何加载这些字体，因此我们不太可能很快看到集合支持。