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

Ram*_*min 5 css google-webfonts internet-explorer-9

我正在使用Google Web Fonts.除IE9外,所有浏览器都正确呈现字体.(我没有在早期版本的IE上测试过).

区别在于:IE 9谷歌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>
Run Code Online (Sandbox Code Playgroud)

Google字体文件内容:

@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');
}
Run Code Online (Sandbox Code Playgroud)

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;
}
Run Code Online (Sandbox Code Playgroud)

我该怎么办?

Juk*_*ela 4

关于这种情况的信息仍然不足,但似乎您正在 IE 9 上本地测试页面。在这种情况下,如果您查看开发人员工具 (F12) 的控制台部分,您将看到 CSS3317 错误消息。它说@font-face由于跨站点访问限制而失败。

\n\n

meta这种情况仅在 IE 9 上的 \xe2\x80\x9cStandards Mode\xe2\x80\x9d 中发生,但是 \xe2\x80\x99 是在代码中使用标签时得到的结果。

\n\n

这个问题只是一个开发人员\xe2\x80\x99s的麻烦(除非您正在创建一个应该在本地用户\xe2\x80\x99系统上运行的HTML应用程序,在这种情况下作为下载的应用程序\xe2\x80\x93 ,将字体文件包含在应用程序包中)。当您将文件上传到 HTTP 服务器并从那里进行测试时,问题不会出现。

\n\n

补充:即使在标准模式下, 演示也可以在 IE 9 上正常工作,但如果您下载它并在 IE 9 上本地打开它,它会失败(您会看到后备字体,Courier);然后,在开发人员工具中,如果将文档模式设置为 Quirks,它会再次起作用。\xe2\x80\x93 Google 建议您使用 Google 托管的字体,但它也提供下载并具有非常宽松的使用规则。但是,下载链接通常只提供 TTF 文件(压缩后),因此您需要使用FontSquirrel等服务等服务来生成其他格式。

\n