字体大小是如何计算的？

Question

我有一个复杂的js函数，其中包含一个方程式，我实际上需要了解字体大小占用多少像素空间。

我注意到某些字体的大小根据字体而异。

字体大小是如何计算的？如果在css中设置为12px，那么12px是什么意思？它是12px宽？高？还是对角线像素测量？

- Mechlar

---

你需要知道给定文本会占用多少空间吗？由于如下所述，有些字符可能比一个字母宽度的正方形还要大，但有些字符可能更小，而高度和宽度方面也是另一回事，没有对每个字形的了解，就没有办法计算出准确的公式。如果你关心的是文本的大小，则最好的方法是将其输出（可能隐藏）并测量它的大小。 - Jon Hanna

@UpHelix，你能看到这个页面吗？微软支持页面。我认为它更有用。 - antonio

Answer 1

高度是标准度量

字体高度是通过行高来测量或指定的，这是显示所有字符所需的完整高度，包括那些下沉的字符（如 j）和提升的元素（例如大写字母上的重音符号，如 Ê）。

_{(来源: banzaimonkey.net)}

依次出现的字体: Times New Roman, Courier New, Calibri, Consolas.

宽度

字形的宽度因字体而异，正如上图所示。还有一个重要区别是比例和固定宽度字体。对于固定宽度字体，每个字符在一行中占用的空间完全相同（尽管字符本身可能并不完全相同）。对于比例字体，每个字符使用的空间与其形状更加一致，相对于其他字符，所以i、j和l非常窄，而w、m和o通常比较宽。

字体

字体本身以不同的方式呈现字形（显然，因为字体看起来不同），这意味着特定字符在不同字体中不一定会呈现相同的高度。这也意味着除了渲染字体之外，没有标准方法可以确定某个特定字符在任何给定大小时可能有多高。

对大多数人来说可能不明显，但如果您查看字体的许可条款，您会注意到它们是作为字体软件许可的。基本上，每种字体都包含一组算法，确定在给定上下文中（各种大小、粗体、斜体等）应如何呈现字体。

因此，在确定字体在特定上下文中呈现的最佳方法是将其呈现并查看。

大小问题

处理Web上的内容时，字体大小有一些注意事项。

对于Web

正如任何优秀的Web设计师所知道的那样，没有完全相同的事物。在呈现页面时，可能会存在无数变量，这些变量可能会导致用户之间的差异，例如浏览器，默认字体，缩放，平滑，提示，浏览器缩放，操作系统缩放等。

A List Apart（在他们跳过鲨鱼之前）有一些关于标准化字体大小并帮助您在浏览器之间获得某些相似性的好文章：

• 尺寸很重要(Size Matters)
• 相对字体大小(Relative Font Sizes)
• 文本调整大小检测(Text Resize Detection)
• 将类型设置在Web上到基线网格(Setting Type on the Web to a Baseline Grid)

虽然您可以尽力而为，但您必须接受Web媒介涉及一定程度的不可控制的变化。

印刷与像素

因为像素通常不是字体的自然比例（打印使用不同的度量），所以提示算法可能会在小型字体上将字体呈现出一两个像素的偏差，以保留字符的形状。

实际上，对于小字号来说，提示算法通常完全不同，在专业工作中，您可能会在12pt以下的大小使用完全不同的字体。

像素也与显示器尺寸有关，因此在这些显示器上，12px的物理大小将有所不同：

• 1680x1050分辨率的20英寸显示器
• 1680x1050分辨率的22英寸显示器
• iPhone屏幕
• 黑莓屏幕
• 等等。

TL;DR

总之，这很复杂。font-size指的是显示字符范围所需的高度，但在互联网的实际应用中，总是有例外的情况。

- cbednarski

---

如果您不介意的话，请查看我上面的评论。似乎您在这个主题上有一些权威。 - Bob Spryn

Answer 2

请参阅规范：

字体大小对应于em方块，这是排版中使用的一个概念。
请注意，某些字形可能会超出其em方块。

- SLaks

---

这种微积分方法是否有更新的参考资料？ - Webwoman

Answer 3

这是一个补充回答。我发现这个网站上的图表非常有用，可以帮助你更好地了解字体大小转换。

- Suragch

Answer 4

如果您需要知道文本运行在屏幕上所占用的空间大小，您应该使用.getClientRects()。

设置和实际大小之间的交互有些复杂。CSS3规范比其他答案中引用的CSS2规范更清晰地说明了这一点:

此属性表示字体的字形所需的高度。 对于可缩放字体，字体大小是应用于字体的EM单位的比例因子。

基本上，您可以控制“em方块”的大小。字体形状相对于此定义，但肯定会偏离/在此框内（有时显着）。

而这只是个开始！即使您假设字体与此em-square非常接近-您是否只是将字符串长度乘以此大小？除非它是等宽字体且您的文本仅为ASCII，否则您需要担心很多事情：变化的字符宽度、字距和连字、换行行为，当然还有其他更简单的“字符串长度”警告，例如制表符，Unicode组合字符和控制代码。

- natevw

Answer 5

根据规范(http://www.w3.org/TR/CSS2/fonts.html)，字体大小对应于em方块，这是排版中使用的概念。请注意，某些字形可能会超出其em方块。

- Robert

---

关于 EM 的后续问题。有些设计师与我谈论垂直节奏（vertical rhythm），他们认为在相同的字体大小下，EM 方框将因字体不同而异。但这在我的测试中似乎并不正确。无论使用什么字体，一个 EM 方框等于一定数量的像素。例如，body = 62.5%（10px），1em 字体大小= 10px，无论 font-family 如何。因此，1em始终等于其父元素的计算字体大小，即使您更改了字体系列也是如此。我在这里说得对吗？ - Bob Spryn

@Bob Spryn 我的经验是，在font-size方面，%和em在功能上基本相同，除了小数点的位置。%和em之间的区别是出现在浏览器实现字体缩放（大多数现代浏览器不再使用此功能）而不是光栅缩放的问题上。请参阅http://www.guistuff.com/css/css_units.html。 - cbednarski