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

CSS3 @font-face 

Свойство @font-face было впервые предложено в CSS2 и внедрено в браузере Internet Explorer с версии 5. Однако эта реализация основывалась на закрытом формате Embedded Open Type (.eot), и другие браузеры не использовали этот формат до выхода Safari 3.1.

С тех пор веб-дизайнеры стали использовать на сайтах шрифты в форматах .ttf и .otf, и сейчас это свойство широко известно.

CSS

@font-face {
  font-family: '3DumbRegular';
  src: url('3Dumb-webfont.eot');
  src: local('?'), url('3Dumb-webfont.woff') format('woff'), url('3Dumb-webfont.ttf') format('truetype'), url('3Dumb-webfont.svg#webfont57ztNrX6') format('svg');
}
h1 {
  font-family: '3DumbRegular', Arial, sans-serif
}

Плюсы 

• Можно выбирать из большого количества шрифтов.  Полный список можно посмотреть здесь.
• Работает во всех браузерах.
• Не нуждается в JavaScript. 

Минусы 

• Несколько дольше внедрять, чем Google Font API, так как больше кода.
• Качество отображения шрифтов может быть разным у разных браузеров.
• Проверка кода CSS может не пройти, в зависимости от тега DOCTYPE.
• Не очень широкий выбор бесплатных русских шрифтов.

Google Font API 

Чтобы использовать шрифты из библиотеки Google, просто пройдите по ссылке и выберите шрифт. Например, если вы выбрали шрифт «Cantarell», вам нужно добавить следующий код в ваши файлы.

HTML

<link href="http://fonts.googleapis.com/css?family=Cantarell&subset=latin" rel="stylesheet" type="text/css">

CSS

h1 {
  font-family: 'Cantarell', arial, serif; /*Add also some font replacements, just in case...*/
}

Плюсы 

• Бесплатное решение от Google.
• Быстрая настройка.
• Не нуждается в JavaScript.
• Не нужно думать о лицензировании шрифтов. 

Минусы 

• Ограниченный выбор шрифтов, очень мало русских шрифтов. Надеемся, что это временно.
• Качество отображения шрифтов может быть разным у разных браузеров.
• Нет поддержки для старых версий iPhone и iPad, поддержка была добавлена начиная с iOS 4.2+ для iPhone, iPad, iPod.

Typekit 

Typekit — это сервис, запущенный компанией Small Batch, позже выкупленный компанией Adobe, который по средствам сервиса платной подписки позволяет веб-разработчикам и веб-дизайнерам использовать нестандартные, не зависящие от системы шрифты в интернет-приложениях. Этот сервис использует свойство CSS @font-face и JavaScript.

HTML

<script type="text/javascript" src="http://use.typekit.com/typekitid.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>

CSS

h1 {
  font-family: "museo-sans-1", "museo-sans-2", sans-serif;
}

Плюсы 

• Очень большая библиотека шрифтов.
• Хорошо поддержан документацией.
• Поддержка iPad, iPhone/iPod Touch.
• Можно выбрать, как будет выглядеть Ваша страница до загрузки шрифтов. 

Минусы 

• Это платный сервис, но у него также есть бесплатная версия.
• Зависит от JavaScript, добавляет запрос HTTP.
• Неудобно выбирать русские шрифты, нет возможности увидеть, как они выглядят, до выбора шрифта.

Другие сервисы шрифтов 

• FontDeck
• Webtype
• Typotheque
• sIFR
• Typeface
• Cufón

Заключение 

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

Автор урока Catalin Rosu

Перевод — Дежурка

Смотрите также:

• Расположение текста столбцами с использованием CSS3
• Знакомство с псевдоклассом CSS3 :target
• Применение режима наложения CSS3