【问题标题】:How do browsers convert a point-based font-size to pixels?浏览器如何将基于点的字体大小转换为像素?
【发布时间】:2015-07-05 15:15:54
【问题描述】:
如果浏览器必须处理以下 CSS:
font-size: 12pt;,
它如何计算屏幕上的有效尺寸?它可以知道屏幕的 dpi(通过某些操作系统功能)还是只是一个近似值?
如果它是一个近似值 - 它总是相同的 (12pt = 16px) 吗?
有浏览器程序员团队写过这个吗? (参考会很棒)
【问题讨论】:
标签:
css
pixel
font-size
points
【解决方案1】:
CSS 提供了许多不同的单位来表示长度。一些
有他们在排版方面的历史,例如点 (pt) 和 pica (pc),
其他是从日常使用中知道的,例如厘米 (cm) 和英寸
(在)。而且还有专门发明的“魔法”单元
对于 CSS:px。这是否意味着不同的属性需要不同的
单位?
不,单位与属性无关,但一切
输出媒体:屏幕或纸张。
对于可以在哪里使用哪些单位没有限制。如果一个
属性接受以 px 为单位的值(边距: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…
【解决方案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) 通过将像素单位与参考像素相关联来锚定。对于印刷媒体和类似的高分辨率设备,锚单位应该是标准物理单位之一(英寸、厘米等)。对于分辨率较低的设备,以及具有异常观看距离的设备,建议将锚单元改为像素单元。对于此类设备,建议像素单位是指最接近参考像素的设备像素的总数。