Firefox与其他浏览器的字体渲染效果不佳

Question

我很难理解为什么像Open Sans Light这样漂亮干净/简单的字体在Firefox中看起来并不合适，但在Chrome和Safari中看起来很不错。我想即使Chrome和Safari也有一些细微差别，但大多数情况下它们在这些浏览器中看起来都是一样的。

http://503rephotography.com/_font/testfont.html - 尝试在Firefox中查看它，然后在Chrome或Safari中查看它，你会看到我的意思......不确定它在IE中的样子并不是那么关心说实话...... :)但是Firefox中的字体有点沉重而且形状不正确，它应该更轻，更好看。它不仅仅是这种字体，它几乎是Arial或Verdana等基础知识以外的所有字体。

CSS

    h1 {
    font-size:2em;
    font-family:OpenSansLight;
    color:#000;
    }


    @font-face {
        font-family: 'OpenSansLight';
        src: url('fonts/OpenSans-Light-webfont.eot');
        src: url('fonts/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
             url('fonts/OpenSans-Light-webfont.woff') format('woff'),
             url('fonts/OpenSans-Light-webfont.ttf') format('truetype'),
             url('fonts/OpenSans-Light-webfont.svg#OpenSansLight') format('svg');
        font-weight: normal;
        font-style: normal;

    }

HTML

    <h1 align="center">Test... Open Sans Light</h1>

我环顾四周寻找答案，大多数问题只是一个特定的字体，但我不认为这是这种情况，因为它适用于我尝试过的所有问题，我知道它们可以从Firefox查看其他网站看起来不错。

许多网站使用这些字体并且在浏览器中看起来相同，他们是否使用类似Adobe typekit的东西来执行此操作..？对于很多这些我已经从fontsquirrel.com获得了网络字体套件，除了不一致之外，它似乎工作得很好。任何意见都非常感谢...谢谢！

Answer 1

您需要做的就是重置h1默认重量，或者包含粗体版本的字体。

h1 { font-weight: normal; }

这里的问题是h1和其他标题标签将 font-weight：bold 设置为默认值。由于您已将字体font-weight属性设置为正常，并且浏览器没有可用的粗体字体，因此浏览器将尝试创建字体的虚假粗体版本。这几乎总是看起来很糟糕。

Firefox似乎最容易搞乱字体 - 另一方面，文字看起来很大胆。 Chrome和Safari几乎不会改变字体，使它们看起来更清晰，但根本不是那么大胆。只要看看你的样本 - 文字粗体就不是很明显了。

这里有一篇关于这个问题的好文章：http://alistapart.com/article/say-no-to-faux-bold