Internet Explorer 8 中的字体问题答案

【问题标题】：Font Face issues in Internet Explorer 8Internet Explorer 8 中的字体问题
【发布时间】：2015-06-05 01:55:29
【问题描述】：

我为 IE 8 创建了一个测试页面，看看我是否可以使用 Google 字体。您可以在问题的末尾找到代码。

我通过使用带有列表的元素来包含我需要的所有 Google 字体。

现在，根据元素中的 HREF 属性长度，Google 字体可能无法在 IE 8 中使用。

以下是案例：

如果我有：

<link rel=stylesheet type="text/css"
    href="//fonts.googleapis.com/css?family=Tangerine|Open+Sans|Droid+Sans|PT+Sans|Josefin+Slab|Arvo|Lato" />

Google 字体在 IE 8 中不起作用。

现在，如果我删除“Lato”，最后指定的字体：

<link rel=stylesheet type="text/css"
    href="//fonts.googleapis.com/css?family=Tangerine|Open+Sans|Droid+Sans|PT+Sans|Josefin+Slab|Arvo" />

Google 字体可以在 IE 8 中使用。

在这两种情况下，它们在 Chrome 中都能正常工作，这仅与 IE 8 相关。

测试页面的HTML代码：

<html>
<head>
<link rel=stylesheet type="text/css"
  href="//fonts.googleapis.com/css?family=Tangerine|Open+Sans|Droid+Sans|PT+Sans|Josefin+Slab|Arvo|Lato" />

<style>
div {
  font-size: 36px;
  font-family: 'Tangerine'; /* here is the google font */
}
</style>

</head>
<body>
  <div>This div will get the google font family</div>
</body>
</html>

【问题讨论】：

您是否在 Google 的问题跟踪器中提交了该问题？这似乎是获得最佳答案的一种更可靠的方法。

标签： css internet-explorer fonts internet-explorer-8 font-face

【解决方案1】：

是的，这是 IE 的问题 - 对于 IE8 及更低版本 - 一种解决方案是在条件语句中分离出每种字体的链接 - 它不喜欢链接属性中的长字体堆栈跟踪。

<!--[if lte IE 8]>
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Tangerine" /> 
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans" /> 
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Droid+Sans" />
<![endif]-->

【讨论】：