шрифт в Internet Explorer - PullRequest
Новая
       65

шрифт в Internet Explorer

1 голос
/ 02 ноября 2010

Я уверен, что я не единственный, кого это мучает, но я не могу найти решение.

@font-face прекрасно работает в Firefox, Chrome, Safari со шрифтами TTF.

как так: 

@font-face{ 
  font-family: "Apple-Chancery" ;
  src: url(images/Apple-Chancery.ttf ) format("truetype");
}

Однако я понимаю, что для использования в Microsoft шрифт должен быть в формате EOT, поэтому я преобразовал его, используя http://ttf2eot.sebastiankippe.com/

И мой код выглядит так: 

@font-face{ 
  font-family: "Apple-Chancery" ;
  src: local("Apple Chancery"), url(images/Apple-Chancery.eot), url(images/Apple-Chancery.ttf ) format("truetype"); /* non-IE */    
}

но он не работает в Internet Explorer. Я попытался поставить две строки различий для src: я пытался использовать другой конвертер, другой шрифт, и все не пошло. Я использую IE8.

Кроме того, чтобы использовать несколько пользовательских шрифтов, нужно ли мне несколько блоков @font-face или я выстраиваю их в ряд font-family, src, font-family, src и т. Д.

Ответы [ 6 ]

2 голосов
/ 08 сентября 2012

Это может вам помочь, 

@font-face {
    font-family:"Apple-Chancery";
    src: url('../font/Apple-Chancery.eot'); /* IE9 Compat Modes */
    src: url('../font/Apple-Chancery.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../font/Apple-Chancery.woff') format('woff'), /* Modern Browsers */
         url('../font/Apple-Chancery.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('../font/Apple-Chancery.svg#svgFontName') format('svg'); /* Legacy iOS */
    font-weight:bold;
    font-style:normal;
}
2 голосов
/ 02 ноября 2010

Как насчет использования шрифтового белка для генерации всех ваших файлов и вашего кода?

0 голосов
/ 18 октября 2012

Simpy загружает ваш шрифт на font2web , он создает CSS-файл и демонстрационный HTML-файл. Надеюсь, это поможет вам

0 голосов
/ 05 ноября 2010

Я второй использую Font Squirrel.

Вы также можете посмотреть мой пост Приключения с @ font-face , которые могут вам помочь.

0 голосов
/ 02 ноября 2010

Вы должны поместить IE (eot) в отдельную строку, перед другими.

Правильное объявление: 

@font-face{ 
  font-family: "Apple-Chancery" ;
  src: url(images/Apple-Chancery.eot); /* IE */
  src: local("Apple Chancery"), url(images/Apple-Chancery.ttf ) format("truetype"); /* non-IE */    
}

Но этого, вероятно, недостаточно, чтобы охватить все случаи, вам не хватает типа шрифта svg для старых цветов и т. Д. Я бы рекомендовал использоватьгенератор шрифтов с fontsquirel.com, выберите опцию Easy, затем проверьте файл css генерации и скопируйте / вставьте код и преобразованные файлы шрифтов

0 голосов
/ 02 ноября 2010

Эта страница может быть полезна для вас: http://msdn.microsoft.com/en-us/library/ms530757%28VS.85%29.aspx

В частности, эта строка:

В Internet Explorer 8 и более ранних версиях поддерживается только одно значение URL.

Я думаю, что то, что вы пытаетесь сделать, может не сработать, пока IE9 не станет доступен. Чтобы проверить и подтвердить это, стоило бы получить копию бета-версии (при условии, что вы используете что-то более новое, чем Windows XP).

...