logo标签列表

IE9 字距问题

cssstandardsrenderinternet-explorer-9letter-spacing
18

我的页面在Firefox（3x，4x），Chrome和IE（6、7、8）中渲染得很好。

当在IE9上测试时，文字变宽了。 经过调查发现，实际上文本的呈现方式与其他浏览器相比，字母之间的间距更大。

将字母间距改为-0.6px后，文字呈现正常，类似于其他浏览器。同时，将呈现模式更改为“兼容性视图”，页面看起来也很好。

您知道是什么导致了呈现模式的变化吗？

我使用条件注释“解决”了这个问题，但我对此并不满意。

<!--[if IE 9]>
<style>
    * {letter-spacing: -0.6px;}
</style>
<![endif]-->

是否还存在其他解决此问题的方法？

编辑

我在不同的机器和浏览器上拍了几张屏幕截图，结果可以在这里看到。

正如您所见，在不同的机器和浏览器上，结果都是一样的。唯一呈现不同的是IE9标准模式下。源页面为

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
<title></title>
<style type="text/css">
    body {margin:0;padding:0;}
</style>
</head>
<body>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc semper.
</body>
</html>
你能展示一个实时的例子吗？这可能与字体具体有关。你在使用什么样的字体？ - Pekka
1
不是回答您的问题，只是想指出IE 7及以下版本会将字母间距四舍五入到最接近的整像素值。 - JackWilson
2
字距在排版术语中被称为“字距调整”。IE9确实从IE8更改了其字体渲染引擎。渲染效果取决于屏幕dpi和字体大小、抗锯齿程度，可能还取决于是否使用ClearType。因此，请注意不要仅凭自己的屏幕来判断。在其他屏幕上，它看起来会有所不同。 - Bernard
2
https://dev59.com/zG035IYBdhLWcg3wbPY5#5646605 https://dev59.com/y2035IYBdhLWcg3wNdLg#5644887 - David d C e Freitas
@JackWilson 是的，我本来也想说整个像素的事情 - 我认为通常情况下使用0.6个像素是不正确的。你怎么可能有半个像素...(是的，我知道字体中使用部分像素的抗锯齿技术)。 - Paul Sullivan
2
你使用过重置样式表吗？因为它可以解决和更改一些默认设置（这只是建议，不确定...） - anglimasS
9个回答
4

尝试以下方法，这适用于Internet Explorer 8和Firefox：

letter-spacing:0.49px;
letter-spacing:0.88px !ie;

MSIE会将第一个字母间距调整为0px，并忽略第二个规则。 Firefox会读取第二个规则，并使用它而不是第一个规则。

然后，为了补偿，您可以在MSIE中使用相同的技巧，在文本中添加比Firefox更多的水平填充。

当然，还要与其他浏览器进行进一步测试！

4

这可能与四舍五入有关。使用十分之一像素是一件奇怪的事情，因为除非你知道四舍五入的规则，否则在屏幕上无法得到小于一个完整像素的结果。无论如何，你不能指望IE做正确的事情。

3
考虑到你提出这个问题已经七个月了，现在需要考虑的另一件事是，从2011年6月开始，火狐浏览器的第5个版本开始了快速发布计划。他们现在已经升级到了8个版本，并且我进行了一个快速测试，发现火狐浏览器7和8的版本都可以与IE9几乎完美地呈现文本。相比之下，Chrome的字距更紧密，而在我的眼中，Chrome的清晰度渲染比IE9和FF7/8都要强硬。

你不能保证在所有浏览器上都能匹配字体渲染，更不用说在所有平台上了。我查看的所有浏览器默认使用（在Windows上）16pt的Times New Roman文字进行“正常”显示。如果你的应用程序需要渲染文本以匹配所有用户、所有浏览器、所有平台，那么把它渲染成图像并缓存起来

1
这也在我的IE8中发生了，原因不明。无论是减小字体大小还是设置字母间距都没有解决问题。
在另一个帖子中，我看到这可能与字体相关。不幸的是，我还没有找到解决方案，但是一旦我找到了，我会在这里发布。可能现在对你没有帮助，但它可能会帮助以后访问这个问题的人。
如果您可以提供引用文章的链接，那么会更有帮助。请务必回来发布更新。 - Miguel-F
好的。很抱歉没有提供它们。我在这些问题中找到了类似的问题：http://stackoverflow.com/questions/13830970/random-letter-spacing-when-using-font-face和http://stackoverflow.com/questions/2690815/font-face-and-letter-spacing-in-webkit。我成功地通过后一个问题的第一个答案解决了这个问题，即重新生成字体并检查“删除字距”选项。当然，我无法看到您的链接以确定问题是否与我的相同，但我希望这可以帮助您。 - ArturBalestro
1
尝试为整个文档设置letter-spacing值，以便在IE和FF中显示相同。
0

我一直发现在各种浏览器中设置字体大小最有用的方法是使用 em 而不是 px 值。

我倾向于在 CSS 的 body 标签中设置基准点：

font-size: 62.5%

然后，每当我想设置字体大小时，我使用 em 值，例如：

font-size: 1.1em;

这相当于11像素。我发现的优点是它在各种浏览器中呈现更加一致，并且使用浏览器调整大小控件时也更好地进行调整。

试试这个-我认为它应该解决你的问题。

谢谢 nathj07

0

humeniuc

你确定你正在使用默认字体还是其他不同的字体？这可能会引起问题。

0

您可以参考微软的文章。问题可能是由于文本渲染引起的。

0

很抱歉，这台电脑上没有IE9 - 明天我会在另一台有IE9的电脑上再次查看，但我的第一反应是w3c验证器显示你的HTML无效。

它不喜欢你的文本直接放在BODY中而不是其他容器中。我只是想知道这是否是问题所在？也许其他浏览器正在代表你“纠正”并假定一个段落容器。

如果你将文本放在段落或DIV中，外观是否会改变？

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接