CSS字体大小的细节说明

Question

4

我有几个关于字体大小的具体问题：

感谢Stack！

- Kevin Wang

7个回答

3

您可以看一下类似的问题关于Photoshop和CSS字体大小的转换在这里。同时，您也可以在这里找到一个很好的转换表：您会发现Photoshop中的PT相当于CSS中的PX。我认为您不应该在两者中都使用PT。

最后，在这里，您可以了解有关印刷排版中PT历史的一些内容（是的，1pt = 1/72英寸）。 :)

- Erenor Paz

2

在CSS中，通常最好使用像素来测量字体。就像你问的那个问题一样，pt大小是相当任意的，并且因开发人员自己的定义而异。

- DrinkJavaCodeJava

2

在当前的CSS 2.1规范中，pt是一英寸的1/72。然而现实情况并非如此，在CSS3 Values and Units draft第5节中影响到了这一点，它描述了两种使用不同“锚定单位”的设置。如果像素是锚定单位，则英寸（CSS单位in）不需要是一个英寸（物理单位，2.54毫米），因此p的含义也可能会有所不同。这就是为什么CSS中的pt可能与某些软件中的pt不匹配的原因之一。
字体大小是字体的基本属性。它与字符的尺寸之间的关系取决于字体设计师，但字体设计当然不是任意的。CSS 2.1规范表述比较模糊，但公式仍然很有用（反对许多常见的误解）：“字体大小对应于em方格，这是排版中使用的概念。请注意，某些字形可能会超出它们的em方格。”（另一方面，大多数字形只使用em方格的一小部分。）

- Jukka K. Korpela

1

在字体中，“pt”仅用于打印CSS。以下链接解释了各种大小类型之间的所有差异http://css-tricks.com/css-font-size/

- treng

1

您可以直接前往官方的W3C CSS文档了解font-size属性的详细内容。

至于您在CSS中提到的pt的含义，官方文档再次证明，是1/72英寸。

请记住，在不同的应用程序中，您可以放大屏幕，因此更多地考虑这些值是针对打印而不是屏幕媒体的。

- Ray Toal

那么，“绝对长度”的计算值意味着字体大小决定了字母的长度吗？ - Kevin Wang

0

1）

在打印样式表(print css)中，pt（点）恰好等于1/72英寸。

而在屏幕样式表(screen css)中，所有的元素都是以像素为单位定义的，其中1个pt被定义为1 1/3像素。但是，这在物理测量单位上，比如英寸，取决于屏幕DPI，并且在不同设备之间差异很大。因此，在屏幕样式表中，pt（以及其他物理测量单位，如in、cm等）并不那么有用。

2）

字体大小(font-size)指的是“em-box”(字体框)的高度。简单来说，字体框是可以包含字体中所有字母，包括升降部分的矩形框。当然，单个字母通常所占空间会小于整个em-box。例如，小写字母x会有上下间距，而小写字母j可能会填满整个em-box的高度。

因此，字体大小表示了一行文本所需的垂直空间量。但是，每个字母和字形的尺寸相对于其他字母和字形的尺寸因字母的不同和所使用字体的设计而异。

此外，一些字体可能具有扩展（“出血”）甚至超出 em 箱的字母，这也是字体设计师的风格选择。例如字母 “Å” 经常会超出 em 箱的上方。

- JacquesB

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Matt Coughlin · Accepted Answer

字体大小是字体的基线高度（大写H字符的高度）加上一些空间（升高线）和更多的空间（降低线）。

对于特定字体和特定字号，基线高度将始终保持相同。以下是一些根据Arial字体测量的示例：

font-size    baseline height
   10           7
   11           8
   12           9
   14           10

理论上，对于CSS来说，pt是px中大概的基线高度近似值。例如，font-size:9pt的基线高度为9px，相当于font-size:12px。实际上，我有时发现pt比基线高度大0.5到1.0像素。

这里有一个jsfiddle，显示了px和pt大小的H之间的并排比较。

在我看过的大多数PSD文件中，指定为12pt的字体实际上是12px。但这可能会有所不同。如有疑问，请测量文本的基线高度，并从中向后转换为px的字体大小。例如，如果大写字母H的高度为9px，则字体大小为12px。有时PSD中的抗锯齿处理使得准确测量基线高度变得困难。