CSS字体大小细节

时间:2012-06-17 18:05:54

标签: html css rendering font-size

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

  1. pt(I.E。12pt)是否标准化?我想我读到的地方是pt = 1/72英寸。但是,photoshop中24pt字体的大小与css中的24pt字体大小明显不同。
  2. font-size究竟是什么决定的?它是一种关于字母大小的非标准化的任意描述还是实际上是指字母的特定高度或宽度属性?
  3. 谢谢Stack!

7 个答案:

答案 0 :(得分:5)

font-size是字体的基线高度(大写H字符的高度)加上它上面的一个小房间(ascender)和它下面的大量房间(下降器)。

对于特定字体大小的特定字体,基线高度始终为相同大小。以下是一些基于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 px。

这是一个jsfiddle,显示了px和pt中资本H的并列比较。

在我见过的大多数PSD中,指定为12pt的字体实际上是12px。但这可能会有所不同。如有疑问,请测量文本的基线高度,然后将其向后转换为px中的字体大小。例如,如果大写H的高度为9px,则字体大小为12px。有时PSD中的抗锯齿使得难以准确测量基线高度。

答案 1 :(得分:3)

你可以从Photoshop和CSS中关于字体大小的类似问题看看here

虽然here你可以找到一个很好的转换表:你可以注意到Photoshop中的PT等同于CSS中的PX ..我认为你不应该在两者中使用PT。

最后,here你可以在排版中读到有关PT历史的一些信息(是的,你的关于1pt = 1/72英寸):)

答案 2 :(得分:2)

通常更好的做法是在CSS中测量字体的字体。就像你问的问题一样,pt size非常随意,并且根据开发人员自己的定义而有所不同。

答案 3 :(得分:2)

  1. CSS 2.1(当前规格)中,pt明确为1/72英寸。但事实却不同,这反映在CSS3 Values and Units draft第5节中。它描述了两种设置,使用不同的“锚单位”。如果像素是锚单位,则英寸(in作为CSS单位)不需要是英寸(物理单位,2.54 mm),因此p的含义也可能不同。这就是为什么CSS中的pt无法与某些软件中的pt匹配的原因之一。

  2. 字体大小是字体的基本属性。它与字符尺寸之间的任何关系都取决于字体设计者,但字体设计当然不是任意的。 CSS 2.1规范相当模糊,但这个表述仍然有用(针对许多常见的误解):“字体大小对应于em square,这是排版中使用的概念。请注意,某些字形可能会在它们的em方块之外出血。“(另一方面,大多数字形仅使用em方块的一小部分。)

答案 4 :(得分:1)

字体中的

“pt”仅适用于打印CSS。 这是一个解释尺寸类型之间所有差异的链接 http://css-tricks.com/css-font-size/

答案 5 :(得分:1)

您可以直接访问CSS上的官方W3C文档,了解font-size属性的具体信息。

关于CSS中pt 的含义的问题official documentation再次显示是,它是1/72英寸。

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

答案 6 :(得分:0)

1)

打印 css中,pt正好是1/72英寸。

屏幕中     css所有内容都是按像素定义的,pt定义为     1 1/3像素。但这在物理测量中有多大,比如英寸     取决于屏幕DPI并且设备之间差异很大。为了这     原因,pt(和其他物理测量,如in,cm等)不是     在屏幕css中很有用。

2)

字体大小是指“em-box”的高度 - 有点     简化这是一个矩形,可以包含所有字母     字体包括上升和下降。个别信件当然会     通常比整个em-box占用更少的空间。例如a     小写字母x将在上方和下方有空格,而小写字母j     可能会填满em-box的整个高度。

字体大小因此表示文本行需要多少垂直空间,但单个字母和字形的尺寸将根据字母和正在使用的字体设计而有所不同。

此外,某些字体可能具有在em框外部扩展(“流血”)的字母,这也是字体设计者的风格选择。例如。字母“Å”经常会在em-box上面流血。