Шрифт Удивительные шрифты отображаются в виде ящиков на IE8

Итак, я использую Font Awesome в проекте и при тестировании у меня возникают проблемы с IE8.

В Windows IE9 Chrome и Firefox правильно отображают шрифт (как Firefox, Chrome и Safari для OS X), но IE8 в Windows имеет проблему, когда я получаю вместо шрифта поле.

enter image description here

Мой код:

<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->

<head>
    <meta charset="utf-8" />
    <title>Site title</title>

    <!--[if lt IE 9]>
        <script src="https://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

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

    <link href="../apple-touch-icon.png" rel="apple-touch-icon-precomposed">
    <link href="../css/jquery-ui-1.8.23.custom.css" rel="stylesheet" type="text/css">
    <link href="../css/jquery-ui-overrider.css" rel="stylesheet" type="text/css">
    <link href="#" onclick="location.href='https://fonts.googleapis.com/css?family=Lato|Michroma&subset=latin&v2'; return false;" rel="stylesheet" type="text/css">
    <link href="../css/prettify.css" rel="stylesheet" type="text/css">
    <link href="../css/font-awesome.css" rel="stylesheet" type="text/css">
    <!--[if IE 7]>
        <link href="../css/font-awesome-ie7.css" rel="stylesheet">
    <![endif]-->

У меня есть четыре файла шрифтов...

  • fontawesome-webfont.eot
  • fontawesome-webfont.svg
  • fontawesome-webfont.ttf
  • fontawesome-webfont.woff

... где они принадлежат, и они читаются миром (755 разрешений). Что мне не хватает? Должен ли я что-то делать с представлением совместимости в IE8?

Тот же компьютер просматривает шрифты на сайте Font Awesome просто отлично, поэтому он должен быть чем-то, что я делаю неправильно.

В соответствии с запросом копия font-awesome.css находится здесь: font-awesome.css. Это более или менее то, что я скачал с них, за исключением пути к файлам шрифтов.

Основываясь на @Abody97, я добавил https://html5shim.googlecode.com/svn/trunk/html5.js в микс (приведенный выше код был обновлен). Еще не повезло, даже после обновления и обновления кеша обновления.

Ответы

Ответ 1

У меня была та же проблема и я нашел решение, я отправлю его здесь, если кому-то все еще понадобится.

Проблема заключалась в том, что IE не загружал файлы шрифтов, он создавал странные запросы GET, которые возвращали 404 ошибки.

Используя трюк, найденный здесь: http://www.fontspring.com/blog/fixing-ie9-font-face-problems Я смог исправить эту проблему.

Добавьте ?#iefix к URL-адресу в CSS, который содержит шрифт-грани (в данном случае font-awesome.css)

@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
     url('webfont.woff') format('woff'), /* Modern Browsers */
     url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
     url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Ответ 3

Попробуйте добавить это в свой head, прежде чем включать CSS:

<!--[if lt IE 9]>
  <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Ответ 4

имела ту же проблему и решила ее, установив уровень безопасности IE8 на что-то ниже "Высокое".

В общем, я могу воспроизвести "ящики", сделав файлы шрифтов (eot, woff, ttf...) "недоступными" (например, получив ответ 404) - поэтому я предполагаю, что на уровне securiy "High" они просто не загружены...

Ответ 5

Оказывается, что дополнительный тег <html> генерируется включенным файлом, который был источником моих проблем. Итак, в моем конечном файле у меня были оба <html lang="en"> И <html>. Дополнительный тег <html> бросал IE в режим quirks, из-за которого возникла проблема с шрифтом, который у меня был.

Устранение этого жулика <html> и проверка моих заголовков были правильно установлены для меня.

Теперь я использую шаблонный набор тегов заголовков на всех страницах:

<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>    
    <meta http-equiv="X-UA-Compatible" content="IE=9" />
    <meta charset="utf-8" />

Прежде, чем я получил это на одной странице:

<!DOCTYPE html>
<html lang="en">
<html>  <!-- This tag was causing the problem, removing it solved things for me -->
<head>    
    <meta http-equiv="X-UA-Compatible" content="IE=9" />
    <meta charset="utf-8" />

Ответ 6

Создание контроля кэша в заголовке ответа как частного для файла шрифта отлично работает в IE8 для меня. Дополнительную информацию об этом можно найти здесь, где он объясняет, как он решил для файлов PDF (Невозможно отобразить PDF из HTTPS в IE 8 (на 64-разрядной версии Vista)).

Надеюсь, что это поможет.

Ответ 7

В среде IIS (MVC) мне пришлось добавить следующее правило в мой Web.config:

   <system.web>
    <httpHandlers>
      <add verb="GET" path="*.eot" type="System.Web.StaticFileHandler" />
      <add verb="GET" path="*.svg" type="System.Web.StaticFileHandler" />
      <add verb="GET" path="*.ttf" type="System.Web.StaticFileHandler" />
      <add verb="GET" path="*.woff" type="System.Web.StaticFileHandler" />
      <add verb="GET" path="*.otf" type="System.Web.StaticFileHandler" />
    </httpHandlers>
  </system.web>

Ответ 8

IE под 9 версией не поддерживает woff формат файла. Вероятно, это ответ, почему вы не можете получить их на IE8

Ответ 9

Единственное, что сработало для меня, это:

https://github.com/FortAwesome/Font-Awesome/issues/2324

В сочетании с другим ответом от Джейсона: например Вместо:

<i class="fa fa-user fa-lg"></i>

использование:

<i class="fa fa-lg">&#xf007;</i>

Ответ 10

Это не только IE, все браузеры имеют одинаковую проблему.

Самое смешное, что вам нужно разместить свои файлы в нужном месте.

Это означает, что вам нужна следующая структура:

folder levels look like this:

    level 1                 level 2  level 3

----index.html 

----font-awesome-4.2.0  ----css ---- fontawesome.css

                        ----css ---- fontawesome.min.css 

                        ----fonts----... 

                                 ----... 

                        ----...

а затем поместите ссылку sylte в свой index.html как

<link rel="stylesheet" href="./font-awesome.min.css"> между головкой

очень важно отметить: НЕ пытайтесь СОЗДАТЬ файловую папку и любую другую папку. Держите их отдельно.

теперь протестируйте его, и все будет хорошо.