每个人。
我在不同浏览器中显示我的页面时遇到问题。这里我使用的是“Myrid Set Pro”字体。
我在 chrome 中正确使用。但不是在Firefox中。我正在附上这些文件。
第一个是 Chrome 中的预览。 第二个是 Firefox 中的 Preview。
我也尝试了文本渲染。但是没用
text-rendering: optimizelegibility;
【问题讨论】：
标签： html css fonts cross-browser
目前，关于这个话题还没有达成共识。可耻的是，这个问题有很多技巧，但没有具体的解决方案。
问题是，每个浏览器和操作系统处理字体渲染的方式都不同。这就是为什么很难在网络浏览器和系统中获得相同的结果。
同样的问题已在 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/，这将最大限度地减少跨网络浏览器和操作系统呈现字体的影响。
【讨论】：
我过去也遇到过同样的问题。查看这篇关于跨浏览器字体的文章 - 希望这可以帮助解决您的问题。
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 字体，但该解决方案非常适用于 google 字体。
【讨论】：