Webkit 和亚像素值，解决方法？答案

【问题标题】：Web-Kit and sub-pixel values, workaround?Webkit 和亚像素值，解决方法？
【发布时间】：2011-04-13 21:12:14
【问题描述】：

我注意到像 Chrome 和 Safari (Windows) 这样的 Web-kit 浏览器倾向于将 em 值四舍五入到最接近的像素，而 Firefox、IE、?歌剧？可以使用子像素值。这通常不是什么大问题，但是当我使用 em 来精确对齐字母间距或使用文本阴影在不同的客户端分辨率中获得一致的效果时，这让我很头疼。看看下面的测试用例。

您会看到，在 FF 中，即使是最小的字母仍然有阴影，而 Chrome 将 em 值向下舍入为零，前两段没有阴影。

编辑这与单位无关。如果将 0.03em 替换为 0.9, 0.8, 0.7 .. px FF 会显示越来越小的阴影，而当 Chrome 低于 1px 时它会突然不显示任何内容。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="bg" xml:lang="bg" xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <style type="text/css">body {font-size: 18px;} p {color: cyan; text-shadow: -0.03em -0.03em 0 rgb(0, 0, 0);}</style>
</head>
<body>

<p style="font-size:1em">No Shadow Test</p>
<p style="font-size:1.5em">No Shadow Test</p>
<p style="font-size:2em">Test</p>
<p style="font-size:2.5em">Test</p>
<p style="font-size:3em">Test</p>
<p style="font-size:3.5em">Test</p>
<p style="font-size:4em">Test</p>
<p style="font-size:4.5em">Test</p>
<p style="font-size:5em">Test</p>

</body>

</html>

【问题讨论】：

我不会依赖像素完美的设计。他们实现它们的唯一方法是使用图像......
我的设计就是一切，但像素完美。我不在任何地方使用像素。
em 基于m 的高度和当前字体大小。因为这是基于像素的，所以em。
@Blender：其实我认为你的意思是em是基于当前字体中大写M的宽度。 Originally the unit was derived from the width of the capital "M" in the currently used typeface - Wiki。这就是为什么在元素使用相对于字体的单位时，应该使用 em 作为宽度值，使用 ex 作为高度值。
@avok00：如果将其设置为 1.2px、1.6px 等会怎样？这将验证它确实是一个舍入错误。

标签： css subpixel

【解决方案1】：

我建议的第一件事是您使用ex units 作为y 坐标和高度值，因为字体可能有一个单独的x-heights。这可能有助于曲线舍入误差对您有利，但可能不会。最坏的情况是它至少对字体本身是准确的。

其次，不幸的是，我在规范中找不到任何说明在这种情况下浏览器应该做什么的参考，这就是我们看到差异的原因？如果我错了，您可以随时向 webkit 团队提交错误吗？

就解决方案而言，我只能建议您确定这种情况下的最佳路径。将其视为类似于不支持text-shadow 的IE。如果舍入失败，则不会出现。然后根据这种立场对您的设计做出决定。

我个人所做的是将像素用于我知道可能存在舍入错误的事物，例如阴影和边框。

【讨论】：

谢谢！写的不错，不知道是不是单位的问题。请看我的编辑。
@avok00：我能给出的唯一建议已经在我的回答中了。您知道 webkit 在某些情况下会舍入为 0，因此在可能发生舍入的情况下使用像素可能是最好的选择。
实际上在非常低的分辨率（手机）下，我需要 0.4px 的值，例如 FF/IE 显示的值（小于 1px 设置，不知道如何）和 Web-kit不是。

【解决方案2】：

问题在于 chrome 不会以亚像素增量定位文本和文本阴影，因此它会四舍五入到最近的像素。

您可以使用letter-spacing 看到相同的效果，其中 firefox 将允许以像素为单位的非整数值，而 chrome 将舍入最近的像素。

【讨论】：

【解决方案3】：

我不建议他们。我会使用 px （像素）。这是一个 EM 到 PX 转换器：http://convert-to.com/446/pixels-px-to-em-conversion.html

PX 在所有浏览器中都是相同的（据我所知）

【讨论】：

像素与屏幕分辨率相关，而 em 与字体大小相关（字体大小也与字体/字体系列本身相关）。另请注意，从 em 到 px 的“转换器”假设了很多字体，通常假设 16px = 1em，但情况并非总是如此。
我不同意。开发社区的主要成员 Paul Irish 使用 px 而不是 em 来表示字体大小 as shown here。
@Scott，那就这样做吧。然后，当您处理像 iPhone 将屏幕区域中的像素加倍这样的剧烈屏幕变化时，不要抱怨您必须有效地编写新的样式表。老实说，我并不是想在这里开始一场像素与字体大小的战斗。只是陈述事实。两者都是相对单位，你选择哪种方式是相对的。 :)
@Scott：另外，应该注意的是，在您链接的页面中，声明的是We use the px unit of measurement to define font size，而不是you should use this cause it is the best way。他偏爱像素。
10 像素文本就是 10 像素，无论您有什么分辨率，这就是它的全部意义所在。无论如何，如今几乎没有一台计算机的分辨率低于 1280xXXX。像素字体提供最一致的外观。