CSS谷歌字体 - 斜体在IE中变得越来越紧张

Question

我对Google字体有疑问。我正在使用字体＆＃34; Lato＆＃34;来自Google Fonts，它似乎在Firefox，Chrome，IE9中运行完美，但在IE 7和8中，斜体版本看起来非常紧张。

我只是使用

做了太疯狂的事情

font-style:italic; font-weight:700;

并使用以下字体包含：

<link href='http://fonts.googleapis.com/css?family=Lato:400,700,700italic,900italic' rel='stylesheet' type='text/css'>

这是谷歌字体的已知问题还是我做错了？

谢谢！

Answer 1

这是一个老问题，但是谷歌搜索了一个小时，为IE8中的这种虚假大胆和虚假斜体找到了一个简单的解决方法。 这对我有用： 而不是一次加载所有字体我逐个加载它们。我更喜欢css文件中的@import方法，所以它是这样的：

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:600);

Answer 2

无论出于何种原因（也许有人可以帮助解决原因），Google决定不向IE用户提供除常规字体以外的任何字体变体。此行为似乎由user-agent控制 - 如果您在Firefox vs IE中加载CSS URL（在您的情况下为http://fonts.googleapis.com/css?family=Lato:400,700,700italic,900italic），您将看到只有一个@font-face块返回到IE。< / p>

因此，最简单的解决方法是在Firefox中加载该网址并将CSS复制/粘贴到您自己的css文件中，而不是直接从Google提供。现在IE也可以访问所有字体变体......但从技术上讲，你打破了CSS文件和基础字体文件之间的链接，应该永远不会改变，但这完全取决于Google的判断力

不幸的是（可能是他们推理的一部分），IE即使在那时也没有特别好地呈现字体。在我的测试中，半纤维重量显示出比它应该更大胆，并且斜体看起来间隔太远。至少在没有额外变体的情况下，它仍然看起来比使用人造斜体字体IE呈现更令人愉快。

修改： 经过一些更多的研究，我找到了一个很好的页面on Typekit，它详尽地记录了这个问题。基本上，IE在自定义字体系列方面是非常有限的 - 你能够用IE获得成功的唯一方法是在IE中将你的变体定义为单独的字体系列，然后利用那些不同的字体您可以在其他浏览器中使用font-weight和font-style。这应该为您提供通用兼容性。

edit2 ：事实证明，IE字体的网址与其他浏览器的网址不同（IE使用的是eot格式而不是woff）。有关如何使字体工作的详尽过程如下：

• 在firefox / chrome / etc中打开http://fonts.googleapis.com/css?family=Lato:400,700,700italic,900italic并将css复制到新文件或复制到仅限样式表。
• 通过并取出所有'本地'和'格式'src定义，只留下'url'部分。
• 对于字体样式表url中指定的每个变体（在您的示例中，这些变体将是400,700,700,700italic和900italic），在IE中使用仅此变体加载字体样式表并打开结果CSS在文本编辑器中。例如，加载http://fonts.googleapis.com/css?family=Lato:900italic以获得超棒斜体变体。
• 在新样式表中找到匹配的变体（font-style和font-weight属性应该匹配）并将woff src url替换为IE的eot。同时给字体一个不同的系列 - 我建议使用Typekit这样的样式和重量加后缀，这样 Open Sans 就会变成 Open Sans i9 等等。
• 对所有剩余的变体执行此操作。
• 有条件地将此新样式表替换为您已用于其他浏览器的样式表。
• 无论您在css中使用font-style还是font-weight，还要添加font-family，并将新姓氏 AND 引用为正确的姓氏其他浏览器看到。例如：font-family: 'Open Sans i9', 'Open Sans'; font-weight: 900; font-style: italic;。这将使用IE兼容性的字体系列名称，以及其他浏览器中的基本系列+变体。

Answer 3

两个样本没有显示相同的斜体字体。我猜IE7 / 8是人为的斜体。我进一步猜测这是因为字体重量与字体文件中的字体重量不匹配;尝试使用500的重量。