Firefox和Safari中的字体看起来更薄 - 在Chrome中很好

Question

我试图让我的字体在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。

Answer 1

我通常使用这种方法

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

或

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

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

Answer 2

我最近遇到了与您和相同字体类型相同的条件（来自Google的Raleway）。显然，safari存在一些问题，当Google Fonts API将其包含在代码中时，它们会渲染字体。

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

<强> SOLUTION：

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

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

h1{
  font-weight:900;
}

如果你使用的是LESS或SCSS，你可以通过简单的混音更容易地做到这一点，但这是另一个主题。

Answer 3

您的代码中字体权重可能更轻或更轻 尝试将font-weight更改为普通font-weight:normal;或font-weight:400;