在使用 CSS 声明文本的外观时,您可以非常具体。
p {
font-family: Verdana;
background-color: #7A2121;
color: #B93333;
text-decoration: underline;
word-spacing: Normal;
text-align: left;
letter-spacing: 1px;
text-indent: 15px;
line-height: 16px;
font-size: 10px;
font-weight: bold;
font-style: italic;
text-transform: uppercase;
}
而且这还不是全部… 但即使你如此具体,不同浏览器在实际渲染文本时仍然存在很大差异。这里的重要教训是,无论你试图对文本施加多少控制,最终你都无法获得多少控制。更不用说大多数浏览器都允许用户实时调整和覆盖字体设置。
以下是几个浏览器中完全相同页面的截图。
Mac Firefox 2
Mac Safari 2:(有点模糊)
Mac Opera 9
Mac IE 5
PC IE 6(Windows 2000)
PC IE 7
PC IE 8
PC Opera
PC Firefox
这些差异似乎非常细微,但看看将这些截图彼此叠加,并在 Photoshop 中应用一些透明度后会发生什么。
事实上,这些差异在单行文本中非常细微,但你可以看到,当这些差异叠加在一起时,它们会导致相当大的差异。最重要的是,不要指望文本用于特定的布局定位,正如你在这两条线上的图像中看到的那样,它们在不同浏览器中的位置会有所不同。
特别感谢 Erik 在我丢失这些图像后重新创建了这篇文章的图像!
是的,这太烦人了… 尤其是在你拥有宽度/高度特定的 div 中的多行文本时… 由于字体渲染的原因,Safari 上完全崩溃…
嗯,大多数开发人员都知道这一点,但客户通常只是说“嗯,在我看来,这看起来不一样…”
所以,与其搞乱字体渲染,他们应该考虑像 w3c 所建议的那样全面支持 css,恕我直言…
这很烦人。Firefox 和 IE6 之间的差异有时甚至比你在本页面上展示的更大。不幸的是,你文章中的最后四张图像似乎丢失了。
看起来文章中最后四张图像仍然缺失。
我的天哪。我已经在 Mac 上用了几年了,但我忘记了 Windows 上的文本看起来有多么难以置信地难看。为什么微软不能关注像文本渲染这样基本的事情?即使 Vista 和 IE 7/8 中较新的文本渲染也只会让字符看起来模糊。
Safari 的字体渲染在我看来最糟糕,所有文本看起来都很粗体。
我是一个网页开发新手。一直在制作 http://www.mywcmassage.com,并且注意到文本在 FireFox 和 IE 中的显示方式有很大差异——在 FireFox 中,文字看起来太尖锐、锯齿状、不平滑。而且间距和位置也不一样。
这是可以接受的吗?有没有我可以用来覆盖这种效果的“技巧”或 css 修复方法?
有人知道答案吗?
这对网页开发者来说是个难题。一个人要测试多少个浏览器?为什么所有浏览器不都坚持使用一种字体渲染标准?尽管 Safari 的字体看起来很粗体,但我认为有时它看起来很清晰,易于阅读。
你忘记了从 Mac 中更改图片的颜色配置文件。这意味着几乎所有浏览器都会错误地渲染这些图片,而且来自 Mac 的图片会更暗,例如在 FF3 的默认设置中。
所以,一个无辜的 Windows 用户,受过教育并使用 FF,可能会看到 Mac 类型的渲染,但它看起来会更暗更模糊。你应该将它们转换为 sRGB,或者等待 10 年才能修正所有浏览器的显示。
我在我的测试网页中应用了这个 css,firefox 运行良好,但 IE 运行不佳… 有人可以帮我吗!拜托!
那么,你推荐哪些字体在 FF 和 MSIE 中渲染效果最好?现在我不太在意哪种效果“最好”(有些人说 MSIE 的渲染效果比 FF “更好”),我只想在 CSS 中添加一些内容,这样就能在所有浏览器中获得最可预测的外观。我尝试了 Arial 和 Trebuchet MS,但我知道还有数百种选择,也许有人已经找到了一个简单的通用字体… 谢谢。
解决此类问题的最佳工具(我发现的)是网站 http://browsershots.org/
它允许你查看任何网站的任何页面,几乎所有已知的浏览器都能看到。非常方便,尽管也很令人沮丧,因为你得到了截图,但它们看起来都不一样!
在我看来,这仍然很有帮助。
Cris,
Browsershots 不错,但等待时间太长了。你需要看看我发现的最好的工具。
http://www.crossbrowsertesting.com
嗨,
我是来自海德拉巴的 anand,这个论坛对我非常有帮助。
谢谢
我将这篇文章添加书签,以便下次我需要解释浏览器渲染差异时使用。你知道,这可以作为学校的例子。非常聪明!我希望 Firefox 能用字体渲染出更好的质量(我更喜欢 Safari 的渲染效果!)
有人尝试过解决这个问题吗?