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, 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>
I noticed that Web-kit browsers like Chrome and Safari (Windows) tend to round em values to nearest pixel, while Firefox, IE, ? Opera ? can use sub-pixel values. This is normally not a big issue, but when I use em to precisely align letter spacing or use text-shadows for consistent effect in different client resolutions this causes me headache. Take a look in the following test case.
You will see that in FF even the smallest letters still have a shadow, while Chrome rounds down the em value to zero and the first two paragraphs have no shadow.
EDIT This is not about the units. If you replace 0.03em with 0.9, 0.8, 0.7 .. px FF will display smaller and smaller shadow, while when Chrome goes below 1px it suddenly displays nothing.
<!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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
问题是 Chrome 不会以子像素增量定位文本和文本阴影，因此它会舍入到最近的像素。
您可以使用
letter-spacing看到相同的效果，其中firefox将允许像素中的非整数值，而chrome将舍入最接近的像素。The problem is that chrome won't position text and text shadows at sub-pixel increments, so it rounds to the nearest pixel.
You can see the same effect with
letter-spacingwhere firefox will allow non-integer values in pixels, while chrome will round the closest pixel.我建议的第一件事是您使用
ex单位 对于 y 坐标和高度值，作为字体可能有单独的 x-heights。这可能有助于曲线舍入误差对您有利，但可能不会。最坏的情况是它至少对字体本身是准确的。其次，不幸的是，我在规范中找不到任何参考资料来说明浏览器在这种情况下应该做什么，这就是我们看到差异的原因？如果我错了，您可以随时向 webkit 团队提交错误吗？
至于解决方案，我只能建议您在这种情况下确定最佳路径。可以将其视为类似于不支持
text-shadow的 IE。如果舍入失败，则不会出现。然后根据这个立场做出设计决策。我个人所做的是将像素用于我知道可能存在舍入误差的事物，例如阴影和边框。
First thing I would suggest is that you use
exunits for y coordinates and height values as a fonts may have a separate x-heights. This may help curve rounding errors in your favor, but probably not. The worst case is that it is at least accurate to the font itself.Second, unfortunately I cannot find any reference in the spec that says what a browser should in this case which is why we are seeing the differences? If I'm wrong, you could always file a bug with the webkit team?
As far as a solution I can only suggest you determine the best path in this case. Think of it as similar to IE not supporting
text-shadow. If the rounding fails, it won't appear. Then make decisions on your design based on this stance.What I personally do is use pixels for things I know are likely to have rounding errors, such as shadows and borders.
我不会建议他们。我会使用 px（像素）。这是 EM 到 PX 转换器： http://convert-to .com/446/pixels-px-to-em-conversion.html
PX 在所有浏览器中都是相同的（据我所知）
I wouldn't suggest em. I'd use px (pixels). Here is an EM to PX converter: http://convert-to.com/446/pixels-px-to-em-conversion.html
PX is the same across all browsers (as far as I know)