html - 字体大小是如何测量的？

Question

这个问题在这里已经有了答案:





When setting a font-size in CSS, what is the real height of the letters?

(4 个回答)



How is font size calculated?

(5 个回答)



How can I calculate the size of font when using different font-types?

(1 个回答)


11 个月前关闭。




背景:我正在尝试使用字形位图进行字体渲染，我需要一种方法来验证我在屏幕上以正确的大小渲染文本。
所以当有人说:font-size: 64px这个 64 应该出现在哪里？我在 HTML 中尝试了相同的练习，但现在我比开始之前更加困惑。这就是 HTML 使用 font-size: 64px 呈现文本的方式.红线 - 我试图装一盒 height: 64px围绕这些字母:

如您所见，我找不到将 64px 与视觉字母匹配的方法。
有人可以向我解释这个 64px 应该出现在哪里吗？
我知道字体大小是一种非常古老的东西，它来自物理打印机，并且也考虑了一些间距，但在数字时代没有任何逻辑/规则吗？它在字体文件中是完全任意的吗？假设我正在制作一种新字体:是否有任何关于 64px 字体大小的指南？

Answer 1

原来font-size是用所谓的em-square来衡量的，也就是大写M-Character的水平宽度:

The height of the type piece is known as the ‘em’, and it originates from the width of the uppercase ‘M’ character; it was made so that the proportions of this letter would be square (hence the ‘em square’ denomination). (http://designwithfontforge.com/en-US/The_EM_Square.html)

在 CSS 中，font-size在 pt或 px代表，如果有的话，这个 em-square。但:

The other day I looked at a bunch of lesson slides from a university-level typography course. One of them claimed that the distance from the baseline (bottom of a letter such as H) to the cap height (top of a letter such as H) was the point size. I wish that were true, as it would be much simpler than the reality. On average, the cap height is about 70% of the point size. (http://www.thomasphinney.com/2011/03/point-size/)

所以我想你的问题的答案是:这取决于。 em-square 仍然是指导方针，但字体的实际大小很大程度上取决于设计师，并且通常比 em-square 大得多。
或者，您可以尝试在该 70% 标记的基础上进行构建，然后寻找 64 像素(大约为 45 像素)的 70% 作为正常大写字母(例如 H 或 M)的高度。
我还发现此链接对 CSS 中的排版问题非常有帮助:https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align
聚苯乙烯
请注意，这个排版 em-square这两个引号所谈论的与 em 不同-CSS 中的单位。在 CSS 中，em是相对于父容器的字体大小(或浏览器中的默认设置)。