Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Сравнение сервисов шрифтов Google Font, Typekit и @font-face

5 декабря 2014 | Опубликовано в css | 1 Комментарий »

Вы уже могли читать об использовании особых шрифтов с помощью @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.
  • Неудобно выбирать русские шрифты, нет возможности увидеть, как они выглядят, до выбора шрифта.

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

Заключение 

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

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

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

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




Комментарии

  1. Пидоры
    Thumb up Thumb down +4

    жопа