Question

我注意到，如果尺寸是，例如，字体的渲染会有很大差异。 11像素。运行Windows 7

使用以下HTML和CSS

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Testing font</title>
        <style>
            body {
                font-family: "Helvetica","Arial",sans-serif;
                color: #1A1A1A;
                padding: 10px;
            }

            .foo{
                font-size: 14px;
            }
            .bar{
                font-size: 11px;
            }
        </style>
    </head>
    <body>
        <div class="foo">
                <p>HOME</p>
        </div>
        <div class="bar">
                <p>HOME</p>
        </div>
    </body>
</html>

如附图所示，FF和Chrome倾向于收紧11px但不是14px的宽度。 enter image description here

为什么会这样，是否有解决方法？

Answer 1

Firefox 7+在Windows 7下uses GDI Classic mode（带有提示）来渲染所谓的核心Web字体，如Arial（因为它们在启用提示时更加清晰可读），而DirectWrite（没有提示）用于其他字体。使用GDI模式的特定字体如下所示：config pref：

gfx.font_rendering.cleartype_params.force_gdi_classic_for_families

AFAIK，Firefox中的渲染模式也取决于字体大小。对于足够大的字体大小和太小的字体大小（可能大于15px，可能小于9px），它也使用DirectWrite for Core Web字体。

Windows 7下的IE9始终使用DirectWrite。

Chrome似乎总是使用GDI经典模式。

Answer 2

不同的浏览器使用不同的引擎。

甚至FF在Linux上也会使用与Windows不同的算法。

甚至用户设置（缩放，配色方案;可能出于可访问性原因）都可以（并且将）无情地打破你的美丽风格。

作为“解决方法”我看到两个选项：

如果你真的非常迫切必须，在家里渲染字体并在网站上放置PNG
更改样式，使其不依赖于任何字体大小，类型或其他比例。这样它在每个浏览器中看起来都很好（至少是可读的）

Answer 3

某些字体呈现引擎可能会尊重其他人不支持的CSS属性（例如letter-spacing，text-rendering，font-stretch，font-size-adjust等等 - 请参阅{{3 }}）。您可以尝试使用您找到的那些，最终在不同的浏览器中提供（几乎）统一的渲染。

Answer 4

不是专家，但这对我有用......

 html, body {
    zoom:1; 
    -webkit-transform: scale(1); 
    -moz-transform: scale(1); 
    -ms-transform: scale(1); 
    transform: scale(1)
}

现在，所有浏览器字体似乎都呈现相同的跨浏览器。

与FF和Chrome相比，渲染字体与IE不同

4 个答案: