Hellosite » Статьи » Для разработчиков » Веб-шрифты (часть 1)

Веб-шрифты (часть 1)

Веб-шрифты (часть 1) Всем привет! Как известно, пару лет назад у нас, веб-разработчиков появилась прекрасная возможность использовать сторонние шрифты на сайте. До этого чтобы надписи на сайтах выглядели красиво, нам приходилось использовать какие-то непонятные махинации в виде встраивания флеш плагинов на сайт, или использования генераторов картинок с надписями, библиотек типа Cufon, Sifr и т.д. и т.п.
 
К счастью, в эпоху html 5 такая головная боль отпала, благодоря технологии font-face Web fonts
 
На данный момент, функция веб-шрифтов поддерживается почти на всех браузерах (94.31% браузеров спокойно поддерживают эту функцию).
Казалось бы все отлично. Выбирай шрифт – подключай, и работай. И хотя, на момент публикации статьи – формат ttf поддерживает 90%, браузеров, стоит обратить внимание на то, что во-первых они достаточно громозкие, во-вторых не поддерживается некоторыми браузерами (практически все версии IE.
Но, умные люди придумали онлайн конвертеры, позволяющие быстренько нам переконвертировать шрифт в нужный нам формат. О конвертации и о форматах шрифтов мы сегодня поговорим!
Форматы шрифтов
TrueType (ttf) — обычный формат шрифта, который можно скачать с любого шрифтового сайта, этот формат используется в виндовс, и на данный момент считается самым распространённым форматом. Мы его можем спокойно использовать в браузерах, однако, у Internet Explorer будут с этим проблемы.
Размеры:
Оригинальный шрифт PFDinDisplayPro-Black в формате ttf:  391кб
Шрифт PFDinDisplayPro-Black (латиница, кирилица, и основные символы) – 51 кб
OpenType (OTF) – расширенный ttf. Поддерживает Unicode и умеет отлично сжиматься и имеют многие другие оптимизации, касаемые его читаемости. Также, как и у  ttf  у Internet Explorer с данным шрифтом будут проблемы.
Embedded OpenType (EOT) – как раз специальный стандрат от Microsoft для своих чудесных браузеров.  Сжимается.  Поддерживается исключительно Internet Explorer, притом как старыми версиями так и новыми. Если вам не страшна поддержка старых версий Internet Explorer (до IE 9), рекомендуется использовать WOFF.
Шрифт PFDinDisplayPro-Black (латиница, кирилица, и основные символы) – 24 кб
Web Open Font Format  (WOFF) – специальный формат от W3C, разработанный исключительно для веб браузеров. Очень хорошо сжимается. Поддерживается почти всеми браузерами. Рекомендуется к использованию.
Шрифт PFDinDisplayPro-Black (латиница, кирилица, и основные символы) – 27 кб
Web Open Font Format 2.0 (WOFF2) – усовершенстованая версия WOFF. Благодоря этому формату шрифты стали еще меньше по сравнению с WOFF, в то время как WOFF шрифт и так мог быть в два раза меньше оригинального. К большому сожалению, на текущий момент поддерживается всего горсткой браузеров.
Шрифт PFDinDisplayPro-Black (латиница, кирилица, и основные символы) – 21 кб
 
 
 
Scalable Vector Graphics fonts (SVG) – конвертация шрифтов в SVG изображения. На данный момент практически потеряло актуальность. Используется для старых версий браузера Safari. Однако, стоит учесть, что пользователи мобильных телефонов ака IPhone или старых планшетов ака Ipad могут использовать этот браузер.
Шрифт PFDinDisplayPro-Black (латиница, кирилица, и основные символы) – 75 кб
Данные предоставлены за 2015 год
Формат TTF OTF EOT WOFF WOFF2 SVG
Чистая поддержка 80.18% 80.18% 9.37% 88.99% 43.46% 26.2%
Грязная поддержка 91.09% 91.09% 9.37% 88.99% 43.46% 26.2%
Размер шрифта 51 кб ??? 24 кб 27 кб 21 кб 75 кб
 
Как видно из таблицы – самый лекгковесный вариант – woff2, однако на данный момент он не поддерживается и половиной браузеров.
А самый оптимальный вариант – это использовать формат woff. Он небольшого размера и на данный момент поддерживается почти всеми браузерами.
В принципе, размер и поддержка браузерами на данный момент не составит большой проблемы, благодаря всевозможным сервисам.
Где будем шрифты искать?
И так, как уже говорил в интернете множество сервисов, позволяющие найти шрифты и подключить их к сайту или переконвертировать в нужный формат.
Давайте пока остановимся на первой части. Сделаю небольшой обзор подобных сервисов
 
  1. http://www.fontsquirrel.com/ - на мой взгляд самый лучший сайт с шрифтами. Славится большой базой шрифтов.  Любой шрифт можно протестировать, скачать, переконвертировать. Есть очень хороший и гибкий конвертер шрифтов. Но об этом напишу далее
 
  1. http://webfont.ru/ - не менее удобный сайт с шрифтами.  Есть полезный сервис для тестирования шрифтов (http://webfont.ru/polygon/). Шрифты можно скачать в виде готового css кода с набором шрифтов, работающего прямо с их сайта или архива с шрифтами всех форматов и css кодом. Еще, создатели сервисов потрудились помочь верстальщикам и написали плагины для PHPstorm, Sublime Text и Notepad++ для быстрого обращения к шрифтам расположенным на сервисе
  2. http://edgewebfonts.adobe.com/ - сервис c шрифтами от Adobe. Можно подключать шрифты с ихнего сайта. Подключалка на этот раз не в виде css файла и нам не предлагают скачать архив с шрифтами, зато предлагают подключить js файлик, который уже там сам разберется какой у нас браузер, что он там поддерживает и подключит нужный файл шрифта.
  3. https://www.google.com/fonts – сервис шрифтов от Гугла. Сервис пользуется огромной популярностью, однако шрифтов там кот наплакал. Да и сам сервис не очень удобный в плане поиска шрифтов.  Хотя есть плюсы, например – если вы будете подключать шрифты с этого сайта – знайте, гугл никогда не лежит, не тормозит и вообще быстрый быстрый. И из за популярности сервиса - можете надеяться что шрифты уже где-то хранятся в кеше браузера пользователя, так как он до этого посещал сайт, с таким же шрифтом от гугла.
На этом сегодня все, об остальном мы поговорим в следующей статье