Подтвердить что ты не робот

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

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

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

<link href="#" onclick="location.href='http://fonts.googleapis.com/css?family=Josefin+Sans+Std+Light'; return false;"  
 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 нет кубиков. Кто-нибудь знает, почему?

4b9b3361

ОТВЕТЫ

Ответ 1

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

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

N.B. По состоянию на октябрь 2010 года проблема сообщается как фиксированная и закрытая в отчете об ошибке Google Code.

Ответ 2

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

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

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

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

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

Но в IE7-IE8 добавьте IE-условие и укажите каждый стиль шрифта 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]-->

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

Ответ 3

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

версии IE старше IE9 не поддерживают формат Web Open Font Format (WOFF), потому что тогда он не существовал. Для поддержки < IE9, вам необходимо обслуживать шрифт в Embedded Open Type (EOT). Для этого вам нужно будет написать свой собственный тег css @font-face вместо использования встроенного script из Google. Также вам нужно преобразовать исходный файл WOFF в EOT.

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

Затем вы можете использовать шрифт EOT следующим образом:

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

Теперь он работает в < IE9. Однако современные браузеры больше не поддерживают EOT, поэтому теперь ваши шрифты не будут работать в современных браузерах. Поэтому вам нужно указать их оба. Свойство src поддерживает это посредством запятой, разделяющей 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, IE9 и современные браузеры!

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

Ответ 4

Хотя решение Yi Jiang может работать, я не верю, что отказ от API веб-шрифтов Google - правильный ответ здесь. Мы обслуживаем локальный файл 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 Squirrel's @font-face Generator для создания локального веб-шрифта.

  • Создайте файл fonts.css, который вызывает вновь созданные локально размещенные файлы шрифтов (только ссылки на файл, если < IE9, как показано выше). ПРИМЕЧАНИЕ. Генератор @font-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 в вашей основной таблице стилей, чтобы избежать искусственных весов и стилей, ваши стили шрифтов могут выглядеть следующим образом:

    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? Кроме того, через некоторое время он становится второстепенным.

Ответ 5

В чем его ценность, я не мог заставить его работать над IE7/8/9, и опция множественного объявления не имела никакого значения.

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

Для лучшего отображения в IE сделайте тег "link" тега stylesheet первым элемент в разделе "head" HTML.

Теперь для меня работает IE7/8/9.

Ответ 6

Я попробовал все варианты сверху, и они не работали. Затем я нашел шрифт google (Over the Rainbow) в моей папке (новый) и использовал 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]-->

Я надеюсь, что это поможет

Ответ 7

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

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

или вы можете загрузить их в ZIP файл с прикрепленным файлом CSS

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

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

Посмотрите, как работает: http://jsfiddle.net/SD4MP/

Ответ 8

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

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

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

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

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

Ответ 9

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

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

Ответ 10

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

Дополнительная информация на этой странице: http://html.adobe.com/edge/webfonts/