css - 如何使用 CSS 在 Mac 上的 Firefox 中减少字体粗细？

Question

这是我的问题:我在我的网站菜单中使用 font-face，但 Mac 上的 Firefox 显示得太粗了 在 PC 上，一切正常，字体大小完美，看起来应该如此

不幸的是，在 Mac 上，我必须对 Safari 进行 CSS hack(有效)，但我没有在 Firefox 中找到任何类似的东西。

我试过“text-shadow hack”，我试过使用 font-weight 属性(这几乎什么都不做)。

现在，一些代码!

@font-face {
    font-family: 'KnockoutHTF48FeatherweightRg';
    src: url('font/knockout-htf48-featherweight-webfont.eot');
    src: url('font/knockout-htf48-featherweight-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/knockout-htf48-featherweight-webfont.woff') format('woff'),
         url('font/knockout-htf48-featherweight-webfont.ttf') format('truetype'),
         url('font/knockout-htf48-featherweight-webfont.svg#KnockoutHTF48FeatherweightRg')     format('svg');
    font-weight: normal;
    font-style: normal;

}

对于 Safari:

body{
    ...
    -webkit-font-smoothing: antialiased;
}

左边是 Mac 上的 FF，右边是 PC 上的 FF(好的版本)

谢谢!

Answer 1

FireFox 今天在他们的错误论坛上发布了一个解决方案。今天刚刚定稿，暂时用不上，不过大家还是放上吧

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

在我们的 body 标签中为所有浏览器重置它。最后!!伙计，这让我很高兴!这应该会在下一个 FF 版本中出现。

线程在这里 https://bugzilla.mozilla.org/show_bug.cgi?id=857142