我有一个复杂的 js 函数，其中包含一个等式，我实际上需要了解以像素为单位的字体大小占用了多少空间。
我注意到有些字体的大小因字体而异。
字体的大小是如何计算的？如果它设置为12px，在css中，12px是什么意思？那是12px 宽吗？高的？或者是对角像素测量？
【问题讨论】：
标签： css fonts font-size pixels typography
字体高度由行的高度来衡量或指定，它是显示字符范围所需的全部高度，包括那些低于行的字符，如j，以及凸起的元素（大写的重音，例如）像Ê。
（来源：banzaimonkey.net）
按出现顺序排列的字体：Times New Roman、Courier New、Calibri、Consolas。
字形的宽度因字体而异，如上图所示。 proportional 和fixed-width 字体之间还有一个重要区别。对于固定宽度字体，每个字符在行上占用的空间完全相同（尽管字符本身的大小可能不完全相同。对于比例字体，每个字符使用的空间更符合它的形状，相对于其他字符，所以 i、j 和 l 各不相同，而 w、 m 和 o 通常更宽。
字体本身以不同的方式呈现字形（显然，因为字体看起来不同），这意味着特定字符不一定会在字体之间呈现相同的高度。这也意味着除了渲染字体之外，没有标准的方法可以确定某个字符在任何给定大小下的高度。
这对大多数人来说可能并不明显，但如果您查看字体的许可条款，您会发现它们是作为字体软件获得许可的。本质上，每种字体都包含一组算法，这些算法决定了字体在给定上下文中的呈现方式（各种大小、粗体、斜体等）。
因此，确定字体在给定上下文中如何呈现的最佳方法是呈现并查看。
在处理 Web 上的内容时，需要注意字体大小。
任何优秀的网页设计师都知道，没有什么是平等的。渲染页面时有无数变量会发挥作用，这些变量可能会导致用户之间的差异，例如浏览器、默认字体、缩放、平滑、提示、浏览器缩放、操作系统缩放等。
A List Apart（在他们跳过鲨鱼之前）有一些关于标准化字体大小和帮助您在浏览器之间获得某种级别的相似性的好文章：
虽然您可以尽职尽责，但您只需要接受网络媒体包含您无法控制的一定程度的可变性。
因为像素通常不是字体的自然比例（打印时使用不同的测量值），所以提示算法可能会将字体渲染一两个像素，尤其是在小尺寸时，以保持字符的形状。
事实上，小字体的提示算法通常完全不同，在专业工作中，您可能会为 12pt 以下的字体使用完全不同的字体。
像素也与显示器尺寸相关，因此 12px 在这些显示器上将是不同的物理尺寸：
总而言之，这很复杂。 font-size是指显示字符的色域所需的高度，但在狂野的互联网上，总是有例外的。
【讨论】：
见spec：
字体大小对应于em 正方形，用于排版的概念。
请注意，某些字形可能会流血 在他们的 em 方格之外。
【讨论】：
这是一个补充答案。我发现来自this site 的图表对于了解全局非常有用。
【讨论】：
如果您需要知道在屏幕上显示一行文本需要/将占用多少空间，您应该使用.getClientRects()。
您设置的内容与您将获得的大小之间的实际交互有些复杂。 CSS3 规范比其他答案中引用的 CSS2 规范更清楚：
此属性指示字形相对于字体的所需高度。 对于可缩放字体，字体大小是应用于 EM 的缩放因子 字体单位。
基本上，您可以控制“em square”的大小。字体形状是相对于此定义的，但肯定会在此框外/内（有时很明显）。
这只是初学者！即使你假设一个字体与这个 em-square 非常匹配——你只是要把字符串长度乘以这个大小吗？除非它是等宽的并且你的文本是纯 ASCII 的，否则你有很多事情要担心：不同的字符宽度、字距和连字、换行行为，当然还有其他更简单的“字符串长度”警告，如制表符、Unicode 组合字符和控制代码.
【讨论】：
根据规范 (http://www.w3.org/TR/CSS2/fonts.html)
字体大小对应于em 正方形，用于排版的概念。 请注意，某些字形可能会流血 在他们的 em 方格之外。
【讨论】：
font-size、% 和 em 在功能上是相同的，除了小数点的位置。 % 和 em 之间的区别是作为使用字体缩放（大多数当前浏览器不再这样做）而不是光栅缩放的浏览器的实现问题而出现的。见guistuff.com/css/css_units.html