Как заставить Google Fonts работать в IE?

https://stackoverflow.com/questions/3694060

02-10-2019
|

Вопрос

Я разрабатываю сайт, который использует API Google Шрифтов.Это здорово, и предположительно было протестировано в IE, но при тестировании в IE 8 шрифты просто не стилизованы.

Я включил шрифт, как Google поручает, таким образом:

<link href="http://fonts.googleapis.com/css?family=Josefin+Sans+Std+Light"  
 rel="stylesheet" type="text/css" />

и добавил его имя в начале семейства шрифтов в CSS, таким образом:

body {
font-family: "Josefin Sans Std Light", "Times New Roman", Times, serif;
font-size: 16px;
overflow-y: scroll;
overflow-x: hidden;
color: #05121F;
}

Прекрасно работает в Chrome, Firefox, Safari.В IE 8 нет кубиков.Кто-нибудь знает, почему?

Решение

Метод, как указано в их технические соображения страница верна, так что вы определенно не делаете ничего неправильного.Однако, этот отчет об ошибке в коде Google указывают, что существует проблема со шрифтами, созданными Google для этого, особенно с версией для IE.Кажется, это влияет только на некоторые шрифты, но это настоящий облом.

Ответы в ветке показывают, что проблема связана с файлами, которые обслуживает Google, поэтому вы ничего не можете с этим поделать.Автор предлагает получить шрифты из альтернативных мест, например ШрифтSquirrel, и вместо этого обслуживать его локально. В этом случае вас также могут заинтересовать такие сайты, как Лига подвижного типа.

Н.Б.По состоянию на октябрь 2010 г. в отчете об ошибках Google Code проблема считается исправленной и закрытой.

Другие советы

Похоже, IE8-IE7 не может понять несколько стилей Google Web Font через тот же файл запрос используя link теги href.

Эти две ссылки помогли мне понять это:

Видеть это Откройте проблему Google, и посмотрите на комментарии.
Также видим этот ответ Stackoverlow Google Web Fonts не работают в IE8

Единственный способ, которым я получил его для работы в IE7-IE8, заключается в том, чтобы иметь только один запрос Google Web Font. И есть только один стиль шрифта в href из link ярлык:

Так что обычно вы бы имели это, объявляя несколько стилей шрифтов в том же запросе:

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400,600,300,800,700,400italic" />

Но в IE7-IE8 добавляют условное и указать каждый стиль шрифта Google отдельно И это будет работать:

<!--[if lte IE 8]>
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400" /> 
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:700" /> 
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:800" />
<![endif]-->

Надеюсь, это может помочь другим!

Google Fonts использует формат шрифта Web Open (WOFF), который хорош, потому что это рекомендуемый формат шрифта по W3C.

Т.е. версии старше IE9 не поддерживают формат шрифта Web Open (WOFF), потому что он не существует тогда. Чтобы поддержать <IE9, вам нужно служить вашим шрифтам в встроенном открытом типе (EOT). Для этого вам нужно будет написать свой собственный тег CSS Font-Face, а не использовать сценарий вставки от Google. Также вам нужно преобразовать оригинальный файл WOFF в EOT.

Вы можете преобразовать свой WOFF для EOT здесь, сначала преобразовав его в TTF, а затем в EOT:http://convertfonts.com/

Тогда вы можете обслуживать шрифт EOT так:

@font-face {
    font-family: 'MyFont';
    src: url('myfont.eot');
}

Теперь он работает в <IE9. Однако современные браузеры больше не поддерживают EOT, поэтому теперь ваши шрифты не будут работать в современных браузерах. Таким образом, вам нужно указать их обоих. Свойство SRC поддерживает это за Copcha Seperating URL-адреса шрифта и спецификация типа:

src: url('myfont.woff') format('woff'),
     url('myfont.eot') format('embedded-opentype');

Однако <IE9 не понимает этого, он просто решает текст между первой цитатой и последней цитатой, поэтому на самом деле он будет получать:

myfont.woff') format('woff'),
url('myfont.eot') format('embedded-opentype

как URL к шрифту. Мы можем исправить это, сначала указывая SRC только с одним URL, который является форматом EOT, то указав второе свойство SRC, предназначенное для современных браузеров и <IE9 не поймет. Потому что <IE9 не поймет этого, это проигнорирует тег, чтобы EOT все равно будет работать. Современные браузеры будут использовать последний указанный шрифт, который они поддерживают, так вероятно, WOFF.

src: url('myfont.eot');
src: url('myfont.woff') format('woff');

Поэтому только потому, что во втором свойстве SRC вы указываете format('woff'), <IE9 не поймет этого (или на самом деле он просто не может найти шрифт на URL myfont.woff') format('woff) и будет продолжать использовать первый указанный (EOT).

Так что теперь вы получили свои Google WebFonts, работающие на <IE9 и современные браузеры!

Для получения дополнительной информации о различных типах шрифта и поддержки браузера, прочитайте эту идеальную статью Alex Tatiyants:http://tatiyiants.com/how-to-get-ie8-to-support-html5-tags-and-web-fonts/

В то время как решение Yi Jiang может работать, я не верю, что отказаться от API Google Web Font - это правильный ответ здесь. Мы обслуживаем локальный файл jQuery, когда он не загружен должным образом с CDN, верно?

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/js/jquery-1.9.0.min.js"><\/script>')</script>

Так почему же мы не сделаем то же самое для шрифтов, специально для <IE9?

<link href='http://fonts.googleapis.com/css?family=Cardo:400,400italic,700' rel='stylesheet' type='text/css'>
<!--[if lt IE 9]><link href='/css/fonts.css' rel='stylesheet' type='text/css'><![endif]-->

Вот мой процесс при использовании пользовательских шрифтов:

Загрузите папку «Шрифт ZIP из Google» и использовать Шрифт белки @ font-face-generator создать локальный веб-шрифт.

Создать fonts.css Файл, который вызывает вновь созданные локально размещенные файлы шрифтов (связывание только к файлу, если <IE9, как показано выше). Примечание. Генератор @ font-face-Face создает этот файл для вас.

@font-face {
  font-family: 'cardoitalic';
  src: url('cardo-italic-webfont.eot');
  src: url('cardo-italic-webfont.eot?#iefix') format('embedded-opentype'),
    url('cardo-italic-webfont.woff') format('woff'),
    url('cardo-italic-webfont.ttf') format('truetype'),
    url('cardo-italic-webfont.svg#cardoitalic') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'cardobold';
  src: url('cardo-bold-webfont.eot');
  src: url('cardo-bold-webfont.eot?#iefix') format('embedded-opentype'),
    url('cardo-bold-webfont.woff') format('woff'),
    url('cardo-bold-webfont.ttf') format('truetype'),
    url('cardo-bold-webfont.svg#cardobold') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'cardoregular';
  src: url('cardo-regular-webfont.eot');
  src: url('cardo-regular-webfont.eot?#iefix') format('embedded-opentype'),
     url('cardo-regular-webfont.woff') format('woff'),
     url('cardo-regular-webfont.ttf') format('truetype'),
     url('cardo-regular-webfont.svg#cardoregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

Использование IE Условные классы в основной таблице в стиле Avoide Искусственные веса и стили, Ваши стили шрифта могут выглядеть так:

h1{
  font-size:3.25em;
  font-weight:normal;
  font-style:italic;
  font-family:'Cardo','cardoitalic',serif;
  line-height:1.25em;
}
h2{
  font-size:2.75em;
  font-weight:700;
  font-family:'Cardo','cardobold',serif;
  line-height:1.25em;
}
strong
,b{
  font-family:'Cardo','cardobold',serif;
  font-weight:700,
}
.lt-ie9 h1{
  font-style:normal;
}
.lt-ie9 h2{
  font-weight:normal;
}
.lt-ie9 strong,
.lt-ie9 b{
  font-weight:normal,
}

Конечно, это немного дополнительная работа, но мы не стали ожидать этого от IE? Кроме того, он становится второй природой после некоторого времени.

Для чего стоит, я не мог его работать, работая над IE7 / 8/9, а опция «Многократная декларация» не имела никакой разницы.

Исправление для меня было в результате инструкций на Технические соображения Страница Где он подсвечивает ...

Для лучшего отображения в IE, сделайте таблицу StyleSheet 'Link' Tag первый элемент в разделе HTML 'Head'.

Работает через IE7 / 8/9 для меня сейчас.

Я попробовал все варианты сверху, и они не работали. Затем я расположен шрифт Google (через радугу) в моей папке (новый) и использовался IE условный ниже, и он работал идеально.

<!--[if IE]>
<style type="text/css">
    @font-face {
    font-family: "Over the Rainbow";
    src: url("../new/over.ttf");
    src: local("Over the Rainbow"), url("../new/over.ttf");
    }
</style>
<![endif]-->

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

Вы можете попробовать fontsforweb.com, где шрифты работают на всех браузерах, потому что они предоставляются в форматах TTF, WOFF и EOT вместе с CSS-кодом, готовым вставлять на вашу страницу, т. Е.

@font-face{ 
    font-family: "gothambold1";
    src: url('http://fontsforweb.com/public/fonts/5903/gothambold1.eot');
    src: local("Gotham-Bold"), url('http://fontsforweb.com/public/fonts/5903/gothambold1.woff') format("woff"), url('http://fontsforweb.com/public/fonts/5903/gothambold1.ttf') format("truetype");
}
.fontsforweb_fontid_5903 {
    font-family: "gothambold1";
}

Или вы можете скачать их на молнии в упаковке с файлом CSS

Затем просто добавьте класс на любой элемент, чтобы применить этот шрифт, т.е.

<h2 class="fontsforweb_fontid_5903">This will be written with Gotham Bold font and will work in all browsers</h2>

Увидеть это работает: http://jsfiddle.net/sd4mp/

Это все о пробуждении всех этих ответов, для меня ничего не работает, кроме следующего решения: Предложенный шрифт Google

@import 'https://fonts.googleapis.com/css?family=Assistant';

Но я использую здесь шрифты иностранных языков, и он не работал только на IE11. Я обнаружил это решение, которое работало:

@import 'https://fonts.googleapis.com/css?family=Assistant&subset=hebrew';

Надеюсь, что спасти кому-то драгоценное время

Попробуйте этот тип ссылки, он будет работать в IE. надеюсь это поможет .

<link href='//fonts.googleapis.com/css?family=Josefin+Sans:300,400,600,700,300italic' rel='stylesheet' type='text/css'>

У меня была та же проблема с тобой. Я нашел решение, используя код Adobe Web Fonts, отлично работать в Internet Explorer, Chrome, Firefox и Safari.

Больше информации На этой странице: http://html.adobe.com/weedge/webfonts/

После моего расследования я подошел к этому решению:

//writing the below line into the top of my style.css file
@import url('https://fonts.googleapis.com/css?family=Assistant:200,300,400,600,700,800&subset=hebrew');

Должен наблюдать:Надо надо написать font-weight правильно из этого шрифта. Например: font-weight:900; не будет работать Как мы не включали 900 нравится 200,300,400,600,700,800 в адрес URL при импорте из Google с вышеуказанной ссылкой. Мы можем добавить или включать 900 к вышеупомянутому URL, но это будет работать только тогда, если выше Google шрифт имеет этот вариант во время вложения.

Лицензировано под: CC-BY-SA с атрибуция

Не связан с StackOverflow