Сравнение сервисов шрифтов Google Font, Typekit и @font-face
Вы уже могли читать об использовании особых шрифтов с помощью @font-face. Мы хотим рассказать и о других решениях, их плюсах и минусах. Цель этого урока — кратко осветить варианты использования особых шрифтов в веб-дизайне. Читайте о их недостатках и преимуществах и решайте каким вариантов будете пользоваться вы.
CSS3 @font-face
Свойство @font-face было впервые предложено в CSS2 и внедрено в браузере Internet Explorer с версии 5. Однако эта реализация основывалась на закрытом формате Embedded Open Type (.eot), и другие браузеры не использовали этот формат до выхода Safari 3.1.
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.
- Неудобно выбирать русские шрифты, нет возможности увидеть, как они выглядят, до выбора шрифта.
Другие сервисы шрифтов
Заключение
Теперь, когда Вы знаете о плюсах и минусах, Вам будет проще выбирать то, что лучше подойдет.
Автор урока Catalin Rosu
Перевод — Дежурка
