Google WebFont не работает в IE

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

<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300|Orienta' rel='stylesheet' type='text/css'>

Но когда я использовал эти значения @font-face в моем файле css, он не работал должным образом.

@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 300;
  src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), url(http://themes.googleusercontent.com/static/fonts/sourcesanspro/v4/toadOcfmlt9b38dHJxOBGNbE_oMaV8t2eFeISPpzbdE.woff) format('woff');
}
@font-face {
  font-family: 'Orienta';
  font-style: normal;
  font-weight: 400;
  src: local('Orienta'), local('Orienta-Regular'), url(http://themes.googleusercontent.com/static/fonts/orienta/v1/nPJ0J30J_zQZtBhztPPbaA.woff) format('woff');
}

Что происходит с этим кодом, я думаю, что это то же самое, что и в обоих случаях. Есть идеи, ребята?

Примечание. Также я планирую загрузить эти шрифты в свою систему и загрузить их с сервера. Заранее спасибо.


css google-webfonts
person Rinto George    schedule 15.10.2012    source источник
comment
Этот ответ просто помог мне сэкономить много времени. GitHub   -  person Shubh    schedule 18.06.2015

Ответы (3)


arrow_upward
6
arrow_downward

Чтобы ваши шрифты работали в IE, вам необходимо иметь расширение .eot. Вы можете использовать генератор здесь http://www.fontsquirrel.com/fontface/generator

person Caelea    schedule 15.10.2012
comment
да, загрузите его из шрифтов google (ttfs), загрузите их на fontsquirrel.com, преобразуйте их и загрузите набор шрифтов, чтобы у вас были файлы .eot и образец скрипта css. - person Junior Mayhé; 15.10.2012

arrow_upward
1
arrow_downward

IE не понимает формат WOFF. Поэтому вам следует использовать код CSS, который работает с разными форматами шрифтов, как это делает код Google. Самый простой способ — посетить сайт Google Web Fonts и скачать там пакет шрифтов; он содержит различные форматы, а также код CSS для их использования.

person Jukka K. Korpela    schedule 15.10.2012

arrow_upward
1
arrow_downward

Вы правы, @Caelea, мне нужно добавить расширение .eot, чтобы мои шрифты работали в IE.

Наконец, углубившись в проблему, я нашел решение. Я просто вставляю приведенный ниже URL-адрес в панель навигации IE.

http://fonts.googleapis.com/css?family=Source+Sans+Pro:300|Orienta

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

См. ниже код

@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 300;
  src: url(http://themes.googleusercontent.com/static/fonts/sourcesanspro/v4/toadOcfmlt9b38dHJxOBGBlTL9oEQvYTI0YAW1-Ysv0.eot);
  src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), url(http://themes.googleusercontent.com/static/fonts/sourcesanspro/v4/toadOcfmlt9b38dHJxOBGBlTL9oEQvYTI0YAW1-Ysv0.eot) format('embedded-opentype'), url(http://themes.googleusercontent.com/static/fonts/sourcesanspro/v4/toadOcfmlt9b38dHJxOBGNbE_oMaV8t2eFeISPpzbdE.woff) format('woff');
}
@font-face {
  font-family: 'Orienta';
  font-style: normal;
  font-weight: 400;
  src: url(http://themes.googleusercontent.com/static/fonts/orienta/v1/4h2F_2nQc3QO1h97-0ufEg.eot);
  src: local('Orienta'), local('Orienta-Regular'), url(http://themes.googleusercontent.com/static/fonts/orienta/v1/4h2F_2nQc3QO1h97-0ufEg.eot) format('embedded-opentype'), url(http://themes.googleusercontent.com/static/fonts/orienta/v1/nPJ0J30J_zQZtBhztPPbaA.woff) format('woff');
}

Спасибо, ребята, за немедленный ответ. Большое спасибо @Jukka K. Korpela за то, что поделился со мной отличной идеей

Изменить

Чтобы получить шрифт Google eot, я просмотрел веб-сайт шрифтов в IE, поэтому Google загрузил туда шрифт, поддерживаемый IE :).

person Rinto George    schedule 16.10.2012