在CSS中设置字体大小时,字母的实际高度是多少？

Question

这里有一个类似的问题,其答案实质上是:

高度 - 特别是从上升者的顶部(例如,'h'或'l'(el))到下降者的底部(例如,'g'或'y')

这也是我的经验.即14px Arial中字母的高度K(基线高度)约为10px.

规范没有说明计算的字体大小,所以我猜这是浏览器特定的,但我找不到任何引用它.

(此处和此处的其他问题大致相同,但遗憾的是没有答案给出令人满意的解释..)

是否有任何文件说明为什么字体大小似乎是"从上升到下降"的大小？

Answer 1

关于这个主题的一些背景

当在金属上创建字母时,em指的是字母将被雕刻在每个块上的大小,并且该大小由大写字母M确定,因为它通常占用最多的空间.

现在有一天,字体开发人员在计算机上创建他们的字体,没有物理金属片的限制,所以当em仍然存在时,它只不过是软件中的一个虚构边界; 因此容易被操纵或完全忽视.

标准

在OpenType字体中,em大小应设置为1000个单位.在TrueType字体中,em大小通常为1024或2048.

定义字体样式的最准确方法是在定义要使用的字体大小时使用EM,尺寸不是指字体的像素高度,而是指由距离确定的字体x高度基线和字体的平均线之间.

对于记录1,PT约为0.35136mm.PX是屏幕上的1"点",由每平方英寸的点数或屏幕的分辨率定义,因此屏幕与屏幕不同,是定义字体大小的最差方式.

单位转换

如果您喜欢让您的眼睛像我一样流血的文学作品,这是一个非常好的阅读. 典型测量的国际统一

1 point (Truchet)                    |  0.188 mm
1 point (Didot)                      |  0.376 mm or 1/72 of a French royal inch
1 point (ATA)                        |  0.3514598 mm or 0.013837 inch
1 point (TeX)                        |  0.3514598035 mm or 1/72.27 inch
1 point (Postscript)                 |  0.3527777778 mm or 1/72 inch
1 point (l’Imprimerie nationale, IN) |  0.4 mm
1 pica (ATA)                         |  4.2175176 mm = 12 points (ATA)
1 pica (TeX)                         |  4.217517642 mm = 12 points (TeX)
1 pica (Postscript)                  |  4.233333333 mm = 12 points (Postscript)
1 cicero                             |  4.531 mm = 12 points (Didot)

决议

µm  :  10.0    20.0    21.2    40.0    42.3    80.0    84.7    100.0    250.0    254.0
dpi :  2540    1270    1200    635     600     317     300     254      102      100

标准只值得这么多..

一个字体字形与另一种字体的实际大小总是有所不同,具体取决于:

1. 开发人员在创建字体时如何设计字体字形,
2. 以及浏览器如何呈现这些字符.没有两个浏览器会完全相同.
3. 查看字体的屏幕的分辨率和ppi.

例

作为字体开发人员操作几何图形的常见例子.回到Apple创建Zapfino脚本字体时,它们相对于字体中最大的大写字母进行大小调整,但后来他们决定使用小写字母太小了所以几年后他们修改它,以便任何给定的点大小比其他字体大4倍.

如果您没有头痛,请阅读更多..

维基百科上有关于现代排版和起源的一些很好的信息; 和其他相关科目.

• 点(排版)
• 每英寸像素数
• 字体指标
• 印刷单位

还有一些第一手经验

如果你想获得更多第一手的理解,你可以下载免费的字体开发工具FontForge,它可以与非免费的FontLab Studio相媲美(根据我的经验,这两者中的任何一个都是字体开发人员的热门选择).两者都有活跃的社区,因此您在学习如何使用它们时可以找到足够的支持.

• Fontlab Studio
• Fontlab Fontographer
• FontForge
• Fontlab Wikibook
• FontForge文档

Answer 2

关于排版的答案非常好，但是请注意，CSS在许多情况下与传统排版有所不同。

在CSS中，字体大小决定“ em-box”的高度。em-box是一个边界框，可以包含字体的所有字母，包括升序和降序。非正式地，您可以将字体大小视为“ j”高度，因为小写的j既具有升序又具有降序，因此（在大多数字体中）使用完整的em-box高度。

这意味着大多数字母（例如大写的M）在em框中的上方和下方都有空格。大写字母上方和下方的相对空间量在字体之间会有所不同，因为某些字体的上，下字体相对较大或较小。这是在样式上将字体彼此分开的一部分。

您问为什么字体大小包含上升和下降，即。为什么它与em-box的高度相对应，即使大多数字母的高度都小于这个高度。好吧，由于大多数文本的确包含带有升序和降序的字母，所以em-box高度指示文本需要多少垂直空间（至少），这非常有用！

注意：某些字形甚至可能超出某些字体的em-box。例如，字母“Å”通常在em-box上方延伸。这是字体设计者的风格选择。