谷歌网页字体未在 IE8 中呈现答案

【问题标题】：Google web fonts not rendered in IE8谷歌网页字体未在 IE8 中呈现
【发布时间】：2014-04-24 11:46:07
【问题描述】：

我看过这个：Google Web Fonts don't work in IE8，还有这个：How to make Google Fonts work in IE?。都不适合我。第一个建议不要一次导入太多字体，而后者自 2010 年修复该错误以来已过时。

HTML如下：

<!DOCTYPE html>
<html lang="en">
        <head>
                <meta charset="utf-8">
                <title>Font Test</title>
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <meta name="description" content="Google Fonts Test">

                <link type='text/css' href='https://fonts.googleapis.com/css?family=Cantarell' rel='stylesheet'>
                <link type='text/css' href='https://fonts.googleapis.com/css?family=Play:700' rel='stylesheet'>
                <link type='text/css' href='https://fonts.googleapis.com/css?family=Muli:300' rel='stylesheet'>
                <!--<link type='text/css' href='//fonts.googleapis.com/css?family=Lato:900' rel='stylesheet'>-->

                <link type="text/css" href="https://static.mysite.com/blah/font-test.css" rel="stylesheet">
        </head>
        <body>
                <div class="page-title">
                        This Is Title
                </div>
                <div class="page-content">
                        This is content
                </div>
        </body>
</html>

这是对应的 CSS：

body {
        height: 100%;
        width: 960px;
        min-height: 550px;
        max-height: 1080px;
        margin: 20px 60px 40px 20px;
        padding-left: 10px;
        padding-right: 10px;

        background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAKklEQVQIW2OceOe1cb6K6FkGJAASYwTxkSVhbLAETBJEw3Tjl8BqFC7LAdSSJR3onNbEAAAAAElFTkSuQmCC) repeat;
}

.page-title {
        height: 55px;
        font: 38px "Play";
}

.page-content {
        font: 16px "Cantarell";
        width: 630px;
        text-align: justify;
}

以上内容在最新的 Chrome 中进行了测试，运行良好。然而，由于某种原因，它在 IE8 中不起作用。我有什么遗漏吗？

更新：IE8 根本不适用于 Google Fonts API。事实上，如果我使用 IE8 浏览 Google Fonts API 页面上的许多字体样本，它们都不能正确呈现。使用这些字体的唯一可靠方法是将它们转换为 EOT 类型（以及 WOFF 类型），然后从您的服务器提供它们，这很遗憾，因为您不能再使用 Google 的 CDN。

【问题讨论】：

你有没有试过像font-size: 16px; font-famil...这样写你的规则？
@Rchristiani，是的，我刚刚尝试过，但仍然无法正常工作。但是，我在 IE8 的开发人员工具中注意到 font-family: "Play"; FONT-SIZE: 38px 和 font-family: "Cantarell"; FONT-SIZE: 16px，这似乎是 font-size 属性合并到 font-family 属性 - 这很奇怪......
怀疑它会有所帮助，但使用https://fonts.googleapis.com/css?family=Cantarell|Play:700|Muli:300而不是多个请求会更好地提高性能。

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

【解决方案1】：

我对其他答案和 cmets 感到困惑，所以我就把它扔在那里。每当您使用数据 uri、属性或集合时，您就是在冒险进入一个 IE 不支持或限制它的领域。只有现代浏览器才能正确处理它们，但我是通过手机执行此操作的，无法进一步了解。结帐http://caniuse.com/#search=data

【讨论】：

【解决方案2】：

某些浏览器上的某些 Google 字体出现问题并不少见，尤其是在远程使用时（Google 推荐的方式）。它通常有助于下载字体，使用例如生成字体文件。 FontSquirrel，然后将它们上传到您的服务器上。

【讨论】：

我只是尝试了这篇文章中使用的字体：stackoverflow.com/questions/9050747/…，它已解决在 IE8 中工作。但是，在我的情况下，它仍然没有渲染，所以它必须是别的东西，而不是个别字体兼容性问题。
我刚刚测试了我对 Cantarell 字体的建议，它在 IE 9 上运行良好，在 IE 9 上直接使用来自 Google 服务器的字体失败。此外，Firefox 上的渲染效果稍好一些。现在，查看 IE 9 开发人员工具 (F12) 中的控制台日志，我可以看到一条关于由于跨域请求而失败的消息。这可能仅在您直接在 IE 9 的本地文档中使用 Google 字体时发生——在服务器上，它们可能工作正常。但下载字体等仍然是可取的。
感谢您试用。我在服务器上使用它，此外，我们在这里谈论IE8。我认为IE9 中的字体支持比IE8 有所改进。我想我会试试这个：tatiyants.com/…
您提到的页面建议的方法与我描述和测试的方法相同。