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

Question

如果浏览器必须处理以下 CSS:字体大小:12pt;,它如何计算屏幕上的有效尺寸？它可以知道屏幕的 dpi(通过某些操作系统功能)还是只是一个近似值？

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

有一些浏览器程序员团队写过这个吗？ (有引用就好了)

Answer 1

CSS offers a number of different units for expressing length. Some have their history in typography, such as point (pt) and pica (pc), others are known from everyday use, such as centimeter (cm) and inch (in). And there is also a “magic” unit that was invented specifically for CSS: the px. Does that mean different properties need different units?

No, the units have nothing to do with the properties, but everything with the output media: screen or paper.

There is no restriction on which units can be used where. If a property accepts a value in px (margin: 5px) it also accepts a value in inches or centimeters (margin: 1.2in; margin: 0.5cm) and vice-versa.

The relation between the absolute units is as follows: 1in = 2.54cm = 25.4mm = 72pt = 6pc

The so-called absolute units (cm, mm, in, pt and pc) mean the same in CSS as everywhere else, but only if your output device has a high enough resolution. On a laser printer, 1cm should be exactly 1 centimeter. But on low-resolution devices, such as computer screens, CSS doesn't require that. And indeed, the result tends to be different from one device to another and from one CSS implementation to another. It's better to reserve these units for high-resolution devices and in particular for printed output. On computer screens and handheld devices, you'll probably not get what you expect.

此外，由于 pt 中的单位只能在屏幕上近似(来自上面的文本)，因此不建议在屏幕媒体上使用。

来源: EM, PX, PT, CM, IN…