【问题标题】: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、ptpc)意思是一样的 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) 通过将像素单位与参考像素相关联来锚定。对于印刷媒体和类似的高分辨率设备,锚单位应该是标准物理单位之一(英寸、厘米等)。对于分辨率较低的设备,以及具有异常观看距离的设备,建议将锚单元改为像素单元。对于此类设备,建议像素单位是指最接近参考像素的设备像素的总数。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2013-07-07
      • 2015-02-17
      • 1970-01-01
      • 1970-01-01
      • 2015-09-24
      • 2016-03-07
      • 2013-01-25
      • 1970-01-01
      相关资源
      最近更新 更多