@ font-face - как заставить его работать во всех браузерах - PullRequest
Новая
       27

@ font-face - как заставить его работать во всех браузерах

4 голосов
/ 11 марта 2012

Правило @ font-face поддерживается в Internet Explorer 9, Firefox, Opera, Chrome и Safari.

Однако Internet Explorer 9 поддерживает только шрифты .eot, тогда как Firefox, Chrome, Safari и Opera поддерживают шрифты .ttf и .otf.

Примечание. Internet Explorer 8 и более ранние версии не поддерживают @ font-face rule.

Этот текст от здесь . Поэтому, чтобы иметь работающий @ font-face для IE9, мне нужно просто указать файл шрифта EOT: 

@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
     url('Sansation_Light.eot'); /* IE9 */
}

В частности, я использую Myriad Pro, и у меня есть OTF-шрифты. Как я могу преобразовать их в тип EOT?

А что касается IE7 и IE8, какой трюк / хак следует использовать для получения желаемого результата?

Ответы [ 4 ]

9 голосов
/ 11 марта 2012

Я думаю, это почти полностью кросс-браузер 

@font-face {
    font-family: 'Name';
    src: url('location.eot');
    src: url('location.eot#iefix') format('embedded-opentype'),
         url('location.woff') format('woff'),
         url('location.ttf') format('truetype'),
         url('location.svg#Name') format('svg');
    font-weight: normal;
    font-style: normal;
}

Местоположение - это путь на вашем сервере, а Name - это имя шрифта

3 голосов
/ 11 марта 2012

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

Мой совет - использоватьинструмент для создания шрифтов, найденный здесь: http://www.fontsquirrel.com/fontface/generator для генерации файлов и кода для вас.

Будьте осторожны, не делитесь шрифтами, на которые у вас нет прав.

1 голос
/ 19 февраля 2017 
@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome.woff2') format('woff2'), 
       url('/fonts/awesome.woff') format('woff'),
       url('/fonts/awesome.ttf') format('truetype'),
       url('/fonts/awesome.eot') format('embedded-opentype');
}

Директива local () позволяет вам ссылаться, загружать и использовать локально установленные шрифты.

Директива url () позволяет загружать внешние шрифты и может содержать необязательную подсказку формата ()

0 голосов
/ 11 марта 2012

Jacktheripper уже опубликовал хороший шрифт,

Я рекомендую вам следующие хорошие статьи на эту тему:

Статья от Paul Irish

Артикул от источника

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

...