html - 字体在 chrome/firefox 中显示不同

Question

每一个。

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

我在 chrome 中得到了正确的结果。但不是在火狐中。我附上了这些文件。

这里第一个是在 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/这将最大限度地减少跨网络浏览器和操作系统的字体呈现的影响。