Прикручиваем клевые шрифты с помощью @font-face

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

• сохраняется поиск по тексту, потому что это текст, а не картинка;
• появляется возможность использовать онлайн-переводчики и разные фишки связанные с текстом;
• никто не отменяет для нас использование line-height, letter-spacing, text-shadow,text-align, и селекторов вида ::first-letter и ::first-line

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

@font-face {
 font-family: 'Sonicechrift';
 src: url('sonicechrift.ttf'); 
}

И теперь лишь остается дописать название нового шрифта

h1,h2,h3 { font-family: 'Sonicechrift', 'Georgia', serif; } 

Теперь кратко, что мы сделали. Свойство font-family указывает на то, как в нашей системе будет называться новый шрифт. Называть можно как угодно, главное чтобы потом можно было вспомнить, что же вы имели ввиду. Свойство src указывает на файл с самим шрифтом. Поддерживаются следующие форматы шрифтов: eot, ttf, otf, svg, woff.

Как видно, многообразие браузеров добавляет радости, так что приведенный выше код придется переписать вот так:

@font-face {
 font-family: 'Tagesschrift';
 src: url('tagesschrift.eot'); /* IE 5-8 */ 
 src: local('☺'),       /* sneakily trick IE */
    url('tagesschrift.woff') format('woff'),  /* FF 3.6, Chrome 5, IE9 */
    url('tagesschrift.ttf') format('truetype'), /* Opera, Safari */
    url('tagesschrift.svg#font') format('svg'); /* iOS */
}

Сложно?  Однозначно, поэтому по ссылке читаем пару интересных штук. А еще для упрощения жизни используем вот этот сервис. Загружаем в него шрифт и он генерит нам css.

Теперь обратимся к горячо любимым мною мобильным устройствам. Как видно по таблице, на андроиде и айфоне все так или иначе поддерживает. Но здесь проблемы возникает по следующей причине. Пока шрифт грузится, а это овер 50к, ВЕСЬ текст будет невидимым, поэтому со шрифтами в мобильных веб приложениях следует быть осторожнее.


На этом с программированием все и теперь пара слов о нескольких сервисах, которые могут быть полезны при работе со шрифтами в вебе.


Во-первых, Font Previewer - сервис от гугла, который позволяет сразу посмотреть как будет выглядеть тот или иной шрифт и получить готовый css стиль.
И не отходя далеко еще одна разработка гугла - Google font API, API позволяющее добавлять любые шрифты в любую разработку.


По аналогии с Google Font API есть еще ряд сервисов - WebInk, Typekit, и Fontslive. Их отличие в том, что они платные.


В качестве посткриптума, отошлю всех к проблеме FOUT. Если кратко, то она заключается в следующем - при указании нескольких шрифтов в свойстве  font-family может произойти проблема, что применился второй шрифт из указанных, пока первый еще подгружается. Данная проблема проявляется в Firefox и Opera. Если вы с ней столкнулись, то следует вновь обратиться к гуглу и его js библиотеке WebFont Loader. Ниже пример работы с этим скриптом

<script src="//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script>
 WebFont.load({
   custom: {
    families: ['Tagesschrift'],
    urls : ['http://paulirish.com/tagesschrift.css']
}
});
</script>

И затем стиль

  .wf-loading h2 { 
     visibility: hidden; 
   } 
  .wf-active h2, .wf-inactive h2 {
     visibility: visible; 
     font-family: 'Tagesschrift', 'Georgia', serif;

  } 

Related Posts by Categories