Как заставить Google Fonts работать в IE? - PullRequest
Новая
       89

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

66 голосов
/ 12 сентября 2010

Я занимаюсь разработкой сайта, который использует Google Fonts API .Это здорово, и, предположительно, было протестировано в 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;
}

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

Ответы [ 11 ]

66 голосов
/ 04 июня 2012

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

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

Единственный способ заставить его работать в 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 добавьте условный 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]-->

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

53 голосов
/ 12 сентября 2010

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

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

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

15 голосов
/ 15 апреля 2013

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

Версии IE старше IE9 не поддерживают Web Open Font Format (WOFF)потому что тогда его не было.Чтобы поддерживать

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

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

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

Теперь он работает в 

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

Однако 

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

в качестве URL-адреса шрифта.Мы можем исправить это, сначала указав src только с одним URL-адресом, который является форматом EOT, а затем указав второе свойство src, предназначенное для современных браузеров, и 

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

Так что только потому, что во втором свойстве src вы указываете format('woff'), myfont.woff') format('woff) и будет продолжать использовать первый указанный (eot).

Так что теперь у вас есть свои веб-шрифты Google, работающие для

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

7 голосов
/ 31 января 2013

Хотя решение И Цзяна может работать, я не верю, что отказ от 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>

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

<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]-->

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

  1. Загрузите ZIP-папку шрифта из Google и используйте Font Squirrel's @ font-face Generator для создания локального веб-шрифта.

  2. Создайте файл fonts.css, который вызывает вновь созданные локально размещенные файлы шрифтов (только ссылки на файл, если 

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

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

4 голосов
/ 19 августа 2012

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

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

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

Для меня теперь работает через IE7 / 8/9.

2 голосов
/ 29 августа 2012

Я перепробовал все варианты сверху, и они не работали.Затем я поместил шрифт 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]-->

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

1 голос
/ 10 сентября 2016

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

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

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

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

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

1 голос
/ 08 июля 2011

Вы можете попробовать 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/

0 голосов
/ 15 сентября 2018

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

//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 Font имеет эту опцию при встраивании.

0 голосов
/ 25 сентября 2012

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

Подробнее на этой странице: http://html.adobe.com/edge/webfonts/

Страница:
...