5

我正在使用谷歌网络字体。除 IE9 外，所有浏览器都正确呈现字体。（我没有在早期版本的 IE 上测试过）。

区别如下：IE 9与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>

谷歌字体文件内容：

@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;
}

我应该怎么办？

4

1 回答 1

4

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

这仅在 IE 9 的“标准模式”中发生，但这就是meta在代码中使用标记时所得到的。

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

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

于 2012-12-16T08:50:21.920 回答