字体大小是如何计算的？
我有一个复杂的 js 函数，其中有一个方程，我实际上需要了解字体大小占用了多少像素空间。
我注意到某些字体的大小因字体而异。
字体大小是如何计算的？如果设置为12px，在css中，12px是什么意思？那是 12px 宽吗？高的？或者是对角线像素测量？
I have a complex js function with an equation in which I actually need to understand how much space in pixels font sizes take up.
I have noticed that some font's sizes are different depending on the font.
How is a font's size calculated? If its set to 12px, in css, what does the 12px mean? Is that 12px wide? High? Or is it a diagonal pixel measurement?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
高度是标准测量
字体高度是通过行的高度来测量或指定的，行的高度是显示字符域所需的完整高度，包括那些低于行的字符，例如
j，以及凸起元素（例如大写字母上的重音符号），例如Ê。（来源：banzaimonkey.net）
< em>字体按出现顺序排列：Times New Roman、Courier New、Calibri、Consolas。
宽度
字形的宽度因字体而异，如上图所示。 比例字体和
固定宽度字体之间也有一个重要区别。对于固定宽度字体，每个字符在行上占用的空间完全相同（尽管字符本身的大小可能不太相同。对于比例字体，每个字符使用的空间更符合它的形状相对于其他字符，因此 i、j 和 l 的范围很窄，而 w、 m 和 o 通常更宽字体
字体本身以不同的方式呈现字形（显然，因为字体看起来不同），这意味着特定的字符不一定会呈现。这也意味着除了渲染字体之外，没有标准方法可以计算出某个字符在任何给定尺寸下的高度，
这对大多数人来说可能并不明显，但如果您检查一下许可条款。您会注意到它们是作为字体软件获得许可的。本质上，每种字体都包含一组算法，用于确定在给定上下文中如何呈现字体（各种大小、粗体、斜体、 ETC。）。
因此，了解字体在给定上下文中如何呈现的最佳方法是呈现它并查看。
大小问题
当您处理网络上的内容时，有一些关于字体大小的注意事项。
对于网络
正如任何优秀的网页设计师都知道的那样，没有什么是平等的。在渲染页面时，有无数的变量发挥作用，这些变量可能会导致用户之间的差异，例如浏览器、默认字体、缩放、平滑、提示、浏览器缩放、操作系统缩放等。A
List Apart（在他们跳过之前） shark）有一些关于标准化字体大小并帮助您在浏览器之间获得某种程度相似性的好文章：
虽然您可以尽职尽责，但您必须接受网络媒体涉及一定程度的可变性，这是您无法控制的。
打印与像素
由于像素通常不是字体的自然比例（打印时使用不同的测量值），因此提示算法可能会将字体渲染一两个像素，特别是在小尺寸时，以便保留字符的形状。
事实上，提示算法在小尺寸下通常是完全不同的，并且在专业工作中，对于 12pt 以下的尺寸，您可能会使用完全不同的字体。
像素也与显示器尺寸相关，因此 12px 在这些显示器上将是不同的物理尺寸：
TL;DR
总而言之，这很复杂。
font-size指的是显示字符范围所需的高度，但在狂野和模糊的互联网中，总是有例外。Height is the Standard Measure
Font height is measured or specified by the height of a line, which is the full height required to display the gamut of characters, including those that dip below the line, like
j, and raised elements (accents on capitals, for instance) likeÊ.(source: banzaimonkey.net)
Fonts in order of appearance: Times New Roman, Courier New, Calibri, Consolas.
Width
Width of glyphs varies between fonts, as you can see in the image above. There is also an important distinction between proportional and
fixed-widthfonts. For fixed-width fonts, the space each character takes up on the line is exactly the same (though the characters themselves may not quite be the same size as one-another. For proportional fonts, the space each character uses is more in line with its shape, relative to other characters, so i, j, and l are vary narrow, while w, m, and o are typically wider.Fonts
Fonts themselves render glyphs in different ways (obviously, since fonts look different), and this means that a particular character will not necessarily render the same height across fonts. It also means that there's no standard way to figure out how tall a certain character might be at any given size, aside from rendering the font.
It's probably not obvious to most, but if you examine the licensing terms for fonts you'll notice that they're licensed as font software. Essentially, each font contains a set of algorithms that determine how the font should be rendered in a given context (various sizes, bold, italics, etc.).
Consequently, the best way to figure out how a font will render in a given context is to render it and see.
Sizing Issues
There are some caveats for font sizes when you're dealing with things on the web.
For the Web
As any good web designer knows, no things are equal. There are countless variables that come into play when rendering a page that may result in differences between users, such as browser, default fonts, zoom, smoothing, hinting, browser scaling, operating system scaling, etc.
A List Apart (before they jumped the shark) has some good articles on standardizing font sizes and helping you get some level of similarity between browsers:
While you can do your due diligence, you'll just have to accept that the web medium involves a certain level of variability that you can't control.
Print vs. Pixels
Because pixels are not typically a natural scale for fonts (different measurements are used for printing), the hinting algorithms may render fonts off by a pixel or two, particularly at small sizes, in order to retain the shape of the characters.
In fact, the hinting algorithm is often completely different at small sizes, and in professional work you'd probably use a different font entirely for sizes below 12pt.
Pixels are also relative to the display size, so 12px will be a different physical size on these displays:
TL;DR
So in summary, it's complicated.
font-sizerefers to the height needed to display the gamut of characters, but in the wild and woolly internet, there are always exceptions.请参阅规范：
See the spec:
这是一个补充答案。我发现此网站中的图表对于了解全局非常有用。
This is a supplemental answer. I found the chart from this site very useful for getting a big picture understanding.
您应该使用
.getClientRects()如果您需要知道一串文本需要多少空间才能在屏幕上显示。您设置的内容和您将获得的大小之间的实际交互有些复杂。 CSS3 规范比其他答案中引用的 CSS2 规范说得更清楚：
基本上，您可以控制“em square”的大小。字体形状是相对于此定义的，但肯定会偏离此框之外/之内（有时显着）。
这只是初学者！即使您假设一种字体与此 em-square 非常匹配 - 您是否只需将字符串长度乘以该大小即可？除非它是等宽的并且您的文本仅是 ASCII，否则您需要担心很多：不同的字符宽度、字距调整和连字、换行行为，当然还有其他更简单的“字符串长度”警告，例如制表符、组合字符和控制代码的 Unicode 。
You should use
.getClientRects()if you need to know how much space a run of text is/will take to display on the screen.The actual interaction between what you set and what size you'll get is somewhat complicated. The CSS3 spec puts it more clearly than the CSS2 spec quoted in other answers:
Basically, you can control the size of the "em square". The font shapes are defined relative to this, but certainly can stray outside/within this box (sometimes significantly).
And that's just for starters! Even if you assume a font that is matched very closely to this em-square — are you just going to multiply the string length by this size? Unless it's monospaced and your text is ASCII-only, you have a lot to worry about: varying character widths, kerning and ligatures, wrapping behaviour, and of course other even simpler "string length" caveats like tabs, Unicode combining characters and control codes.
根据规范 (http://www.w3.org/TR/CSS2/fonts. html)
Per the spec (http://www.w3.org/TR/CSS2/fonts.html)