如何计算字体大小？

Question

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

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

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

Answer 1

高度是标准尺度

字体高度由线条的高度测量或指定，线条的高度是显示字符色域所需的全部高度，包括低于线条的字符，如j和凸起元素（重音符号）例如，像Ê一样的大写字母。

Different fonts at 24px and 12px http://media.banzaimonkey.net/images/forums/font-sizes.png 出现顺序的字体：Times New Roman，Courier New，Calibri，Consolas。

宽度

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

字体

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

对大多数人来说可能并不明显，但如果你检查字体的许可条款，你会发现它们被许可为字体软件。从本质上讲，每种字体都包含一组算法，用于确定字体在给定上下文中的呈现方式（各种大小，粗体，斜体等）。

因此，弄清楚字体在给定上下文中的呈现方式的最佳方法是渲染它并查看。

调整大小问题

当您处理网络上的内容时，对字体大小有一些警告。

对于网络

任何优秀的网页设计师都知道，没有任何事情是平等的。在呈现可能导致用户之间差异的页面时会出现无数变量，例如浏览器，默认字体，缩放，平滑，提示，浏览器缩放，操作系统缩放等。

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指的是显示字符范围所需的高度，但在狂野和毛茸茸的互联网中，总会有例外情况。

Answer 2

请参阅spec：

  

字体大小对应于em   广场，印刷术中使用的概念   请注意，某些字形可能会出血   在他们的em广场之外。

Answer 3

根据规范（http://www.w3.org/TR/CSS2/fonts.html）

  

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

em square的大小解释为：http://www.emdpi.com/emsquare.html

Answer 4

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

Answer 5

如果您需要知道屏幕上显示的文本空间占用多少空间，则应使用.getClientRects()。

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

  

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

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

这只适合初学者！即使你假设一个与这个em-square非常接近的字体 - 你是否只想将字符串长度乘以这个大小？除非它是等宽的并且你的文本只有ASCII，你还有很多需要担心：不同的字符宽度，字距调整和连字，包装行为，当然还有其他更简单的“字符串长度”警告，如标签，Unicode组合字符和控制代码