我正在尝试找出在font-size
CSS属性中设置的值所对应的内容。
为了提供上下文,我想在CSS中获取字体部分(大写高度以上和基线以下)的em
大小,我根据其OS / 2指标知道。 em
单位是相对于给定的font-size
的,而OS / 2指标则是相对于em square的。
我的期望
我的期望基于以下参考资料。 我没有发现更清晰或精确的信息。
根据CSS2.1中
font-size
的W3C参考,并在我在所有Stack Overflow问题中找到的主题(这里,这里和这里)中引用:字号对应于em square,这是排版中使用的概念。请注意,某些字形可能会超出其em square。
根据我在排版方面拥有的一些知识,
em square
是整个字体度量的方形,其中定义了上升、下降、间隙(等等...)行。 在OS / 2度量中,em square
是字体本身的大小(通常为1000或2048UPM)。
(来源:microsoft.com)我从W3C中找到的唯一解释在CSS1的旧参考资料中,它与我使用的现代数字定义的
em square
一致:某些值(如宽度度量)以相对于抽象正方形的单位表示,该正方形的高度是相同字号类型之间的行距。这个正方形被称为EM square。 (...) 常见的值为250(Intellifont),1000(Type 1)和2048(TrueType)。
因此,如果我正确理解这些参考资料,则应使用font-size
中指定的值来生成字体的整个em square
,并且我们应该能够从字体的大小和度量计算出字体的一部分大小。
例如,使用...
.my-letter {
font-family: 'Helvetica Neue';
font-size: 100px;
text-transform: uppercase;
}
......我们应该有一个em方块
为100px
,因为Helvetica Neue
的大写字母高度为714 / 1000
(OS/2表中的sCapHeight
),大写字母的高度为71.4px
。
实际发生了什么。
生成的em方块
比font-size
更大(在Mac上的最新版本的Chrome、Firefox和Safari上测试过)。起初,我以为浏览器对em方块
有另一种定义,并且使得字母的某个部分等于font-size
,但我没有找到任何与之匹配的OS/2度量(带或不带上升值,下降值,间隙等...)。
您也可以查看此CodePen。请注意,我使用line-height: 1;
来突出显示预期的大小,但我的问题是关于font-size
("渲染油墨")而不是line-height
("碰撞框")。这是我必须明确的,因为我已经被误解了多次。line-height
不是问题。
所以我有三个问题:
- 我是否正确理解了W3C的参考资料,或者我正在假设这些参考资料没有说的事情?
- 如果没有,为什么生成的字体具有比
font-size
更大的em方块? - 最重要的是:我如何知道渲染的em方块的大小(相对于
font-size
)?
感谢您的帮助。