Это уже привело к тому, что многие веб-сайты используют отличные красивые шрифты, но также следует отметить стремительный рост числа интернет-сервисов, предоставляющих нам всевозможные веб-шрифты. Ниже мы хотим поделиться с вами небольшим сравнением 4 разных сервисов, перечислить их преимущества и недостатки.
01. Typekit
Typekit представляет собой популярный сервис веб-шрифтов, и на сегодняшний день является одним из крупнейших игроков на этом поле. В число клиентов данного сервиса входят даже New York Times и Twitter.
В 2011 году Typekit была приобретена компанией Adobe. Typekit – это платный сервис веб-шрифтов, который также предлагает бесплатную опцию с, конечно же, некоторыми ограничениями.
Преимущества
* Профессиональные высококачественные шрифты (многие из которых редко можно встретить в других сервисах)
* Постоянное пополнение базы шрифтов.
* Быстрое реагирование и работа за счет использования сетей и серверов Adobe.
* Экономия пропускной способности канала, ввиду того, что шрифты размещаются на серверах Adobe.
* Обслуживание SSL
* Хорошая кросс-браузерная поддержка.
Недостатки
* Ограниченный выбор шрифтов
* Ограниченное число просмотров страницы
* Необходима установка логотипа сервиса на сайте
* Ограничение по количеству используемых на сайте шрифтов (2 на сайт).
02. Google Web Font
Google Web Font – это полностью бесплатный сервис веб-шрифтов от Google и, вероятно, один из первых проектов в нише веб-шрифтов, продвигаемый по принципу open source.
На данный момент сервис насчитывает около 600 шрифтов в различных стилях, включая наличие и отсутствие засечек, рукописные шрифты и многие другие.
Преимущества
* Быстрый и простой принцип использования
* Open source
* Доступны шрифты с настольных ПК
* Доступны Font API и документация
* Шрифты предоставляются при помощи серверов Google
* Таблица символов
* Фильтр и функция предварительного просмотра шрифтов в действии.
Недостатки
* Отсутствует стиль графических меток. Он очень удобен, особенно когда вам нужно отобразить какие-либо иконки посредством шрифта.
Пример
<link href='http://fonts.googleapis.com/css?family=Croissant+One|Merienda' rel='stylesheet' type='text/css'>
<style>
h1 {
font-family: ;
}
p {
font-family: ;
}
</style>03. Font Squirrel (@font-face)
Font Squirrel сильно постарались, отобрав для вас лучшие шрифты, которые можно бесплатно использовать в коммерческих целях и встраивать в веб-страницы.
Вдобавок Font Squirrel также предлагает вам набор @font-face для каждого шрифта, который включает в себя каскадные таблицы стилей и шрифты в следующих форматах: .eot, .ttf, .woff и .svg, – что гарантирует корректную работу во всех современных браузерах.
Преимущества
* Шрифты бесплатны для коммерческого использования
* Доступны шрифты с настольных ПК
* Возможность создавать семейства шрифтов
* Доступы опции стилей: каллиграфические, комические, графические метки, ретро и так далее
* Функция предварительного просмотра шрифтов в действии.
* Таблица символов (удобно при использовании графических меток)
* Доступен набор и генератор @font-face.
Недостатки
* Вам нужно хранить шрифты на собственном сервере
* Сервис может замедлить производительность вашего сайта, особенно если у вас ограничен пропускной канал
* Условия использования шрифтов всегда разные. Вам необходимо изучать условия использования для каждого отдельного шрифта.
Пример
@font-face {
font-family: 'SansationRegular';
src: url('Sansation_Regular-webfont.eot');
src: url('Sansation_Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('Sansation_Regular-webfont.woff') format('woff'),
url('Sansation_Regular-webfont.ttf') format('truetype'),
url('Sansation_Regular-webfont.svg#SansationRegular') format('svg');
font-weight: normal;
font-style: normal;
}
p {
font-family: 'SansationRegular';
}04. Edge Web Font
Совсем недавно Adobe представила новый продукт под названием Adobe Edge. Он содержит несколько инструментов и сервисов, включая сервис веб-шрифтов под названием Edge Web Font.
Edge Web Font – представляет собой бесплатный сервис веб-шрифтов, объединенный с Google Web Font, и на данный момент включает около 500 шрифтов, из которых можно выбирать. Но, в отличие от Google Web Font, который предлагает вам шрифты вместе с каскадными таблицами стилей, Edge Font потребует от вас javascript.
Преимущества
* Полностью бесплатное использование без ограничений
* Огромная коллекция open source шрифтов.
* vPowered той же платформы, что и у Typekit.
Недостатки
* Нет превью шрифтов в галерее
* Плохая сортировка шрифтов в галерее
* Для обслуживания шрифтов используется javascript.
Пример
<script src="http://use.edgefonts.net/droid-sans.js"></script>
<style>
p {
font-family: droid-sans, serif;
}
</style>Вывод
Существует множество сервисов и опций, но, в конце концов, решение, какой сервис использовать, зависит только от веб-дизайнеров. Если позволяет бюджет, возможно, следует рассмотреть платный тарифный план от Typekit. Если нет, то можно сравнить для себя бесплатные опции.
Наконец, для вашего вдохновения, мы хотим предложить вам несколько красивых веб-сайтов, в которых используются веб-шрифты.
