logo标签列表

不同浏览器中相同字体的显示差异

javascripthtmlcss
4

我有一个问题，同样的字体（相同的字体名称和大小）在Internet Explorer和Firefox（还有Chrome和Safari）之间显示不同。

以下是IE9的样子（希望细节足够高以显示字体比它应该更粗/更重）： enter image description here

以下是Firefox等浏览器的样子： enter image description here

是否有CSS重置可以使字体在各个浏览器之间保持一致？或者有适用于IE的hack方法吗？

这是页面的简单HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style type="text/css">
    <!--
        body {
            color: RGB(102,102,102);
            font-size: 13px;
            font-family: "Arial", "Helvetica", serif;
        }
    -->
    </style>

</head>
<body>
    <p>Lorem ipsum dolor sit amet, elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa...</p>

</body>
</html>
那是哪个版本的Firefox？ - thirtydot
Firefox 10.0.2。 @GGG 我同意您的观点，但我没胆量把那个链接发给我的老板 :P - sazr
4个回答
5
不，没有CSS重置、技巧或黑客可以让所有浏览器显示相同的字体。在不同的浏览器中，相同的字体会以不同的方式呈现。即使在同一浏览器中，相同的字体在不同系统上也可能呈现不同。
CSS重置可以帮助使默认值更加一致，这有助于解决标题标记等默认粗体或非粗体的情况，因为这些默认在不同浏览器之间有所不同。但当大小和重量被设置为固定值时，它无法发挥作用。
您可以使用黑客方法让某个特定浏览器中看起来符合您的要求，但并非所有使用该浏览器的用户都需要这样做。虽然对某些人而言可能看起来更好，但实际上可能会让其他人看起来更糟。
另外注意：我注意到您在回退时使用“衬线”作为Arial和Helvetica的回退字体。您应该使用“无衬线”，这样在使用回退字体时，它们看起来更相似。
另一个侧面说明：我看到您在样式标记内使用注释，这只对完全不了解CSS的浏览器有用，例如Internet Explorer 1.0。
0

尝试一下这个小技巧，它可能有效也可能无效，具体取决于字体类型，例如：自定义字体

...来自html5bolierplate

html{
    font-size:100%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-text-stroke: 0 0 0 transparent;
}
0

这可能是字重问题。尝试添加类似以下的内容：

p {
  font-weight: 400;
}
0
浏览器通常对字体呈现有不同的方式（以及几乎所有东西）。你应该尝试使用CSS重置。Eric Meyer 有一个, YUI 也有一个，还有其他一些框架。具体而言，你应该寻找“重置”（将所有样式归零）或“基础”（提供标准化样式）。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接