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

Question

如果浏览器需要处理以下CSS：font-size: 12pt;，它如何计算在屏幕上的有效大小？它能否通过某些操作系统功能知道屏幕的dpi或者它只是一个近似值？

如果这是一个近似值 - 它是否总是相同的（12pt = 16px）？

是否有一些浏览器程序员团队写过这个问题？（引用将很好）

- Teetrinker

---

http://www.w3.org/TR/css3-values/#absolute-lengths - Alexey Ten

https://css-tricks.com/css-font-size/ - G.L.P

http://www.w3.org/Style/Examples/007/units.en.html - G.L.P

谢谢Amit，如果你写了答案，我会选中它。 - Teetrinker

Answer 1

CSS提供了许多不同的长度单位。其中一些源于排版，例如点（pt）和派卡（pc），其他则来自日常使用，例如厘米（cm）和英寸（in）。还有一个“神奇”的单位是专门为CSS发明的：像素（px）。这是否意味着不同的属性需要不同的单位？不，单位与属性无关，但与输出介质有关：屏幕或纸张。在哪里可以使用哪些单位没有限制。如果属性接受px值（margin: 5px），它也接受英寸或厘米的值（margin: 1.2in; margin: 0.5cm），反之亦然。绝对单位之间的关系如下：1英寸= 2.54厘米= 25.4毫米= 72点= 6pc。所谓的绝对单位（cm、mm、in、pt和pc）在CSS中与任何其他地方都是相同的，但仅当您的输出设备具有足够高的分辨率时才是如此。在激光打印机上，1厘米应该恰好是1厘米。但在低分辨率设备上，例如计算机屏幕上，CSS并不要求如此。实际上，结果往往因设备而异，并且从一个CSS实现到另一个CSS实现也会有所不同。最好将这些单位保留给高分辨率设备，特别是用于印刷输出。在计算机屏幕和手持设备上，您可能无法获得预期的结果。

另外，由于在屏幕上（来自上文）只能近似显示pt单位，因此不建议在屏幕媒体上使用。

来源： EM、PX、PT、CM、IN...

- Ashesh

Answer 2

最清晰的陈述在这篇文章中被发现：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）通过将像素单位与参考像素相关联来进行锚定。对于印刷媒体和类似的高分辨率设备，锚定单位应为标准物理单位之一（英寸、厘米等）。对于低分辨率设备和视距不同的设备，建议使用像素单位作为锚定单位。对于这样的设备，建议像素单位指整数个设备像素，最接近参考像素。

- Teetrinker