Css 与FF和Chrome相比，呈现字体不同于IE_Css_Internet Explorer_Firefox_Google Chrome_Font Size

Css 与FF和Chrome相比，呈现字体不同于IE

css internet-explorer firefox google-chrome

Css 与FF和Chrome相比，呈现字体不同于IE,css,internet-explorer,firefox,google-chrome,font-size,Css,Internet Explorer,Firefox,Google Chrome,Font Size,例如，我注意到，如果字体大小为，字体的呈现会有很大的不同。11px。运行Windows7 使用以下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> &

例如，我注意到，如果字体大小为，字体的呈现会有很大的不同。11px。运行Windows7

使用以下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>


测试字体
身体{
字体系列：“Helvetica”，“Arial”，无衬线；
颜色：#1A1A；
填充：10px；
}
傅先生{
字体大小：14px；
}
.酒吧{
字体大小：11px；
}
家
家

如所附图片所示，FF和Chrome倾向于在11px中收紧宽度，但在14px中则没有

为什么，有解决办法吗

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

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

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

作为“解决办法”，我看到两种选择：

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

Windows 7下的Firefox 7+（带提示）用于呈现所谓的核心Web字体，如Arial（因为启用提示后字体更清晰易读），以及DirectWrite（不带提示）用于其他字体。以下关于：config pref中列出了使用GDI模式的特定字体：

gfx.font_rendering.cleartype_params.force_gdi_classic_for_families

另外，Firefox中的渲染模式也取决于字体大小。对于足够大的字体大小和太小的字体（可能大于15px，可能小于9px），它也使用DirectWrite作为核心Web字体

Windows7下的IE9总是使用DirectWrite

Chrome似乎总是使用GDI classic模式。

某些字体呈现引擎可能会尊重其他引擎没有的CSS属性（如

字母间距

，

文本呈现

，

字体拉伸

，

字体大小调整

和其他-请参阅）。你可以试着和你找到的人玩一玩，最终在不同的浏览器中实现（几乎）一致的渲染。

不是专家，但这对我来说很有用

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

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

不同的浏览器使用不同的字体呈现引擎。说得够多了。听起来可能是个愚蠢的想法，但检查一下，也许你不小心放大了字体，有时会发生：）试试ctrl+0，也许可以helps@BoltClock可能是这样，但无论浏览器如何，Arial都是Arial。如果14px呈现相同，我相信关于11px的问题是允许的。人们甚至可以认为字体是基于矢量图形的，即数学公式。数学是一门通用语言。换句话说，除了图像，没有其他解决方法。小的核心网页字体看起来不一样。你有IE和Chrome的参考资料吗？[编辑：找到此链接：虽然有点旧]找到directwrite支持的Chrome bug：以下是directwrite当前的所有Chrome bug:@SamHasler:Direct2D/directwrite在IE官方博客中提到过IE9。