IE8 中的 Google 字体：页面加载时短暂显示的正确字体，然后被覆盖答案

【问题标题】：Google font in IE8: Correct font displayed briefly on page load, then overriddenIE8 中的 Google 字体：页面加载时短暂显示的正确字体，然后被覆盖
【发布时间】：2013-09-24 20:04:37
【问题描述】：

问题：

在 IE8 中，h1.startpage-heading 应为“Roboto”，字体粗细为 100。如果可能，在 IE7 中也是如此。

背景：

我已经阅读了 SO 和 http://code.google.com/p/googlefontdirectory/issues/detail?id=9（请参阅帖子 #13）。

我在针对 IE8 的 CSS 文件中放置了一个 @font-face 声明。在@font-face 中，我将字体重命名为“RobotoThin”。然后我在同一个 IE8-CSS 文件中使用声明的字体：

@font-face {
    font-family: 'RobotoThin';
    font-style: normal;
    font-weight: 100;
    src: url(http://themes.googleusercontent.com/static/fonts/roboto/v9/PP2U5prMl9yvKSWVu6DtvPesZW2xOQ-xsNqO47m55DA.eot);
    src: local('Roboto Thin'), local('Roboto-Thin'), url(http://themes.googleusercontent.com/static/fonts/roboto/v9/PP2U5prMl9yvKSWVu6DtvPesZW2xOQ-xsNqO47m55DA.eot) format('embedded-opentype'), url(http://themes.googleusercontent.com/static/fonts/roboto/v9/vzIUHo9z-oJ4WgkpPOtg1_esZW2xOQ-xsNqO47m55DA.woff) format('woff');
}
.startpage-heading {
    font-family: 'RobotoThin';
    color:red;
}

案例：

在 IE8 中加载页面时，正确的字体会在被其他字体系列声明覆盖之前短暂显示（尽管文本仍然是红色的）。在 IE 开发工具中检查标题时，该元素似乎继承自正确的 CSS 声明。

更多背景：

当我尝试将 !important 放在 IE8-CSS 中的“RobotoThin”之后时，问题没有解决。

谢谢！

【问题讨论】：

标签： internet-explorer-8 google-font-api

【解决方案1】：

IE7-8 问题已解决：

发现您必须提供与 IE7-8 的 index.html 相同域的字体，您无法链接到其他域，例如 http://themes.googleusercontent.com。

【讨论】：