Question

我遇到一个问题，即Internet Explorer和Firefox（以及Chrome和Safari）之间的相同字体（相同的字体名称和大小）显示不同。

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

这就是Firefox等等： enter image description here

是否有CSS重置可以在浏览器中获得字体的一致性？也许是IE的黑客攻击？

这是页面的简单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>

Answer 1

不，没有CSS重置或技巧或黑客可以使所有浏览器显示相同的字体。在不同的浏览器中，相同的字体呈现方式不同即使同一浏览器中的相同字体也可能在不同系统上呈现不同。

CSS重置将有助于使默认值更加一致，如果它是例如标题标签，其中某些标题默认为粗体而其他标题不是，并且默认值在浏览器之间有所不同，这可能会有所帮助。当尺寸和重量设定值时，它无能为力。

您可以进行黑客攻击，使其在某些特定浏览器中看起来像您想要的那样，但该浏览器的所有用户可能都不需要它。虽然对某些人来说看起来可能更好，但实际上可能会让其他人看起来更糟。

旁注：我注意到您使用serif作为Arial和Helvetica的后备广告。您可能希望使用sans-serif，以便在使用后备时看起来更相似。

另一方面注意：我看到你在样式标签中使用注释，这只对完全不了解CSS的浏览器有用，例如Internet Explorer 1.0。

Answer 2

尝试这个小技巧，取决于字体类型，它可能会也可能不起作用，即：自定义字体

..来自html5bolierplate

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

Answer 3

浏览器通常具有不同的字体呈现（以及几乎所有内容）。您应该尝试使用CSS重置。 Eric Meyer has one，YUI has one以及其他几个框架。对于细节，您应该寻找“重置”（将所有样式归零）或“基础”（提供标准化样式）

Answer 4

这有可能是字体重量问题。尝试添加以下内容：

p {
  font-weight: 400;
}

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

4 个答案: