CSS3 @font-face 在 Opera 11.x 中不渲染字体

Question

我遇到了 Opera 无法正确呈现我的 HTML5 网站的问题。该网站和我的@font-face 在 Safari、Chrome、IE9、Firefox 3.5+ 等中运行良好。我想知道是否有人以前遇到过这个问题以及他们是如何解决的。这是我的代码的细分：

在根目录中，我有一个名为 fonts 的文件夹。这个文件夹包含我所有的字体文件和一个名为 stylesheet.css 的样式表，如下所示：

@font-face {
    font-family: 'LeagueGothicRegular';
    src: url('League_Gothic-webfont.eot');
    src: url('League_Gothic-webfont.eot?#iefix') format('embedded-opentype'),
         url('League_Gothic-webfont.woff') format('woff'),
         url('League_Gothic-webfont.ttf') format('truetype'),
         url('League_Gothic-webfont.svg#LeagueGothicRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

我的主页相应地引用了这个样式表：

<link rel="stylesheet" href="fonts/stylesheet.css" type="text/css"/> 

我有一个类似这样的菜单：

<nav>
    <div class="main_nav">
        <div class="nav_button">
            <ul>
                <li class="red"><a href="index.htm">HOME</a>
                    <ul>
                        <li><a href="about.htm">ABOUT</a>
                            <ul>
                                <li><a href="history.htm">History</a></li>
                                <li><a href="management.htm">Management</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
            ...
        </div>
    </div>
</nav>

我在另一个文件中的这个菜单的样式如下所示：

.nav_button {height:110px; margin:0px 1px 0px 0px; font: 34px 'LeagueGothicRegular', Arial, sans-serif; letter-spacing: 0; line-height:34px; float:left;}

.nav_button ul { 
    margin: 0px 0px 0px 0px;
    padding: 0px;
    display:block;
    float: left;
    position: relative;
    list-style: none;
    cursor:pointer;
}
.nav_button ul li { 
    margin: 0px 0px 0px 0px;
    padding: 0px;

    float: left;
    position: relative;
    list-style: none;
}

同样，这段代码在其他浏览器中也能正常工作，它只是在 Opera 11.x 中运行而不是渲染。任何帮助将不胜感激！

Answer 1

当字体文件带有未知或意外的内容类型标头时，有时会发生这种情况。

验证您的 WOFF 和 TTF 文件是否使用 Content-Type: "application/octet-stream" 标头提供。

如果您使用的是 Apache，请将以下内容添加到您的 .htaccess 文件中。

<IfModule mod_headers.c>
  <FilesMatch "\.woff$">
     Header set Content-Type "application/octet-stream"
  </FilesMatch>

  <FilesMatch "\.ttf$">
     Header set Content-Type application/octet-stream
  </FilesMatch>
</IfModule>

（如果这不起作用，请在上面发布您的代码的 jsFiddle。）