1

我很难理解为什么像 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 查看其他网站。

许多网站使用这些字体并且在浏览器中看起来相同，他们是否使用 Adob​​e typekit 之类的东西来做到这一点..？对于其中很多，我从 fontsquirrel.com 获得了网络字体工具包，除了不一致之外，它似乎工作正常。非常感谢任何输入...谢谢！

4

1 回答 1

1

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

h1 { font-weight: normal; }

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

Firefox 似乎最会弄乱字体——另一方面，文本看起来很粗体。Chrome 和 Safari 几乎没有改变字体，使它们看起来更清晰但根本不是真正的粗体。看看你的样本——文本是粗体的并不是很明显。

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

于 2013-08-27T09:21:05.277 回答