5

我注意到像 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>
4

3 回答 3

3

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

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

于 2012-10-02T17:45:16.927 回答
3

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

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

至于解决方案，我只能建议您在这种情况下确定最佳路径。把它想象成类似于 IE 不支持text-shadow。如果舍入失败，则不会出现。然后根据这种立场对您的设计做出决定。

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

于 2011-04-13T21:32:49.197 回答
0

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

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

于 2011-04-13T21:16:05.310 回答