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

【问题标题】：How to reduce font weight in Firefox on Mac with CSS?如何使用 CSS 在 Mac 上的 Firefox 中减少字体粗细？
【发布时间】：2011-12-24 14:24:52
【问题描述】：

这是我的问题：我在我的网站菜单中使用 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（好版本）

谢谢！

【问题讨论】：

欢迎来到 HTML 的美妙世界。等你在手机上试试吧！
别担心，我在 HTML 领域已经有一段时间了……而且我每次都为 IE 哭泣 ;)。幸运的是，我的客户也想要一个移动网站，所以我不必处理这个问题！
我会小心使用敲除...该字体受版权保护，只能通过 Typography.com 的云服务合法使用...
@kristinachilds 这是几年前我工作的代理机构使用的，我相信他们是合法获得的。谢谢你的信息:)
@Ebpo 不用担心 :) 这是我的一位客户的品牌字体，我们最近才购买它以供网络使用，所以我只是在寻找 :)

标签： css macos firefox fonts

【解决方案1】：

每种字体都支持不同的粗细。有些可以是真的，有些则不能。

Mac 和 PC 会以不同的方式呈现相同的字体。这是一个核心操作系统的东西，基本上，你无能为力。 :(

使用Google Webfonts 或TypeKit 之类的方法可以获得最一致的结果。

Mac 上最细的字体标准之一是 Helvetica Neue。

另外值得注意的是 font-weight 支持值 100,200,...800,900。

【讨论】：

即使 font-weight 支持除 normal 和 bold 以外的值，大多数时候，不同的值也不起作用。例如，400、500、600 可能表现得像正常，而 700 及以上会表现得像粗体。（如果我没记错的话）。我知道 Mac 和 PC 对字体的支持不同，但正如你所见，Safari 有一个 hack，所以我想知道 FF 是否有类似的东西
有时你只需要使用一张图片。
@DanielRHicks 我试图避免使用图像（或像 Cufon 之类的东西），因为我已经有很多用于动画的 javascript 和作为窗口滑动背景的巨大图像）。但我认为我别无选择......

【解决方案2】：

你可以使用，

font-weight:normal !important;

用于修复 firefox Mac 上的可视化错误。

【讨论】：

-webkit-font-smoothing 下面的选项是更好的解决方案

【解决方案3】：

有技巧解释http://dave-bond.com/css/font-too-bold-on-a-mac/ 基本上是应用不透明度：0.99；那些文字...

【讨论】：

我尝试了这个技巧，它实际上导致具有较高 z-index 的子层变得部分透明，并且稍微“看穿”了它们下面的东西。我不认为 1% 会这样做，但说悬停菜单是不可接受的。因此，要成功使用它，您只需要确保您不会在应用此样式的元素内浮动任何图层，或者如果是这样，请将适当的异常添加到选择器。

【解决方案4】：

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

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

在我们的body 标记中为所有浏览器重置此设置。最后！！伙计，这让我很开心！这应该会在下一个 FF 版本中出现。

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

【讨论】：

时间到了！感谢您的信息！
适用于 FF 25 final，不适用于 FF 24。希望它不会在以后被删除，除非 Apple 再次改变对字体抗锯齿的想法。
确认在 FF26 和 FF27 中工作。修复了我们的问题。
应该把这个作为答案
这让我很开心！太感谢了。请注意，这在 2015 年在使用 Chrome 版本 44 的 Mac 上仍然是一个问题......以上已修复。

【解决方案5】：

我发现制作一个稍微“更轻”的图标版本是弥补这一点的最佳方式。它们在 Firefox 中是可以通过的，而在所有其他浏览器中则稍微轻一些。在 Illustrator 中，我创建了一个 16 像素的图标。我将它的大小调整为 1024px，并应用 -6px 的偏移路径（这些是最适合我的数字）。然后我将其导出为 svg，并将其导入 IcoMoon 以构建图标字体。我不使用 -webkit-font-smoothing:antialiased （或待处理的 -moz-osx-font-smoothing: grayscale），除非它是深色背景上的浅色图标。这是我发现让图标字体（大部分）在浏览器和平台上统一显示的最佳方式。

【讨论】：

【解决方案6】：

在 CSS Tricks 上找到了这个，这该死的作品。

将其添加到样式表中： -moz-osx-font-smoothing：灰度；

【讨论】：

【解决方案7】：

这仅影响 firefox 浏览器。

@-moz-document url-prefix() {
  .classname {
    font-weight:normal;

    /* or any other option */
  }
}

享受吧！

【讨论】：