CSS字体大小细节

Kev*_*ang 3 html css rendering font-size

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

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

谢谢堆栈!

Mat*_*lin 5

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

对于特定字体大小的特定字体,基线高度始终为相同大小.以下是一些基于Arial字体测量的示例:

font-size    baseline height
   10           7
   11           8
   12           9
   14           10
Run Code Online (Sandbox Code Playgroud)

理论上,对于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中的抗锯齿使得难以精确测量基线高度.