谷歌网络字体在IE9上无法正常显示

Question

谷歌网络字体在IE9上无法正常显示

5

我正在使用Google Web Fonts，所有浏览器都能正确呈现字体，除了IE9。（我没有在早期版本的IE上测试过。）

以下是差异：IE 9 vs. Google Chrome HTML：

<head>
        <link href='http://fonts.googleapis.com/css?family=Yeseva+One' rel='stylesheet' type='text/css'>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">

        <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">

        <script src="js/vendor/modernizr-2.6.2.min.js"></script>
</head>

Google Fonts文件的内容：

@font-face {
  font-family: 'Yeseva One';
  font-style: normal;
  font-weight: 400;
  src: local('Yeseva One'), 
       local('YesevaOne'), 
       url(http://themes.googleusercontent.com/static/fonts/yesevaone/v6/wVgDKaRrT3DN9VGcOY4orxsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}

CSS：

.sf-menu li {
    float:left;
    position:relative;
    text-align:center;
    font-family:'Yeseva One',cursive;
    font-size:17px;
    line-height: 64px;
    border-bottom:1px solid #4A4A4A;
}

我该怎么办？

- Ramin Omrani

这是代码：http://pastebin.ca/2293999 - Ramin Omrani

@bobthyasian：最终会失去很多用户吗？通常，一个网站应该是跨浏览器兼容的，至少要适用于流行浏览器的新版本。 - Pranav 웃

@PranavKapoor 这只是个玩笑。但我仍然劝阻每一个人不要使用IE。Firefox或Chrome通常更好。虽然IE9还可以，但如果它真的很棒，就不需要在顶部放置“兼容性”按钮了。 - bobthyasian

你能重新上传你的截图吗？ - Jules Colle

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jukka K. Korpela · Accepted Answer

目前情况的信息不足，但看起来你正在IE 9上本地测试页面。在这种情况下，如果你查看开发人员工具（F12），其中的控制台部分，你会看到一个CSS3317错误消息。它说@font-face由于跨站点访问限制而失败。

这只会在IE 9的“标准模式”下发生，但这是在你使用meta标签时出现的问题。

这个问题只是一个开发者的困扰（除非你正在创建一个HTML应用程序，旨在作为下载应用程序在用户本地运行 - 在这种情况下，请将字体文件包含在应用程序包中）。当你上传文件到HTTP服务器并从那里进行测试时，该问题不会出现。

添加：演示可以在IE 9上正常工作，甚至在标准模式下也一样，但是如果你将其下载并在IE 9上本地打开，它将失败（你会看到替代字体Courier）; 然后，在开发人员工具中，如果将文档模式设置为Quirks，它将再次工作。- Google建议你使用由Google托管的字体，但它也提供下载并拥有非常宽松的使用规则。然而，下载链接通常只会给你一个TTF文件（作为压缩文件），所以你需要使用像FontSquirrel这样的服务来生成其他格式。