Веб-шрифты Google не отображаются должным образом в IE9

Я использую веб-шрифты Google. Все браузеры правильно отображают шрифт, кроме IE9. (Я не тестировал более ранние версии IE).

Вот разница: IE 9 по сравнению с Google Chrome< /сильный>

HTML:

<head>
        <link href='http://fonts.googleapis.com/css?family=Yeseva+One' rel='stylesheet' type='text/css'>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">

        <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">

        <script src="js/vendor/modernizr-2.6.2.min.js"></script>
</head>

Содержимое файла Google Fonts:

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

Что я должен делать?


css google-webfonts internet-explorer-9
person Ramin    schedule 16.12.2012    source источник
comment
вот код: pastebin.ca/2293999   -  person Ramin    schedule 16.12.2012
comment
@bobthyasian: и в конечном итоге потерять много пользователей? Как правило, веб-сайт должен быть кроссбраузерным, по крайней мере, для новых версий популярных браузеров.   -  person Pranav 웃    schedule 16.12.2012
comment
@PranavKapoor Это была более/менее шутка. Но все же я отговариваю всех, кого могу, от использования IE. Firefox или Chrome обычно лучше. Хотя IE9 «нормальный», но если бы он был отличным, ему не понадобилась бы кнопка вверху для «совместимости».   -  person bobthyasian    schedule 16.12.2012
comment
можешь перезалить свои скриншоты?   -  person Jules Colle    schedule 18.09.2019

Ответы (1)


arrow_upward
4
arrow_downward

Информации о ситуации пока недостаточно, но похоже, что вы тестируете страницу локально в IE 9. В таком случае, если вы посмотрите на инструменты разработчика (F12), часть Console, вы увидите сообщение об ошибке CSS3317. В нем говорится, что @font-face не удалось выполнить из-за ограничений межсайтового доступа.

Это происходит в IE 9 только в «стандартном режиме», но это то, что вы получаете при использовании тега meta, как в вашем коде.

Проблема заключается в том, что разработчику это доставляет неудобство (если только вы не создаете HTML-приложение, которое должно запускаться в системах пользователей локально, как загруженное приложение — в этом случае включите файлы шрифтов в пакет приложения). Когда вы загружаете файлы на HTTP-сервер и тестируете оттуда, проблема не появляется.

Добавлено: демонстрация, которая работает нормально на IE 9 даже в стандартном режиме, но если его загрузить и открыть локально в IE 9, он не работает (вы видите резервный шрифт Courier); а затем в инструментах разработчика, если вы установите для режима документа значение Quirks, он снова заработает. – Google рекомендует использовать шрифты, размещенные в Google, но также обеспечивает загрузку и имеет очень разрешительный правила использования. Однако ссылки для скачивания обычно дают вам только файл TTF (в заархивированном виде), поэтому вам необходимо использовать такие службы, как FontSquirrel для создания других форматов.

person Jukka K. Korpela    schedule 16.12.2012
comment
Если вы можете выложить демо, где мы сможем его посмотреть, я, возможно, съел бы ворону, потому что это звучит знакомо (и считается ли IE9 современным браузером?). Может быть, мне следовало сначала вернуться и прочитать свой собственный ответ. Эх. Хотя там есть кое-что хорошее... :P И еще одно замечание: можете ли вы загружать и обслуживать файлы шрифтов Google? - person Jared Farrish; 16.12.2012