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。）

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

1 个答案: