CSS3 @ font-face不渲染Opera 11.x中的字体 [英] CSS3 @font-face Not Rendering Font in Opera 11.x

问题描述

我遇到Opera无法正常显示我的HTML5网站的问题。网站和我的@ font-face在Safari，Chrome，IE9，Firefox 3.5+等工作完美。我想知道是否有人遇到这个问题，以及如何修复它。下面是我的代码细分：

I'm running into an issue with Opera not rendering my HTML5 site properly. The site and my @font-face are working perfectly in Safari, Chrome, IE9, Firefox 3.5+, etc. I'm wondering if someone has run into this issue before and how they fixed it. Here's a breakdown of my code:

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

In the root I have a folder called fonts. This folder has all my font files and a stylesheet called stylesheet.css that looks like this:

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

我的主页相应地引用此样式表：

My home page is referencing this stylesheet accordingly:

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

我有一个类似下面的菜单：

I have a menu that looks similar to this:

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

在另一个文件中，此菜单的样式如下：

My styles for this menu in another file look like this:

.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而不是渲染。

Again, this code works fine in other browsers, it's just barking in Opera 11.x and not rendering. Any help would be greatly appreciated!

推荐答案

当字体文件提供未知或意外的内容类型标题时，可能会发生这种情况。

This can happen sometimes when the font file is served with an unknown or unexpected content type header.

验证您的WOFF和TTF文件是否提供 Content-Type：application / octet-stream标题。

Verify that your WOFF and TTF files are being served with an Content-Type: "application/octet-stream" header.

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

If you're using Apache, add the following to your .htaccess file.

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

(And please post a jsFiddle of your code above if this doesn't work.)

这篇关于CSS3 @ font-face不渲染Opera 11.x中的字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！