字体大小是如何计算的？

Posted 2023-03-15

【中文标题】字体大小是如何计算的？

【英文标题】：How is font size calculated?

【发布时间】：2011-03-30 13:55:55

【问题描述】：

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

我注意到有些字体的大小因字体而异。

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

【问题讨论】：

您是否需要知道给定的一段文本将占用多少？由于不仅某些字符可以大于下面提到的 em 正方形，而且某些字符可以更小，并且高度-宽度方面完全是另一回事，所以在不了解所使用的每个字形的情况下，没有公式可以解决这个问题。如果它是您关心的一段文本的大小，最好的办法是简单地输出它（可能隐藏）然后测量。

@UpHelix，你能看到这个页面吗？ Microsoft support page。我认为它更有用。

【参考方案1】：

身高是标准衡量标准

字体高度由行的高度来衡量或指定，它是显示字符范围所需的全部高度，包括那些低于行的字符，如j，以及凸起的元素（大写的重音，例如）像Ê。

_{（来源：banzaimonkey.net）}

按出现顺序排列的字体：Times New Roman、Courier New、Calibri、Consolas。

宽度

字形的宽度因字体而异，如上图所示。 proportional 和fixed-width 字体之间还有一个重要区别。对于固定宽度字体，每个字符在行上占用的空间完全相同（尽管字符本身的大小可能不完全相同。对于比例字体，每个字符使用的空间更符合它的形状，相对于其他字符，所以 i、j 和 l 各不相同，而 w、 m 和 o 通常更宽。

字体

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

这对大多数人来说可能并不明显，但如果您查看字体的许可条款，您会发现它们是作为字体软件获得许可的。本质上，每种字体都包含一组算法，这些算法决定了字体在给定上下文中的呈现方式（各种大小、粗体、斜体等）。

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

尺寸问题

在处理 Web 上的内容时，需要注意字体大小。

对于网络

任何优秀的网页设计师都知道，没有什么是平等的。渲染页面时有无数变量会发挥作用，这些变量可能会导致用户之间的差异，例如浏览器、默认字体、缩放、平滑、提示、浏览器缩放、操作系统缩放等。

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

Size Matters Relative Font Sizes Text Resize Detection Setting Type on the Web to a Baseline Grid

虽然您可以尽职尽责，但您只需要接受网络媒体包含您无法控制的一定程度的可变性。

打印与像素

因为像素通常不是字体的自然比例（打印时使用不同的测量值），所以提示算法可能会将字体渲染一两个像素，尤其是在小尺寸时，以保持字符的形状。

事实上，小字体的提示算法通常完全不同，在专业工作中，您可能会为 12pt 以下的字体使用完全不同的字体。

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

20" 显示器，1680x1050 22" 显示器，1680x1050 iPhone 屏幕 黑莓屏幕 等

TL;DR

总而言之，这很复杂。 font-size是指显示字符的色域所需的高度，但在狂野的互联网上，总是有例外的。

【讨论】：

如果您不介意，请参阅我上面的评论。看来你在这个问题上有一定的权威。

【参考方案2】：

见spec：

字体大小对应于em 正方形，用于排版的概念。 请注意，某些字形可能会流血 在他们的 em 方格之外。

【讨论】：

最近有没有关于这种微积分方法的参考资料？

【参考方案3】：

这是一个补充答案。我发现来自this site 的图表对于了解全局非常有用。

【参考方案4】：

如果您需要知道在屏幕上显示一行文本需要/将占用多少空间，您应该使用.getClientRects()。

您设置的内容与您将获得的大小之间的实际交互有些复杂。 CSS3 规范比其他答案中引用的 CSS2 规范更清楚：

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

基本上，您可以控制“em square”的大小。字体形状是相对于此定义的，但肯定会在此框外/内（有时很明显）。

这只是初学者！即使你假设一个字体与这个 em-square 非常匹配——你只是要把字符串长度乘以这个大小吗？除非它是等宽的并且你的文本是纯 ASCII 的，否则你有很多事情要担心：不同的字符宽度、字距和连字、换行行为，当然还有其他更简单的“字符串长度”警告，如制表符、Unicode 组合字符和控制代码.

【参考方案5】：

根据规范 (http://www.w3.org/TR/CSS2/fonts.html)

字体大小对应于em 正方形，用于排版的概念。 请注意，某些字形可能会流血 在他们的 em 方格之外。

【讨论】：

在 EM 上跟进问题。有设计师跟我谈垂直节奏。他们认为在相同的字体大小下，em 框会因字体而异。在我的测试中，这似乎不是真的。无论字体是什么，一个 EM 框都相当于一定数量的像素。例如。 body = 62.5% (10px) 1em 字体大小 = 10px，无论字体系列如何。因此 1em 始终等于其父元素的计算字体大小，即使您更改了字体系列。我说的对吗？

@Bob Spryn 根据我的经验，font-size、% 和 em 在功能上是相同的，除了小数点的位置。 % 和 em 之间的区别是作为使用字体缩放（大多数当前浏览器不再这样做）而不是光栅缩放的浏览器的实现问题而出现的。见guistuff.com/css/css_units.html