字体尺寸如何计算？

Question

我具有一个复杂的JS功能，具有一个方程式，实际上我需要了解像素字体尺寸所需的空间。

我注意到某些字体的尺寸有所不同，具体取决于字体。

字体的尺寸如何计算？如果将其设置为 12px, ，在CSS中，什么是 12px 意思是？就是它 12px 宽的？高的？还是对角像素测量值？

Answer 1

看到 规格:

字体大小对应于EM Square，这是版式中使用的概念。
请注意，某些字形可能会在其EM正方形外流血。

Answer 2

高度是标准措施

字体高度由线的高度测量或指定，这是显示角色范围所需的全高，包括倾斜在线以下的字符，就像 j, ，并提高元素（例如，大写字母的重音） Ê.

_{（来源： banzaimonkey.net)}

字体按外观顺序：时代新罗马，Courier New，Calibri，Consolas。

宽度

正如您在上图中看到的，字形之间的宽度在字体之间有所不同。在 成比例的 和 fixed-width 字体。对于固定宽度字体，每个字符在行上占据的空间完全相同（尽管字符本身可能与另一个角色的大小不完全相同。对于比例字体，每个字符使用的空间都与众不同。相对于其他字符的形状，所以 一世, j, ， 和 l 变狭窄，而 w, m, ， 和 o 通常更宽。

字体

字体本身以不同的方式呈现字形（显然，因为字体看起来不同），这意味着特定字符不一定会在跨字体上呈现相同的高度。这也意味着没有标准方法可以弄清楚某个特定字符在任何给定尺寸的高度之外，除了呈现字体外。

对于大多数人来说，这可能并不明显，但是如果您检查字体的许可条款，您会注意到它们被许可为 字体软件. 。从本质上讲，每个字体都包含一组算法，这些算法确定应该如何在给定上下文（各种尺寸，粗体，斜体等）中呈现字体。

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

大小问题

当您在网络上处理内容时，有一些警告的字体尺寸。

对于网络

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

列表分开（在他们跳下鲨鱼之前）有一些关于标准化字体尺寸并帮助您获得的好文章 一些 浏览器之间的相似程度：

• 大小事项
• 相对字体大小
• 文本调整检测大小
• 将网络设置为基线网格

尽管您可以进行尽职调查，但您只需要接受Web媒体涉及无法控制的一定程度的可变性即可。

打印与像素

由于像素通常不是字体的自然刻度（用于打印不同的测量值），因此提示算法可能会使一个或两个或两个像素（尤其是在小尺寸的小像素）中启用字体，以保留字符的形状。

实际上，暗示算法在小尺寸上通常完全不同，并且在专业工作中，您可能会完全使用不同的字体来适用于12pt以下的尺寸。

像素也相对于显示大小，因此12px将是这些显示的物理大小不同：

• 20“ 1680x1050的监视器
• 22“ 1680x1050的监视器
• iPhone屏幕
• 黑莓屏幕
• 等等

tl; dr

因此，总而言之，这很复杂。 font-size 是指显示角色范围所需的高度，但是在野生和羊毛的互联网中，总有例外。

Answer 3

这是一个补充答案。我从 这个网站 对于获得大图的理解非常有用。

Answer 4

根据规格（http://www.w3.org/tr/css2/fonts.html)

字体大小对应于EM Square，这是版式中使用的概念。请注意，某些字形可能会在其EM正方形外流血。

EM广场的大小解释了： http://www.emdpi.com/emsquare.html

Answer 5

您应该使用 .getClientRects() 如果您需要知道文本运行的空间是/将要在屏幕上显示的空间。

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

该属性指示字形从字体的所需高度。对于可扩展字体，字体大小是应用于字体的EM单元的比例因子。

基本上，您可以控制“ EM Square”的大小。字体形状是相对于此定义的，但肯定会在此盒子内部/内部散布（有时显着）。

那只是为了初学者！即使您假设具有与此EM平方非常匹配的字体 - 您是否只是将字符串长度乘以此大小？除非它是单独的，并且您的文本仅是ASCII，否则您有很多要担心的要担心：不同的角色宽度，kerning和rigatures，包装行为，当然还有其他更简单的“字符串长度”警告，例如Tabs，Unicode，Unicode组合角色和控制代码。