Html 在chrome/firefox中显示的字体不同

每个人

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

我正确地使用了chrome。但不是在firefox中。我正在附上那些文件

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

我也尝试了文本渲染。但是没有用

text-rendering: optimizelegibility;

---

目前，在这个问题上没有达成共识。可耻的是，这个问题有很多技巧，但没有具体的解决方案

问题是，每个浏览器和操作系统处理字体渲染的方式都不同。这就是为什么在web浏览器和系统中很难获得相同的结果

同样的问题在这里被问了好几次，所以：

1.-

2.-

下面，我将列出一些建议的解决方案；但是，它们可能不起作用：

// @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的：

---

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

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

---

更新新信息：

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

-moz osx字体平滑：灰度

CSS-Tricks.com论坛讨论中有更多信息：

虽然论坛讨论标题特别提到了Typekit字体，但该解决方案很好地应用于google字体。
看起来字体是一样的，但在渲染上有一些不同，比如在chrome中，标题是粗体的，但在forefox中没有。@NishadNichoos如何解决这个问题。我需要解决这个问题。两者必须外观相似，请检查：
body {
  -webkit-transform: translate3d(0px, 0px, 0px);  /* Force hardware acceleration to fix safari opacity bugg*/ 
}