Question

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

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字体文件内容：

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

我该怎么办？

Answer 1

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

仅在“标准模式”下在IE 9上发生这种情况，但这就是在代码中使用meta标记时所获得的结果。

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

已添加： Demo即使在标准模式下也可在IE 9上正常运行，但如果您下载并在IE 9上本地打开它，则会失败（您会看到后备字体，信使）;然后，在开发人员工具中，如果将文档模式设置为Quirks，它将再次起作用。 - Google建议您使用由Google托管的字体，但它也提供下载并且具有非常宽松的rules of use。但是，下载链接通常只为您提供一个TTF文件（压缩），因此您需要使用FontSquirrel之类的服务来生成其他格式。

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

1 个答案: