15

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

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

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

4

5 回答 5

21

身高是标准衡量标准

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

24px 和 12px 的不同字体
（来源：banzaimonkey.net）

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

宽度

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

字体

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

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

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

尺寸问题

当您处理网络上的事情时，有一些关于字体大小的警告。

对于网络

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

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

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

打印与像素

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

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

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

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

TL;博士

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

于 2010-08-16T19:13:43.820 回答
7

见规格：

字体大小对应于 em 方格，这是排版中使用的一个概念。
请注意，某些字形可能会在它们的 em 方格之外流血。

于 2010-08-16T18:06:26.513 回答
4

这是一个补充答案。我发现这个网站上的图表对于了解全局非常有用。

字体大小转换表

于 2017-01-03T02:35:05.230 回答
2

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

字体大小对应于 em 方格，这是排版中使用的一个概念。请注意，某些字形可能会在它们的 em 方格之外流血。

于 2010-08-16T18:08:53.780 回答
2

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

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

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

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

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

于 2013-04-03T19:11:55.600 回答