我经常看到项目中的字体(不是来自CDN,如Google Fonts)将有一个字体文件的重量。这总是这样吗?
我问是因为我从客户端收到了一个字体文件(Yuanti SC,a.ttc,但我将其转换为otf和ttf),我似乎不能得到任何其他重量显示以外的粗体。
@font-face {
font-family: Yuanti;
src: url(/fonts/yuanti.otf) format('otf'),
url(/fonts/yuanti.ttf) format('truetype');
font-weight: 100;
}
我想确保在一个字体文件中不可能(或至少不太可能)有多个字体粗细。
2条答案
按热度按时间nlejzf6q1#
每个权重一个字体文件。总是这样吗?
简短回答:是的。
传统OpenType字体(与较新的可变字体不同)仅涵盖单一粗细,但是:不要混淆字体权重和CSS权重。从技术上讲,字体可以有0到65336之间的任何权重,这些数字 * 从技术上讲 * 没有任何意义,它们只是一种方式,让铸造厂表明他们觉得适合一个完整的系列(由许多不同权重/模型的单个字体组成)。
在CSS中,有一个人为的限制,即只有100到900的权重,增量为100。例如,权重“150”在CSS中没有任何意义,即使 * 字体文件 * 在其OS/2 metadata table(顺便提一下,它被称为OS/2只是出于历史原因)中可以有一个权重值150。
如果浏览器支持字体集,您可以使用这些字体集,但它们不支持:加载多个权重的方式就是按字面意思加载多个字体:
注意那里发生的事情:字体文件本身的字体粗细是什么并不重要:* 您 * 可以定义哪个权重Map到哪个实际的字体资源,所以如果我们说“在我的CSS中,权重100Map到超级粗体”,那么浏览器就会这样做。CSS
@font-face
定义是定义资源文件和CSS样式/权重之间的Map,而不是字体文件。通常你会绑定100到超亮,400到普通,900到超黑,但这是你说了算,而不是字体。CSS不尊重OpenType元数据,
@font-face
绑定有最终决定权。至于 * 为什么 * 浏览器不支持字体集合,这与加载字体时实际使用的数据有关。“真实的的”OpenType字体(您在计算机上用于通用排版的字体)带有大量数据,这些数据在作为web字体加载时完全被忽略。(例如,名称和上下文元数据),而加载字体集合实际上需要解析大量数据并根据找到的内容进行资源Map,这不仅显著地使哪个打包资源Map到什么的问题复杂化,而且还需要额外的代码来适当地处理其中覆盖是必要的非均匀远程边缘情况。“如果某人加载了集合,但是他们想要保持对哪个子资源Map到哪个样式/权重值的控制,会发生什么?"。
因此,添加集合支持将使事情变得难以置信地复杂,而没有任何真实的好处:将OpenType集合提取到单独的ttf/otf字体(两者都是OpenType字体,它们仅在它们的字形定义上不同;所有其他数据都是相同的编码),简单地使用WOFF或WOFF 2为Web打包它们是微不足道的,并且让设计者/用户对如何加载这些字体有更多的控制权,所以我们不太可能在短期内看到集合支持。
xxls0lw82#
正如nwellnhof所说,TrueTypeCollections可以包含不同的字体,这些字体可能会对重量产生影响,但浏览器呈现字体的方式也可能会给予人以额外重量的印象。
如果你有photoshop,你可以通过改变ani-aliasing属性值来看到这个。然而,有时候,改变字体加载的顺序可以使这个不同,但它也可以使它变得更糟。谷歌通常会给这些天字体的平滑再现。
这不是一个真正的解决方案,但希望我一直在漫谈的东西有所帮助。