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

【问题标题】：Rendering font differs from IE compared to FF and Chrome与 FF 和 Chrome 相比，IE 的渲染字体不同
【发布时间】：2012-03-23 09:48:32
【问题描述】：

我注意到，例如，如果大小不同，字体的呈现会有很大差异。 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。

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

【问题讨论】：

不同的浏览器使用不同的字体渲染引擎。说得够多了。
听起来可能是个愚蠢的想法，但请检查一下您是否不小心放大了字体，有时会发生 :) 尝试 ctrl+0 可能会有所帮助
@BoltClock 可能是这样，但无论浏览器如何，Arial 都是 Arial。如果 14px 呈现相同的效果，我相信关于 11px 的问题是允许的。甚至可以认为字体是基于矢量图形的，矢量图形是数学公式。数学是一种通用语言。

标签： css internet-explorer firefox google-chrome font-size

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

Firefox 7+ 在 Windows 7 uses GDI Classic mode（带提示）下渲染所谓的 Core Web 字体，如 Arial（因为启用提示后它们更清晰易读），而 DirectWrite（不带提示）用于其他字体。下面列出了使用 GDI 模式的特定字体 about:config pref:

gfx.font_rendering.cleartype_params.force_gdi_classic_for_families

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

Windows 7 下的 IE9 始终使用 DirectWrite。

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

【讨论】：

换句话说，除了图像之外没有其他解决方法。小型核心网络字体看起来不一样。
您有 IE 和 Chrome 的参考资料吗？ [编辑：找到这个链接：blog.mozilla.org/nattokirai/2011/08/11/… 虽然有点旧]
找到了支持directwrite的Chrome错误：crbug.com/25541这里是当前所有用于directwrite的chrome错误：code.google.com/p/chromium/issues/…
@SamHasler：对于IE9，官方IE博客multiple times已经提到Direct2D/DirectWrite。

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

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

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

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

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

【讨论】：