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

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

HTML：


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

我该怎么办？


最佳答案
关于这种情况仍然没有足够的信息,但似乎你在IE 9本地测试页面.在这种情况下,如果你看一下开发人员工具(F12),部分控制台,你会看到一个CSS3317错误消息.它说由于跨站点访问限制,@ font-face失败了.
这种情况仅在“标准模式”下在IE 9上发生,但这就是在代码中使用元标记时所获得的结果.
问题只是开发人员的麻烦(除非您创建一个应该在本地用户系统上运行的HTML应用程序,作为下载的应用程序 – 在这种情况下,包括应用程序包中的字体文件).当您在HTTP服务器上上载文件并从那里进行测试时,不会出现问题.
补充：Demo即使在标准模式下也能在IE 9上运行正常,但是如果你下载它并在IE 9上本地打开它就会失败(你会看到后备字体,Courier);然后,在开发人员工具中,如果将文档模式设置为Quirks,它将再次起作用. –  Google建议您使用由Google托管的字体,但它也提供下载并且具有非常宽松的rules of use.但是,下载链接通常只为您提供TTF文件(如压缩),因此您需要使用像FontSquirrel这样的服务来生成其他格式.

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

相关文章