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

标签 css pixel font-size points

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

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

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

最佳答案

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…

关于css - 浏览器如何将基于点的字体大小转换为像素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29891166/

相关文章:

ios - 平滑 ImageView 中的曲线和文本

c++ - 从图像中获取不正确的读数

css - font-size 真正对应的是什么?

WPF 在 TextBlock 上设置默认样式会覆盖标签的样式

Silverlight WP7 工具包,DatePicker\TimePicker 字体大小问题

javascript - 悬停时显示外部 div

javascript - 如何通过在 javascript 中单击按钮来更改 css 类?

javascript - 如何在不使用宽​​度和高度属性的情况下制作完整的 div?

wordpress - 用于 WordPress 辅助功能的 Google 标签管理器

python - OpenCV:像素数与行数*列数