浏览器如何将基于点的字体大小转换为像素?

时间:2015-04-27 08:52:58

标签: css pixel font-size points

如果浏览器必须处理以下CSS: font-size: 12pt;, 它如何计算屏幕上的有效尺寸?它能知道屏幕的dpi(通过一些OS功能)还是只是近似值?

如果是近似值 - 它是否总是相同的(12pt = 16px)?

有些浏览器程序员团队会写这个吗? (参考会很棒)

2 个答案:

答案 0 :(得分:1)

  

CSS提供了许多用于表达长度的不同单位。一些   有他们的排版历史,如点( pt )和异食癖( pc ),   其他人从日常使用中知道,例如厘米( cm )和英寸   (的)。而且还有一个专门发明的“神奇”单位   对于CSS: px 。这是否意味着不同的属性需要不同   单元?

     

不,单位与属性无关,而是一切   使用输出媒体:屏幕或纸张。

     

在哪里可以使用哪些单位没有限制。如果一个   property接受px(margin:5px)中的值,它也接受一个值   以英寸或厘米为单位(边距:1.2英寸;边距:0.5厘米)和   反之亦然。

     

绝对单位之间的关系如下:1in = 2.54cm = 25.4mm = 72pt = 6pc

     

所谓的绝对单位 cm,mm,in,pt pc )的含义相同   CSS与其他地方一样,但仅限于您的输出设备有高   足够的分辨率。在激光打印机上,1cm应该是1   厘米。但在低分辨率设备上,例如电脑屏幕,   CSS并不需要这样做。 事实上,结果往往是不同的   从一个设备到另一个设备,从一个CSS实现到另一个。   最好为高分辨率设备预留这些设备   特别适用于印刷输出。在电脑屏幕和手持设备上   设备,你可能得不到你期望的。

另外,因为pt中的单位只能在屏幕上显示(来自上面的文字),所以不建议在屏幕媒体上使用。

<强>来源: EM, PX, PT, CM, IN…

答案 1 :(得分:1)

本文中发现了最明确的陈述:http://www.w3.org/Style/Examples/007/units.en.htm (谢谢@Amit。)

  

过去,CSS要求实现即使在计算机屏幕上也能正确显示绝对单位。但是由于不正确的实现数量超过了正确数量并且情况似乎没有改善,因此CSS在2011年放弃了这一要求。目前,绝对单位必须仅在打印输出和高分辨率设备上正常工作。

     

事实上,CSS要求1px在所有打印输出中必须恰好是1/96英寸。 CSS认为,与屏幕不同,打印机不需要为px设置不同的尺寸即可打印清晰的线条。因此,在打印介质中,px不仅具有从一个设备到另一个设备的相同视觉外观,而且实际上它是可测量的相同(正如cm,pt,mm,in和pc,如上所述)。

从这里开始:w3.org/TR/css3-values/#absolute-lengths (谢谢@Alexey)

  

当输出环境已知时,它们[绝对长度单位]主要有用。

     

对于CSS设备,这些维度要么锚定(i)通过将物理单元与其物理测量相关联,或者(ii)通过将像素单元与参考像素相关联来锚定。对于打印介质和类似的高分辨率设备,锚单元应该是标准物理单位之一(英寸,厘米等)。对于分辨率较低的设备和具有不寻常观看距离的设备,建议将锚单元作为像素单元。对于这样的设备,建议像素单元参考最接近参考像素的设备像素的整数。