字体在 Firefox 和 Safari 中显得更薄 - 在 Chrome 中很好答案

【问题标题】：Font appears thinner in Firefox and Safari - fine in Chrome字体在 Firefox 和 Safari 中显得更薄 - 在 Chrome 中很好
【发布时间】：2015-12-31 04:19:34
【问题描述】：

我正在尝试让我的字体在 mac Chrome、Safari 和 Firefox 上看起来大致相同（稍后将转到 IE）。

我一直在玩：

 -webkit-font-smoothing: subpixel-antialiased;

字体看起来几乎一样，但 safari 和 firefox 几乎看起来至少瘦了 1 倍。

我也试过了：

-webkit-font-smoothing: antialiased;

这对于 FF：

-moz-osx-font-smoothing: grayscale

我也有这个：

text-rendering: optimizeLegibility !important;

这使字体看起来几乎相同，但不如亚像素抗锯齿平滑。

我在这里错过了一个属性吗？我知道它们不会在所有浏览器中看起来 100% 相同，但您会认为 chrome 和 safari 都是 webkit 浏览器，它们是相同的。

如果有帮助的话，我正在使用来自 Google 字体的 Raleway。

【问题讨论】：

+1 我不知道他们为什么不赞成你。根据 SO 看来这是一个很好的问题，而且它是一个有效的问题。

标签： html css google-font-api

【解决方案1】：

我最近遇到了与您相同的条件和相同的字体类型（来自 Google 的 Raleway）的这个问题。显然，当 safari 在代码中包含 Google Fonts API 发送的字体时，会出现一些问题。

因此，在任何其他浏览器中，@import url(https://fonts.googleapis.com/css?family=Raleway:900); 会调用 Raleway font weight 900。野生动物园并非如此。

解决方案：

首先打开该安全性，将其设为常规http。这是建议here，@import url(http://fonts.googleapis.com/css?family=Raleway:900);

然后在元素上指定字体粗细。

h1{
  font-weight:900;
}

如果您使用 LESS 或 SCSS，您将能够使用简单的 mixin 更轻松地做到这一点，但这是另一个主题。

【讨论】：

【解决方案2】：

我通常使用这种方法

-webkit-text-stroke: 1px rgba(0,0,0,0.1)

或

-webkit-text-stroke: 0.5px
-webkit-text-stroke-color: same color as text;

我希望这会有所帮助。谢谢！

【讨论】：

【解决方案3】：

也许您的代码中的字体粗细较轻或较轻尝试将字体粗细更改为正常font-weight:normal; 或font-weight:400;

【讨论】：