字体在chrome / firefox中显示不同

Question

每一个人。

我在使用不同浏览器显示页面时遇到问题。我在这里使用“Myrid Set Pro”字体。

我正在使用chrome。但不是在Firefox中。我正在附上这些文件。

这里首先是Chrome中的预览。 第二个是在Firefox中预览。

我也试过了文字渲染。但没有使用

text-rendering: optimizelegibility;

Answer 1

目前，对此主题尚未达成共识。可耻的是，有很多技巧，但没有解决这个问题的具体方法。

问题是，每个浏览器和操作系统都以不同方式处理字体呈现。这就是为什么在Web浏览器和系统中获得相同结果非常困难的原因。

这个问题在SO上已被问过几次：

1.- How do I get font to display properly in all browsers?

2.- Same font yet its weight seems different on different browsers

下面，我将列出一些建议的解决方案;但他们有可能不会工作：

// @Mohamed Anis Dahmani
html, html a {
    -webkit-font-smoothing: antialiased;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}

// @oneiota
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;

另外还有一个使用translate3d：webfont-rendering-fix.css

body {
  -webkit-transform: translate3d(0px, 0px, 0px);  /* Force hardware acceleration to fix safari opacity bugg*/ 
}

我的建议是，寻找网络安全字体http://cssfontstack.com/，这样可以最大限度地减少字体呈现对网络浏览器和操作系统的影响。

Answer 2

我过去也遇到过同样的问题。查看有关跨浏览器的字体表的这篇文章 - 希望这有助于解决您的问题。

http://alistapart.com/article/say-no-to-faux-bold

---

使用新信息进行更新：

我找到了一个更简单的方法来解决这个问题（就我而言，事实证明这只发生在Firefox for OSX上） - 将以下内容添加到基本排版css文件中：

-moz-osx-font-smoothing: grayscale;

CSS-Tricks.com论坛讨论中有更多信息：https://css-tricks.com/forums/topic/typekit-fonts-much-bolder-in-firefox/page/3/

虽然论坛讨论标题专门提到了Typekit字体，但该解决方案非常适用于谷歌字体。