在Firefox和IE中显示粗体的Google字体

Question

我在我正在制作的网站上使用Google字体，但它们在Firefox和IE中显示的非常厚。字体是Domine和Source Sans Pro。 Domine（标题）的厚度没有太大差异，但与Chrome相比，Source Sans Pro（正文）看起来很大胆。

屏幕截图的顶部是Chrome，底部是Firefox和IE（它在两个浏览器上显示相同。）任何关于这里发生了什么以及如何解决它的线索？

由于

http://i.imgur.com/6vglEhV.jpg

Answer 1

我有这个确切的问题，特别是在Mac Firefox上......来自Google字体的Muli字体呈现出精美的Chrome和Safari，但Firefox已经强加了一个＆＃39; faux＆＃39;粗体（无论基本字体重量是否设置为400）

以下是为我解决的问题。将以下内容添加到基本排版css文件中：

-moz-osx-font-smoothing: grayscale;

CSS-Tricks.com论坛讨论中有更多信息：https://css-tricks.com/forums/topic/typekit-fonts-much-bolder-in-firefox/page/3/

虽然论坛讨论标题专门提到了Typekit字体，但该解决方案非常适用于谷歌字体。

Answer 2

问题在于每个浏览器的渲染实现都不同。这就是为什么你会得到略微不同的结果而且你几乎坚持下去。

但是this blog建议您尝试添加额外的CSS3 @font-face规则或使用font-synthesis属性。

另一种解决方案可能是使用Flash，图像，PDF或使用（并在不同浏览器中测试！）标准字体。

祝你好运！

Answer 3

您可能忘记在代码中添加字符集。

在复制代码之前，如果您选择Google字体中的字体，在网站上添加字符集：

  

  
1. 选择所需的字符集：   Cyrillic Extended（cyrillic-ext）拉丁语（拉丁语）希腊语扩展（greek-ext）希腊语（希腊语）越南语（越南语）拉丁语扩展（latin-ext）西里尔语（西里尔语）
  

如果您需要拉丁语，例如，在字体名称（和字体样式）之后添加＆amp; subset = latin，latin-ext 。 代码看起来像这样：

  

http://fonts.googleapis.com/css?family=MyFont&subset=latin,latin-ext'的rel =＆＃39;样式表＆＃39;类型=＆＃39;文本/ CSS＆＃39;＆GT;

希望这有帮助！