Web-Kit和子像素值,解决方法？

Question

Web-Kit和子像素值,解决方法？

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

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

编辑这不是关于单位.如果用0.9,0.8,0.7替换0.03em,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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

ale*_*rke 0

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

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

像素与屏幕分辨率相关，而 em 与字体大小相关（字体大小也与字体/字体家族本身相关）。另请注意，em 到 px“转换器”对字体进行了大量假设，通常假设 16px = 1em，但情况并非总是如此。 (2认同)
我不同意。Paul Irish 是开发社区的主要成员，他使用 px 而不是 em 表示字体大小 _**[如此处所示](http://na.isobar.com/standards/#_pixels_vs_ems)**_。 (2认同)
@斯科特，那就这么做吧。然后，当您处理剧烈的屏幕变化（例如 iPhone 屏幕区域像素加倍）时，请不要抱怨必须有效地编写新的样式表。老实说，我并不是想在这里开始一场像素与字体大小之战。只是陈述事实。两者都是相对单位，您选择哪种方式相对。:) (2认同)

归档时间：	14 年，10 月前
查看次数：	3821 次
最近记录：	13 年，4 月前