Ram*_*min 5 css google-webfonts internet-explorer-9
我正在使用Google Web Fonts.除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>
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)
我该怎么办?
关于这种情况的信息仍然不足,但似乎您正在 IE 9 上本地测试页面。在这种情况下,如果您查看开发人员工具 (F12) 的控制台部分,您将看到 CSS3317 错误消息。它说@font-face由于跨站点访问限制而失败。
\n\nmeta这种情况仅在 IE 9 上的 \xe2\x80\x9cStandards Mode\xe2\x80\x9d 中发生,但是 \xe2\x80\x99 是在代码中使用标签时得到的结果。
这个问题只是一个开发人员\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