当我们在CSS中设置以px为单位的字体大小时,文本的哪个维度实际设置为该值



有很多关于CSS中不同度量的文章,但实际上我找不到任何一篇来回答我的问题!

例如,当我们将字体大小设置为16px时,字形或字符的哪一部分将设置为16px?(是x-height、Cap height还是…)

如何在css中准确控制字符的高度?(类似于使用ex单位,但对于字符的整个高度)

这完全取决于矢量图像在字体中的定义方式。

定义字体时,您有一个"文档",就像使用Adobe Illustrator或任何其他矢量编辑工具时一样。文件的高度为100%。如果构建字体的人没有将字形拉伸到文档的高度,那么字形就永远不会达到定义的大小。

对于文本字符(字体),有关于下行符、"g,y"、大写高度"A vs.A"和上行符如何出现的指南,但不适用于字形。因此,没有真正的衡量标准。

让字形的大小正确有时是一个试错的问题理想情况下,字形的高度应与大写字母相同(E),但有时字形的大小会有所不同。例如,商标(™)被设计为上标。它较小,但设计成与基本字体大小成比例。

有关如何定义字体的更详细信息,请参阅:字体解剖。

font-size属性设置字体的大小,它等于字体的高度,不等于任何字符的任何维度,除非是意外。它只是一个参考量,通常足以容纳字符占据的整个垂直空间,包括下行符、上行符和常见的变音符号,但不包括任何变音符号序列。通常,"Q"、"É"、"þ"one_answers"Å"都适合字体高度,因此需要大于例如"E"one_answers"A"的高度。但这不是法律;在某些字体中,例如"Å"延伸到字体高度的顶部之上

意外包括被定义为具有与字体大小相等的尺寸的字符。例如,EM SPACE的宽度可以预期等于字体大小,但即使这样(根据Unicode标准)也只是"名义上"适用,并且可能因浓缩因子而异。(EM DASH可能有一个em的宽度,但这不是其定义的一部分,与其名称相反。)

字体的大小肯定大于x的高度,也大于大写字母的高度(部分原因是有些大写字母有后代)。字体大小(em单位)等于"M"宽度这一非常流行的观点显然是错误的,即使是最简单的检查也可以证明这一点。

最新更新