字体文件(例如.ttc .ttf .otf)包含不同的权重

我经常看到这样的项目:字体(不是来自像Google fonts这样的CDN)每个权重有一个字体文件。总是这样吗?

我问这个问题是因为我从客户那里收到了一个字体文件(元anti 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;
}

我想确保在一个字体文件中不可能(或至少不可能)存在多个字体权重

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

简短回答:yes.

传统的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中，weight 100映射到超级粗体"然后浏览器就会这样做。CSS @font-face定义定义了资源文件和CSS样式/重量之间的映射，而不是字体文件。

通常你会将100绑定到超亮，400绑定到正常，900绑定到超黑，但这是你在发号施令，而不是字体。CSS不尊重OpenType元数据，@font-face绑定获得最终决定权。

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

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

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

如果你有photoshop，你可以通过改变值之间的反混叠属性来看到这一点。然而，有时候，改变字体加载的顺序可能会有所不同，但也可能使情况变得更糟。这些天，谷歌通常会提供平滑的字体呈现。

并不是一个真正的解决方案，但希望我所漫谈的东西能有所帮助。

相关内容

最新更新

热门标签：