CSS Google字体 – 斜体在IE中

前端之家收集整理的这篇文章主要介绍了CSS Google字体 – 斜体在IE中前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个关于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'>

这是Google Fonts的已知问题,还是我做错了?

谢谢!

解决方法

无论什么原因(也许有人可以帮助原因),Google决定不向IE用户提供除常规之外的任何字体变体.这个行为似乎是由user-agent控制的 – 如果在Firefox和IE中加载CSS url(在你的情况下为 http://fonts.googleapis.com/css?family=Lato:400,900italic),你会看到只有一个@ font-face块返回给IE.

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

不幸的是(可能是他们的推理的一部分),即使这样,IE也不会使字体特别好.在我的测试中,半宝宝的体重显得比它应该更大胆,而斜体似乎间隔得太远.至少,它还是比原始倾斜字体IE呈现更加愉快,没有额外的变体.

编辑:
经过一些更多的研究,我发现了一个很棒的页面on Typekit,它详尽地记录了这个问题.基本上,IE在定制字体系列方面极其有限 – 您将能够通过IE实现成功的唯一方法是将您的变体定义为IE中独立的字体系列,然后使用不同的字体,您可以在其他浏览器中使用font-weight和font-style.这应该给你普遍的兼容性.

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

>在firefox / chrome / etc中打开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,引用新的姓氏和其他浏览器所看到的正确的姓氏.例如:font-family:’Open Sans i9′,’Open Sans’; font-weight:900; font-style:italic ;.这将使用字体系列名称进行IE兼容性,其他浏览器中使用基本系列变体.

猜你在找的CSS相关文章