В статье приведена общепринятая классификация шрифтов, особенности их установки на сайт, а также раскрыты понятия стандартного и веб-безопасного шрифта.

Каждый веб-сайт несет в себе определенный объем информации. Оформление внешнего вида этой информации играет очень не маловажную роль для дизайна сайта в целом. Поэтому ключевым вопросом для веб-дизайнера является выбор шрифта.

Что касается веб-разработчика, то его должен больше интересовать процесс подключения выбранного шрифта к ресурсу. Семейство шрифтов указывается в CSS-файле посредством оператора font-family. Применения специфического оформления текста не ограничивается одним семейством шрифта, так как дизайнеры зачастую выделяют разные части основного контента по разному.

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

Вот так постепенно мы пришли к выводу, что шрифты можно разбить на два типа:

1. что поддерживаются большинством устройств;
2. что на большинстве устройств не отображаются.

Шрифты второго класса обычно используются при создании логотипа или заголовков. В таком случае, чтобы сохранить уникальность шрифта пользуются приемом замены текста картинкой. Этот способ позволит на любом устройстве отобразить выбранный шрифт, однако редактирование таких логотипов и заголовков - процедура довольно трудоемкая.

Что касается оформления основного контента, то оно всегда выполняется шрифтами первой разновидности. Так как заменять весь контент на картинки не логично и не рационально. Такого принципа придерживаются не только веб-разработчики, но и дизайнеры. Но если же дизайнер настаивает на написании контента с использованием уникального шрифта, то верстальщик должен будет подобрать наиболее похожий шрифт из списка стандартных. Также распространено решение, когда уникальный шрифт подгружается на сервер в папку с сайтом. Тогда указанный шрифт будет подгружаться с сервера и отображаться на любом устройстве. Ниже представлен код с необходимыми CSS-командами:

CSS

@font-face /*подключение уникального шрифта для сайта*/ {
 	font-family: "Roboto Condensed"; /*название шрифта*/
        src:url(fonts/Roboto-Condensed.woff); /*путь к файлу со шрифтом*/
}
.text /*подключение шрифта для
  определенного текстового блока*/  {
	font-family: Roboto Condensed, sans-serif, Verdana;
}

Для начинающих верстальщиков основная трудность в работе со шрифтами заключается в сложности отличия распространенных или стандартных шрифтов от тех, которые на большинстве устройств не выводятся.

Стандартные шрифты

Стандартными шрифтами называются те семейства, которые встроенные в набор инструментов ОС устройства. Не сложно догадаться, что на белом свете не одна единственная операционка, из чего следует, что единой группы стандартных шрифтов тоже нет. К примеру, Windows и Mac OS имеют свой собственный индивидуальный набор стандартных шрифтов, а вот Linux не имеет своего единого перечня. Стандартные семейства шрифтов этой ОС отличаются друг от друга, однако наиболее распространенной среди них является DejaVu. По статистическим данным юзеры Unix/Linux также используют шрифты URW и Free. Более того, согласно источнику, более 60% пользователей Unix/Linux заявляют о том, что стандартным пакетом шрифтов их ОС является Core fonts for the Web.

С целью достижения одинакового отображение шрифтов во всех ОС, в свойстве font-family разработана способность распознания приоритетного списка семейств шрифтов и их рода. Суть этой функции заключается в том, что если первый шрифт не поддерживается системой, очередь переходит к следующему и так далее. В этом списке допускается использовать и наименование родовых семейств шрифтов.

Типы имен семейств делятся на два основных вида:

1. Название типа семейства по своему желанию. К примеру, "Arial" или "Times new Roman". Очень важно запомнить, что названия шрифтов с пробелом обязательно должны быть заключены кавычки, иначе пробел не будет прочитан системой и название шрифта не будет воспринято корректно.
2. Имя родового семейства. Спецификациями CSS установлен следующий список родовых семейств:
   • serif: символы этого семейства прописываются с засечками;
   • sans-serif: засечки на буквах отсутствуют;
   • cursive: курсивное начертание текста;
   • fantasy: особые шрифты, внешний вид которых имеют декоративный характер;
   • monospace: моноширинный шрифт.

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

В итоге, суть указания шрифта, который будет отображаться нормально в любой ОС, заключается в следующем: необходимо выбрать один из стандартных шрифтов Windows, затем проанализировать списки Mac OS и Unix/Linux, а в конце должно быть указано родовое семейство, которому относятся ранее перечисленные шрифты.

Суть Web-безопасных шрифтов

В ходе истории становления всемирной паутины сформировалось понятие Web-безопасного шрифта. К такому классу шрифтов относят те семейства, которые можно найти в списке стандартных шрифтов для любой ОС. Важно заметить, что это утопичное понятие. Так что правильнее сказать для подавляющего большинства ОС.

Вследствие этого некоторые шрифты можно назвать безопасными, но с учетом наличия некоторых оговорок и характерных особенностей.

Ключевую роль для определения универсального списка шрифтов отыграла корпорация Била Гейтса, так как их ОС является наиболее распространенной в мире. Именно из их стандартного списка производился выбор наиболее безопасных шрифтов. В подтверждение данного факта была приведена информация из статистических данных относительно ОС Unix/Linux и пакета шрифтов Core fonts for the Web. Ниже представлены семейства шрифтов, которые входят в этот пакет, с учетом особенностей представления их внешнего вида.

Немаловажен тот факт, что все эти шрифты поддерживают кириллицу, что в свою очередь отыграло ключевую роль в развитии рунета.

Что же касается еще одной очень популярной ОС, а именно Mac OS, то все шрифты из вышеуказанного набора входят в список стандартных.

Исходя из этих фактов, был сформирован список Web-безопасных шрифтов, которые входят в список стандартных для большинства ОС:

• Arial
• Arial Black
• Comic Sans MS
• Courier New
• Georgia
• Impact
• Times New Roman
• Trebuchet MS
• Verdana

Стоит отметить, что в этот список не вошел шрифт Webdings, так как в нем содержатся пиктограммы. Также безопасным не считается Andale Mono. Его использование среди пользователей ограничено из-за малой читабельности, а также он есть в наличии не во всех версиях ОС Windows. Но показатель безопасности шрифта не является ключевым звеном для выбора стиля оформления контента. Скорее всего, им можно присвоить роль перестраховки, так как в приоритетном списке необходимого CSS-свойства они идут последними перед указанием рода. Из этого можно сделать вывод, что дизайнер хочет, чтобы пользователь в первую очередь увидел именно тот шрифт, который он выбрал. Ну а вот если устройство, через которое выводится ресурс уже устарело, тогда на сцену выходит объект нашего исследования, позволяя хоть отдаленно сохранить стилистику дизайна сайта.

Подводя итог

Использование шрифтов значительно ограничивается возможностью ОС распознать указанный шрифт. Однако свойством font-family предусмотрено через запятую указывать несколько семейств шрифта, а также их родовое семейство. Также в этих целях был сформирован список Web-безопасных шрифтов, предназначенных для оформления основного контента. В тоже время стоит отметить, что на сегодняшний день не возникает проблемы подбора шрифта, который должен будет поддерживаться всеми ОС. Благодаря правилу @font-face, веб-разработчики размещают необходимый шрифт непосредственно на сервере, а это правило вытягивает его оформление из сервера, и таким образом, даже если шрифт на скачен на используемое устройство, задумка дизайнера не загубиться и все отработает без лишних проблем.