字体大小真正对应什么? [英] What does font-size really correspond to?

问题描述

我正在尝试查找font-size CSS属性中设置的值对应于什么.

I am trying to find what the value set in the font-size CSS property is corresponding to.

要给出上下文，我想在CSS中获得我从OS/2指标中知道的部分字体的字体(c1)(大写字母高度以上和基线以下). em单位是相对于给定的font-size，而OS/2度量是相对于em-square的.

To give the context, I want to get in CSS the size in em of parts of the font (above the capital height and under the baseline) that I know from its OS/2 metrics. The em unit is relative to the given font-size and the OS/2 metrics are relative to the em-square.

我的期望基于以下参考.我没有发现更清晰或更精确的东西.

My expectations are based on the following references. I did not found anything more clear or precise.

1. 根据 在CSS2.1中，并在我在该主题中发现的所有Stack Overflow问题(此处和此处):

1. According to the W3C reference for font-size in CSS2.1, and as quoted in all the Stack Overflow questions I found on the topic (here, here and here):

字体大小对应于em正方形，即排版中使用的概念.请注意，某些字形可能会在其em方块之外流血.

The font size corresponds to the em square, a concept used in typography. Note that certain glyphs may bleed outside their em squares.

在我对字体的了解不多的情况下，em square是字体度量的整个平方，其中定义了升序，降序，间距(等)行.在OS/2指标中，em square是字体本身的大小(通常为1000或2048 UPM).

Following the few knowledges I have in typography, the em square is the entire square of font metrics in which ascending, descending, gaps, (etc...) lines are defined. In OS/2 metrics, the em square is the size of the font itself (often 1000 or 2048 UPM).

_{(来源: microsoft.com )}

_{(source: microsoft.com)}

我从W3C中找到的唯一解释是在 1997年的旧参考文献中CSS1 ，并且与我使用的em square的现代数字定义保持一致:

The only explanation I found from W3C is in an old reference from 1997 for CSS1, and it is coherent with the modern digital definition of em square I use:

某些值(例如宽度度量)以相对于抽象正方形的单位表示，抽象正方形的高度是相同类型大小的类型行之间的预期距离.这个正方形称为EM正方形. (...)常用值为250(Intellifont)，1000(Type 1)和2048(TrueType).

Certain values, such as width metrics, are expressed in units that are relative to an abstract square whose height is the intended distance between lines of type in the same type size. This square is called the EM square. (...) Common values are 250 (Intellifont), 1000 (Type 1) and 2048 (TrueType).

因此，如果我正确理解了这些引用，则应该使用在font-size 中指定的值生成字体的 entire em square ，我们应该能够根据字体的大小和指标来计算字体的一部分的大小.

So if I understand these references correctly, the value specified in font-size should be used to generate the entire em square of the font, and we should be able to calculate the size of a part of the font from the font's size and metrics.

例如，使用...

.my-letter {
    font-family: 'Helvetica Neue';
    font-size: 100px;
    text-transform: uppercase;
}

...我们应该将em square设置为100px，并且由于Helvetica Neue的资本高度为714 / 1000(在OS/2表中为sCapHeight)，因此资本高度为71.4px

... we should have an em square of 100px, and because Helvetica Neue has a Capital Height of 714 / 1000 (sCapHeight in the OS/2 table), a capital height of 71.4px.

生成的em square比font-size 更大(已在适用于Mac的最新版本的Chrome，Firefox和Safari上进行了测试).起初，我以为浏览器还有另一个em square定义，并且使字母的 part 等于font-size，但是我没有找到任何OS/2度量标准(使用或没有与之匹配的上升，下降，间隙...).

The generated em square is bigger than font-size (tested on the latest versions of Chrome, Firefox and Safari for Mac). At first, I thought that the browser had an other definition of em square and was making a part of the letter equal to font-size, but I did not found any OS/2 metrics (with or without ascender, descender, gaps...) that matches with it.

您还可以看到此CodePen .请注意，我使用line-height: 1;突出显示了预期的尺寸，但是我的问题是使用font-size(渲染墨水")而不是使用line-height(碰撞盒").由于我已经被误解了好几次了，所以我必须指出这一点. line-height不是问题.

You can also see this CodePen. Please note that I use line-height: 1; to highlight the expected size, but my problem is with font-size (the "rendered ink") and not line-height (the "collision box"). This is something I have to precise because I have already been misunderstood several times. line-height is not the problem.

所以我有三个问题:

• 我是否正确理解了W3C参考资料，或者我假设这些参考资料没有说明?
• 如果不是，为什么生成的字体的em-square大于font-size?
• 最重要的是:我怎么知道渲染的em-square的大小(相对于font-size)?

• Did I understood correctly the W3C references, or I am assuming things that these references did not said?
• If not, why does the generated font have an em-square greater than font-size?
• The most important: How could I know the size of the rendered em-square (relatively to the font-size) ?

谢谢您的帮助.

推荐答案

您对W3C参考的理解是正确的，但您对红色框的理解却不正确.

Your understanding of the W3C references is correct, but your understanding of the red box is not.

红色框未描绘出em-square.它的高度是度量值上升和下降的总和.

The red box does not depict the em-square. Its height is the sum of the ascent and descent from the metrics.

这篇关于字体大小真正对应什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！