Web-Kit和亚像素值，解决方法？

如何解决Web-Kit和亚像素值，解决方法？

| 我注意到像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);}</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>

解决方法

我建议的第一件事是，对于y坐标和高度值，请使用ex单位，因为字体可能具有单独的x高度。这可能有助于曲线舍入错误，但可能没有帮助。最坏的情况是它至少对字体本身准确。其次，不幸的是，我在规范中找不到任何引用，说明这种情况下浏览器应该使用什么，这就是为什么我们看到了差异？如果我错了，您总是可以向Webkit团队提出错误吗？就解决方案而言，我只能建议您在这种情况下确定最佳路径。可以认为它类似于不支持text-shadow的IE。如果四舍五入失败，则不会出现。然后基于这种立场来决定您的设计。我个人所做的是将像素用于我知道可能有舍入错误的事物，例如阴影和边框。 ,问题在于chrome无法将文本和文本阴影定位在子像素的增量上，因此会四舍五入到最接近的像素。您可以使用letter-spacing看到相同的效果，其中firefox允许以像素为单位的非整数值，而chrome将舍入最接近的像素。 ,我不建议他们。我会使用px（像素）。这是EM到PX的转换器：http://convert-to.com/446/pixels-px-to-em-conversion.html 就所有浏览器而言，PX都是相同的（据我所知）