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

Question

我对Google字体有疑问.我正在使用来自Google Fonts的字体"Lato" ,它似乎在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网址(在您的情况下为http://fonts.googleapis.com/css?family=Lato:400,700,700italic,900italic),您会看到只有一个@font-face块返回IE.

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

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

编辑:经过一些研究,我在Typekit上找到了一个很好的页面,详尽地记录了这个问题.基本上,IE在自定义字体系列方面是非常有限的 - 你能够用IE获得成功的唯一方法是在IE中将你的变体定义为单独的字体系列,然后利用那些不同的字体你可以使用font-weight和font-style在其他浏览器.这应该给你普遍的兼容性.

edit2:事实证明,IE字体的网址与其他浏览器的网址不同(IE使用的是eot格式而不是woff).有关如何使字体工作的详尽过程如下:

• 打开http://fonts.googleapis.com/css?family=Lato:400,700,700italic,900italic在Firefox/Chrome浏览器的/ etc和CSS复制到一个新的文件,或到您的IE浏览器只是样式表.
• 通过并取出所有'本地'和'格式'src定义,只留下'url'部分.
• 对于您的字体样式表URL指定的每个变体(在你的榜样,这些将是400,700,700italic和900italic),加载在IE浏览器的字体样式与仅此变异并在文本编辑器中打开生成的CSS.例如,加载http://fonts.googleapis.com/css?family=Lato:900italic以获取superbold斜体变体.
• 在新样式表中找到匹配的变体(font-style和font-weight属性应该匹配)并将woff srcurl 替换为IE的eot url.同时给这个字体一个不同的家族 - 我建议使用像Typekit这样的样式和重量的后缀,这样Open Sans就变成了Open Sans i9,依此类推.
• 对所有剩余的变体执行此操作.
• 有条件地将这个新样式表替换为您已经用于其他浏览器的样式表.
• 无论你已经使用font-style或font-weight在你的CSS,加font-family为好,引用新的姓和正确的姓由其他浏览器所看到.例如:font-family: 'Open Sans i9', 'Open Sans'; font-weight: 900; font-style: italic;.这将使用IE兼容性的字体系列名称,以及其他浏览器中的基本系列+变体.