在 CSS 中设置 font-size 时，字母的实际高度是多少? [英] When setting a font-size in CSS, what is the real height of the letters?
问题描述
有一个类似的问题 字体中，em 大小应该设置为 1000 个单位.而在 TrueType 字体中，em 大小通常为 1024 或 2048.
定义字体样式最准确的方法是使用EM，当你定义一个font-size供使用时，尺寸不是指字体的像素高度，而是指确定的字体x高度由基线到字体中线的距离.
记录 1 PT 约为 0.35136 毫米.PX 是屏幕上的 1 个点"，它由每平方英寸的点数或屏幕分辨率定义，因此因屏幕而异，是定义字体大小的最糟糕方式.
单位换算
如果你像我一样喜欢让你的眼睛流血的文学，这是一本非常好的读物.排版测量的国际统一
1 点 (Truchet) |0.188 毫米1 分 (Didot) |0.376 毫米或 1/72 法国皇家英寸1 分 (ATA) |0.3514598 毫米或 0.013837 英寸1 分 (TeX) |0.3514598035 毫米或 1/72.27 英寸1分(后记)|0.3527777778 毫米或 1/72 英寸1 分 (l'Imprimerie nationale, IN) |0.4 毫米1 异食癖 (ATA) |4.2175176 毫米 = 12 点 (ATA)1 异食癖 (TeX) |4.217517642 毫米 = 12 点 (TeX)1 异食癖(后记) |4.233333333 mm = 12 点(后记)1 西塞罗 |4.531 毫米 = 12 点 (Didot)决议
µm : 10.0 20.0 21.2 40.0 42.3 80.0 84.7 100.0 250.0 254.0dpi : 2540 1270 1200 635 600 317 300 254 102 100标准的价值就这么多..
一种字体字形与另一种字体的实际大小总是会有所不同，具体取决于:
- 开发人员在创建字体时如何设计字体字形，
- 以及浏览器如何呈现这些字符.没有任何两个浏览器会完全相同.
- 查看字体的屏幕分辨率和ppi.
示例
作为字体开发人员操纵几何图形的常见示例.早在 Apple 创建 Zapfino 脚本字体时，他们按照预期相对于字体中最大的大写字母调整其大小，但随后他们决定小写字母看起来太小，所以几年后他们修改了它，使任何给定的点大小比其他字体大 4 倍左右.
如果您不头痛，请多读一些..
维基百科上有一些关于现代排版和起源的好信息；和其他相关主题.
和一些第一手经验
如果你想获得更多的第一手了解你可以下载免费的字体开发工具FontForge，它与非免费的FontLab Studio(根据我的经验，这两个都是字体开发人员的流行选择).两者都有活跃的社区，因此您可以在学习如何使用它们时获得大量支持.
There is a similar question here whose answer in essence says:
The height - specifically from the top of the ascenders (e.g., 'h' or 'l' (el)) to the bottom of the descenders (e.g., 'g' or 'y')
This has also been my experiance. I.e. in 14px Arial the height of the letter K (the baseline height) is about 10px.
The specs say nothing about the calculated font-size so I'm guessing this is browser-specific, but I could not find any reference to it.
(Other questions here and here ask roughly the same thing but sadly no answer gives a satisfying explanation..)
Is there any documentation on why the font-size seems to be the size "from ascenders to descendes"?
Some background on the subject
Back when letters were created on metal, the em referred to the size of each block that the letter would be engraved on, and that size was determined by the capital M because it usually takes up the most space.
Now a days, font developers create their fonts on a computer without the limitations of a physical piece of metal so while the em still exists, its nothing more than an imaginary boundary in the software; thus prone to being manipulated or disregarded altogether.
Standards
In an OpenType font, the em size is supposed to be set to 1000 units. And in TrueType fonts, the em size is usually either 1024 or 2048.
The most accurate way to define a font style is to use EM that way when you define a font-size for use, the dimension does not refer to the pixel height of the font, but to the fonts x height which is determined by the distance between the baseline and the mean line of the font.
For the record 1 PT is about 0.35136mm. And PX is 1 "dot" on your screen which is defined by the dots per square inch or resolution of your screen and thus different from screen to screen and is the worst way to define a font size.
Unit conversion
This is a pretty good read if you enjoy literature that makes your eyes bleed like me.. 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)
Resolutions
µ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
Standards are only worth so much..
The actual size of one fonts glyphs vs another font are always going vary dependent on:
- how the developer designed the font glyphs when creating the font,
- and how the browser renders those characters. No two browsers are going to be exactly the same.
- the resolution and ppi of the screen viewing the font.
Example
As an example of how common it is for font developers to manipulate the geometry.. Back when Apple created the Zapfino script font, they sized it relative to the largest capitals in the font as would be expected but then they decided that the lowercase letters looked too small so a few years later they revised it so that any given point size was about 4x larger than other fonts.
If you don't have a headache, read some more..
There's some good information on Wikipedia about modern typography and origins; and other relevant subjects.
And some first-hand experience
If you want to get more first-hand understanding you can download the free font development tool FontForge which is comparable to the non-free FontLab Studio (either of these two being the popular choice among font developers in my experience). Both also have active communities so you can find plenty of support when learning how to use them.
这篇关于在 CSS 中设置 font-size 时，字母的实际高度是多少?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
