macos 如何使用 CSS 在 Mac 上的 Firefox 中减少字体粗细？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8053389/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to reduce font weight in Firefox on Mac with CSS?
提问by Ebpo
Here's my problem: I'm using font-face for the menu of my website, but Firefox on Mac displays it too bold On a PC, everything works well, the font is perfectly sized and looks like it should
这是我的问题：我在网站菜单中使用 font-face，但 Mac 上的 Firefox 显示太粗 在 PC 上，一切正常，字体大小合适，看起来应该
Unfortunatly, on Mac, i have to had a CSS hack for Safari (which works), but I didn't find anything similiar in Firefox.
不幸的是，在 Mac 上，我必须对 Safari 进行 CSS hack（有效），但我在 Firefox 中没有找到任何类似的东西。
I've tried the "text-shadow hack", i tried using the font-weight property (which pretty much doesn't do anything).
我已经尝试过“text-shadow hack”，我尝试使用 font-weight 属性（它几乎没有做任何事情）。
And now, some code!
现在，一些代码！
@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;
}
For Safari:
对于 Safari：
body{
...
-webkit-font-smoothing: antialiased;
}
Left if FF on Mac and right is FF on PC (the good version)
左边如果在 Mac 上是 FF，右边在 PC 上是 FF（好版本）
Thanks!
谢谢！
回答by kristina childs
FireFox posted a resolution to this today on their bug forum. It was just finalized today so won't be in use for a while, but we should all put
FireFox 今天在他们的 bug 论坛上发布了一个解决方案。今天刚完成，暂时不会用，但我们都应该把
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
in our bodytag to reset this for all browsers. FINALLY!! man, that made my day! This should come out in the next FF release.
在我们的body标签中为所有浏览器重置它。最后！！伙计，这让我很开心！这应该会在下一个 FF 版本中出现。
thread here https://bugzilla.mozilla.org/show_bug.cgi?id=857142
回答by Esteban Ortega F.
you can use,
您可以使用，
font-weight:normal !important;
for fix the visualization error on firefox Mac.
用于修复 firefox Mac 上的可视化错误。
回答by Armand
This affects firefox browser ONLY.
这仅影响 Firefox 浏览器。
@-moz-document url-prefix() {
.classname {
font-weight:normal;
/* or any other option */
}
}
Enjoy!
享受！
回答by netusco
There is trick explained http://dave-bond.com/css/font-too-bold-on-a-mac/basically is to apply opacity: 0.99; to those texts...
有技巧解释http://dave-bond.com/css/font-too-bold-on-a-mac/基本上是应用不透明度：0.99；那些文字...
回答by tybro0103
Every font supports different weights. Some can be really thing, others can't.
每种字体都支持不同的权重。有些可以是真正的东西，有些则不能。
Mac and PC will render the same font differently. It's a core operating system thing, and basically, there's nothing you can do about it. :(
Mac 和 PC 会以不同的方式呈现相同的字体。这是一个核心操作系统的事情，基本上，你无能为力。:(
Most consistent results can be achieved using something like Google Webfontsor TypeKit.
最一致的效果可以使用的东西等来实现谷歌网络字体或TypeKit。
One of the thinnest fonts standard on Mac is Helvetica Neue.
Mac 上最薄的字体标准之一是 Helvetica Neue。
Also worth noting that font-weight supports values 100,200,...800,900.
另外值得注意的是 font-weight 支持值 100,200,...800,900。
回答by Johnny5k
I've found that making a slightly "lighter" version of the icons is the best way to compensate for this. They're passable in Firefox, and ever-so-slightly lighter in all other browsers. In Illustrator, I create a 16px icon. I resize it to 1024px, and apply an offset path of -6px (these are the numbers that worked best for me). I then export that as a svg, and import it into IcoMoon to build the icon-font. I don't use -webkit-font-smoothing:antialiased (or the pending -moz-osx-font-smoothing: grayscale) unless it's a light icon over a dark background. This is the best way I've found to get icon-fonts to display (mostly) uniformly across browsers & platforms.
我发现制作一个稍微“更轻”的图标版本是弥补这一点的最佳方法。它们在 Firefox 中是可以通过的，并且在所有其他浏览器中都稍微轻一些。在 Illustrator 中，我创建了一个 16px 的图标。我将其调整为 1024 像素，并应用 -6 像素的偏移路径（这些是最适合我的数字）。然后我将其导出为 svg，并将其导入 IcoMoon 以构建图标字体。我不使用 -webkit-font-smoothing:antialiased（或挂起的 -moz-osx-font-smoothing: grayscale），除非它是深色背景上的浅色图标。这是我发现让图标字体在浏览器和平台上（大部分）统一显示的最佳方式。
回答by Akhilesh
Found this on CSS Tricks and this freaking works.
在 CSS Tricks 上找到了这个，这该死的作品。
add this to the stylesheet: -moz-osx-font-smoothing: grayscale;
将此添加到样式表：-moz-osx-font-smoothing：灰度；
