html - 字体在 Firefox 上看起来很模糊

Question

用 chrome 和 opera 就可以了。但它在 Internet Explorer 和 Firefox 上看起来很模糊。我研究并应用了这些 css，但仍然没有运气。我的 firefox 和 Internet explorer 版本是最新的。我没有使用谷歌字体。这是我的风格。

@font-face {
  font-family: 'Gotham-Bold';
  src: url('../fonts/Gothambold/Gotham-Bold.eot');
  src: url('../fonts/Gothambold/Gotham-Bold.eot?#iefix') format('embedded-opentype'), url('../fonts/Gothambold/Gotham-Bold.woff') format('woff'), url('../fonts/Gothambold/Gotham-Bold.ttf') format('truetype'), url('../fonts/Gothambold/Gotham-Bold.svg#') format('svg');
}

body{
text-rendering: optimizeLegibility;
text-rendering: geometricPrecision;
font-smooth: always;

font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: subpixel-antialiased;
}

在 firefox 中查看。

在 Chrome 中查看 仍然没有运气。有什么想法吗？

Answer 1

此问题不久前曾在 this thread 中提出(并已修复) .

总结一下...

原因:

此 firefox 问题发生在 Mac 上，其中选项:“在可用时使用 LCD 字体平滑”(设置 > 常规 > 在可用时使用 LCD 字体平滑)被选中。 (默认选中)。

注意:根据经验，这个问题不会发生在 mac 的实际视网膜屏幕上，而是发生在连接到 mac 的非视网膜屏幕上。

取消选中该选项并重新启动 firefox，您会看到字体看起来不错!

修复:

为启用上述选项的用户克服此问题 - 只需在正文中添加以下声明:

-moz-osx-font-smoothing: grayscale;

你会惊喜的。