CSS3 @ font-face Не рендеринг шрифта в Opera 11.x - PullRequest
Новая
       12

CSS3 @ font-face Не рендеринг шрифта в Opera 11.x

1 голос
/ 01 марта 2012

У меня проблема с Opera, которая неправильно отображает мой HTML5-сайт.Сайт и мой @ font-face отлично работают в Safari, Chrome, IE9, Firefox 3.5+ и т. Д. Мне интересно, сталкивался ли кто-нибудь с этой проблемой ранее и как они ее исправили.Вот разбивка моего кода:

В корне у меня есть папка с именем шрифты.В этой папке есть все мои файлы шрифтов и таблица стилей с именем 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;
}

Опять же, этот код отлично работает в других браузерах, он просто лаетОпера 11.х и не рендеринг.Любая помощь будет принята с благодарностью!

1 Ответ

4 голосов
/ 02 марта 2012

Это может происходить иногда, когда файл шрифта обслуживается с неизвестным или неожиданным заголовком типа контента.

Убедитесь, что ваши файлы 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 вашего кода выше, если это не работает.)

...