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

Html 字体文件(例如ttc.ttf.otf)是否包含不同的权重?,html,css,fonts,Html,Css,Fonts,我经常看到一些项目,这些项目中的字体不是来自像Google fonts这样的CDN,而是每个重量有一个字体文件。总是这样吗 我问是因为我收到了一个客户Yuanti SC的字体文件,一个.ttc,但我把它转换成了otf和ttf,除了粗体,我似乎无法显示任何其他重量 @font-face { font-family: Yuanti; src: url(/fonts/yuanti.otf) format('otf'), url(/fonts/yuanti.ttf)

我经常看到一些项目,这些项目中的字体不是来自像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;
}

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

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

如果您有photoshop,您可以通过更改值之间的ani别名属性来看到这一点。但是,有时,更改字体加载顺序可能会对此产生影响,但也可能使情况变得更糟。如今,谷歌通常提供流畅的字体呈现


这并不是一个真正的解决方案,但希望我所讨论的东西能有所帮助。

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

如果您有photoshop,您可以通过更改值之间的ani别名属性来看到这一点。但是,有时,更改字体加载顺序可能会对此产生影响,但也可能使情况变得更糟。如今,谷歌通常提供流畅的字体呈现

这并不是一个真正的解决方案,但希望我所说的一些东西能有所帮助

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

简短回答:是的

单个OpenType字体只包含单个权重,但不要将字体权重与CSS权重混淆。字体在技术上可以有,而这些数字在技术上并不意味着什么,它们只是一种铸造厂表示它们认为适合由许多不同权重/模型的单个字体组成的完整系列的方式

在CSS中,有一个人为的限制,即只有100到900个权重,以100为增量。例如,在CSS中,权重150并不意味着任何东西,即使字体文件的权重值可以是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上是很简单的,并且让设计师/用户对如何加载这些字体有更多的控制权,因此我们不太可能很快看到收集支持

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

简短回答:是的

单个OpenType字体只包含单个权重,但不要将字体权重与CSS权重混淆。字体在技术上可以有,而这些数字在技术上并不意味着什么,它们只是一种铸造厂表示它们认为适合由许多不同权重/模型的单个字体组成的完整系列的方式

在CSS中,有一个人为的限制,即只有100到100的权重 900,以100为增量。例如,在CSS中,权重150并不意味着任何东西,即使字体文件的权重值可以是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上是很简单的,并且让设计师/用户对如何加载这些字体有更多的控制权,因此我们不太可能很快看到集合支持。

。ttc可以包含多种字体。嗯。。。谢谢这是一个很大的文件,所以它必须。请注意,从OpenType 1.7开始,truetype集合不再存在。这只是OpenType集合-字体集合部分。真正的truetype字体已经几十年不存在了,它几乎从1995年就开始使用OpenType,因为带有truetype字形数据的OpenType字体由于历史原因被称为.ttf文件,而带有CFF字形数据的OpenType字体由于同样的历史原因被称为.otf文件。两者都是简单的OpenType字体,重要数据的组织方式相同。ttc可以包含多种字体。嗯。。。谢谢这是一个很大的文件,所以它必须。请注意,从OpenType 1.7开始,truetype集合不再存在。这只是OpenType集合-字体集合部分。真正的truetype字体已经几十年不存在了,它几乎从1995年就开始使用OpenType,因为带有truetype字形数据的OpenType字体由于历史原因被称为.ttf文件,而带有CFF字形数据的OpenType字体由于同样的历史原因被称为.otf文件。两者都是简单的OpenType字体,重要数据的组织方式相同。请注意,从OpenType 1.7开始,truetype集合不再存在。只是OpenType集合-字体集合部分请注意,从OpenType 1.7开始,truetype集合不再存在。这只是OpenType集合-字体集合部分,谢谢您的详细回答。在哪里我可以了解到更多关于将.ttc提取到单个ttf/otf字体文件的信息?介绍字体集合在TTC标题部分中遵循的布局,因此主要是在连续标题指示的偏移量值之间使用任何脚本语言对二进制文件进行切分。虽然我相信人们已经编写了解包实用程序,但谷歌应该能够为您找到一些。谢谢您的详细回答。在哪里我可以了解到更多关于将.ttc提取到单个ttf/otf字体文件的信息?介绍字体集合在TTC标题部分中遵循的布局,因此主要是在连续标题指示的偏移量值之间使用任何脚本语言对二进制文件进行切分。虽然我确信人们已经编写了解包实用程序,但谷歌应该能够为您找到一些。