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

时间：2014-08-27 06:37:16

标签： css browser fonts

有一个类似的问题here，其答案实质上是：

  

高度 - 特别是从上升者的顶部（例如，＆＃39; h＆＃39;（el））到下降者的底部（例如，＆＃39; g＆＃39;或＆＃39; y＆＃39;）

这也是我的经验。即在14px Arial中，字母K（基线高度）的高度约为10px。

The specs对计算出的字体大小一无所知，所以我猜这是特定于浏览器的，但我找不到任何引用。

（其他问题here和here大致相同，但遗憾的是没有答案给出令人满意的解释..）

是否有任何文件说明为什么字体大小似乎是从上升到下降的尺寸＆＃34;？

4 个答案:

答案 0 :(得分：28)

enter image description here

关于这个主题的一些背景

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

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

标准

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

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

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

单位转换

如果您喜欢让您的眼睛像我一样出血的文学作品，这是一本非常好的读物。International unification of typopgrahic measurements 

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。

    4. 实施例

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

    如果您没有头痛，请阅读更多内容..

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

    和一些第一手经验

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

答案 1 :(得分：4)

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

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

这意味着大多数字母（如大写字母M）在em-box的上方和下方都有空格。大写字母上方和下方的相对空格量因字体而异，因为某些字体具有相对较大或较小的上升和下降。这是风格上为每个人设置字体的一部分。

你问为什么font-size包括ascenders和descenders，即。为什么它对应于em-box的高度，即使大多数字母的高度都小于此值。好吧，因为大多数文本做包括带有上升和下降的字母，所以em-box高度表示文本需要多少垂直空间（至少），这非常有用！

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

答案 2 :(得分：0)

在寻找类似问题的满意答案后，我发现这张图片有很多帮助......

http://static.splashnology.com/articles/Choosing-the-Best-Units/font-units-large.png

答案 3 :(得分：0)

我已经尝试过准确确定字体大小与font-metrics相对应的内容（如davidcondrey的答案中的图表所示）。

在macOS上测试Safari，Chrome和Firefox，将font-size设置为100px似乎将上升线和下行线之间的差异的表观大小设置为100px。

不幸的是，在讨论不同的字体格式时，ascender和descender有多种含义，所以为了消除OpenType的歧义，我们谈论的是“ Typo Ascender ”和'<来自OS / 2表的强> Typo Descender 。

OpenType CSS font-height diagram

opentype.js字形检查器https://opentype.js.org/glyph-inspector.html

上提供了交互式插图

在定位角色时（再次根据OpenType指标），浏览器似乎认为y = 0是 Ascender ，（不与davidcondrey图中的'ascender line'，但它是OpenType中hhea表中的ascender）。但是，如果CSS line-height未设置为normal，则位置会偏移一些数量，但我认为此处的规则可能会稍微复杂一些。

我希望操作系统和浏览器之间存在更多因素并且可能会有所不同，但这至少是一个很好的近似值。

相关问题
最新问题