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

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

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

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

Можно сказать, что опасность применения приема напрямую зависит от вероятности смены текста. Поэтому делать, например, общий текст страницы нестандартными шрифтами нельзя! Грамотный дизайнер так никогда не поступит. А если дизайнер попался зеленый, хороший верстальщик просто обязан исправить его ошибку — в верстке подменить данный шрифт максимально похожим стандартным.

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

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

Стандартные шрифты — это набор шрифтов, устанавливаемый вместе с операционной системой. Поскольку операционные системы бывают разные, то и набор шрифтов у них разный. Перечень стандартных шрифтов разных версий Windows можно посмотреть, например, в статье Стандартные шрифты Windows , а перечень стандартных шрифтов Mac OS на странице Шрифты, поставляемые с Mac OS . Что касается Unix/Linux операционных систем то единый набор шрифтов у них отсутствует. Многие пользователи Linux используют набор шрифтов DejaVu, в частности на Ubuntu они установлены по умолчанию. Согласно статистике http://www.codestyle.org у многих Unix/Linux пользователей также установлены наборы шрифтов URW, Free и другие. Согласно этой же статистике, больше 60% пользователей Unix/Linux имеют на своем компьютере шрифты набора Core fonts for the Web, который до 2002 года был официально доступен для бесплатного скачивания на сайте Microsoft.

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

Это свойство специфицирует приоритетный список имен семейств шрифтов и/или названий родовых семейств. Согласно спецификации CSS2 есть два типа имен семейств шрифтов:

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

Таким образом для дизайна берется стандартный шрифт из OS Windows, подбирается к нему похожий для Mac OS и Unix/Linux, задается общее семейство шрифтов и готово.

Но не все так просто. Покопаем детальнее.

В поисках Web-безопасных шрифтов

В интернете исторически сложилось такое понятие как «безопасные» Web-шрифты. Безопасным шрифтом можно назвать такой шрифт, который является стандартным для всех операционных систем. Поскольку о таком положении дел остается только мечтать, то абсолютно безопасных шрифтов не существует!

Отдельные шрифты можно назвать безопасными с некоторыми оговорками.

Основой для определения «безопасных» шрифтов послужили шрифты наиболее распространенной операционной системы Windows, которые кроме того используются в других ОС. Примером такого использования служит уже упоминавшийся пакет шрифтов Core fonts for the Web, который, согласно статистике, скачало множество пользователей Unix/Linux.

В это пакет входят следующие шрифты: Andale Mono, Arial Black, Arial, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana, Webdings. Все они поддерживают кириллицу, что немаловажно для рунета.

В набор шрифтов входящих в стандартную поставку Mac OS X (эта ОС имеет наибольшее распространение среди пользователей Mac OS) входят все шрифты набора Core fonts for the Web.

Таким образом на основе шрифтов Windows, использующихся в других ОС сформировался следующий список так называемых «безопасных» Web-шрифтов:

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

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

Все эти шрифты есть у каждого пользователя Windows, Mac OS X и у подавляющего большинства пользователей Unix/Linux (т.е. у тех, которые установили у себя пакет Core fonts for the Web).

А как же быть с остальными? Ведь хочется, чтобы замысел дизайнера увидело как можно большее число пользователей!

Об этом читайте во второй части публикации.

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

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

Теперь, когда положительный эффект, производимый красивыми шрифтами на сайте, стал нам очевидным, возникает резонный вопрос «так как же использовать нестандартные шрифты на сайте?» . Ключ к ответу на него лежит в понимании принципа работы компьютерных шрифтов.

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

1. Файл определенного формата . Файл шрифта, чтобы его могла использовать программа, с которой мы работаем, должен быть определенного «известного этой программе» формата. Форматов компьютерных шрифтов существует несколько, что автоматически порождает проблему совместимости. Все усилия по поиску и подбору шрифта сойдут на нет, если он не поддерживается программой, в которой просматривается текст.
2. Используется программой или ОС . Файл шрифта должен быть физически доступен системе, чтобы его можно было использовать для отображения текста. В условиях Интернета это - нетривиальная задача. Ведь сайт просматривается на множестве разных компьютеров, и мы вовсе не можем быть уверены, что на них есть необходимые шрифты.
3. Описание набора букв и знаков . Мы должны быть уверены, что шрифт содержит глифы, описывающие все символы в отображаемом тексте. Например, если мы будем пытаться отобразить русский текст с использованием шрифта, в котором отсутствуют кириллические глифы , у нас ничего не получится.
4. Применение для отображения символов . Необходимо иметь способ проинформировать программу, в которой осуществляется просмотр текста, о том, какая именно его часть должна отображаться с использованием того или иного шрифта.

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

Поиск шрифта для веб-сайта

Самая первая задача, которую нам необходимо решить, это - найти и выбрать подходящий шрифт и убедиться, что:

• он поддерживает нужный язык (в частности, русский)
• лицензия шрифта допускает его использование на веб-сайте

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

• MyFonts - крупнейшая онлайн библиотека шрифтов, предоставляет удобную систему поиска с подробной информацией о каждом шрифтовом семействе и возможностью скачать или приобрести выбранные варианты.
• Google Webfonts - библиотека свободно-распространяемых шрифтов, созданная компанией Google, все шрифты из данной коллекции могут быть свободно использованы на любых сайтах, при этом Google также предоставляет простой интерфейс для их встраивания.
• Adobe Edge Web Fonts - аналогичный сервис от Adobe, содержащий большой каталог свободно-доступных шрифтов, средства поиска и тестирования, возможность встраивания в сайт.
• free.type.org.ua - пополняемая коллекция свободно-распространяемых шрифтов с поддержкой кириллицы.

Если в названии шрифта его кириллическая сущность не указана явно (например, Museo Sans Cyrillic), то чтобы убедиться в поддержке русского языка, необходимо либо просмотреть таблицу содержащихся в нем символов, либо попробовать что-нибудь им написать. Некоторые онлайн библиотеки предоставляют такую возможность, альтернативно можно использовать сервисы для тестирования шрифтов, например:

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

Шрифт можно использовать на сайте, только в случае если лицензионное соглашение (EULA) приобретенная у дизайнера или агентства разрешает это. Многие производители шрифтов (в том числе и кириллических, например, ParaType) предоставляют такую лицензию. В качестве альтернативы покупки веб-лицензии шрифта у отдельного агентства, выступают сервисы встраиваемых шрифтов (Web Font Embedding Services). Они представляют собой по сути удаленные библиотеки шрифтов, дающие своим клиентам возможность подгружать шрифты и встраивать их в свои сайты за некоторую абонентскую плату (обзор сервисов встраивания). Наиболее популярные среди них:

Однако все эти сервисы в силу своего происхождения ориентированы в первую очередь на зарубежный (использующий латиницу) рынок и количество шрифтов, поддерживающих кириллицу, у них невелико. Цена же подписки на эти сервисы достаточно высока и может быть признана неоправданной для отдельного некоммерческого проекта. Достойной альтернативой им служит использование свободно-распространяемых шрифтов, например из уже упоминавшихся Google Webfonts или Adobe Edge Web Fonts, а также предоставляемых отдельными дизайнерами или агентствами (подробнее о проблеме лицензирования шрифтов для веб рассказывает статья A List Apart).

Форматы шрифтов для веб

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

TTF - TrueType - формат компьютерных шрифтов, разработанный фирмой Apple в конце 1980-х годов, сейчас используется компаниями Apple и Microsoft в своих операционных системах. Файлы шрифтов имеют расширение .ttf .

OTF - OpenType - формат файла шрифтов разработанный совместно Microsoft и Adobe для применения в своих операционных системах. OpenType обладает большими по сравнению с TrueType возможностями до печатной подготовки и поддерживает больший набор символов при меньшем размере файла. Кроссплатформенность OpenType достигается за счет включения в один файл и Windows и Mac OS-версий данного шрифта. Файлы шрифтов имеют расширение .ttf или .otf .

EOT - Embedded OpenType - компактный формат внедряемых в веб страницы OpenType шрифтов разработанный Microsoft. Файлы таких шрифтов обычно имеют расширение .eot . Формат Embedded OpenType проприетарный и поддерживается исключительно браузером Internet Explorer.

WOFF - Web Open Font Format - формат сжатого шрифта OpenType или TrueType, представляет собой что-то вроде контейнера, который содержит в себе оригинальные шрифты в формате OpenType или TrueType. При этом исходные шрифты сжимаются для удобства передачи и сопровождаются рядом данных, которые может добавить разработчик шрифта.

SVG - Scalable Vector Graphics - язык разметки масштабируемой векторной графики, в с помощью которого можно описать и представление шрифта.

Веб-сайты просматриваются посетителями с использованием различных браузеров, которые в свою очередь функционируют в различных операционных системах (Windows, Mac OS, Linux, Android, iOS и т.п.). Используя нестандартный шрифт, мы должны обеспечить его отображение в большинстве (в идеале во всех) случаях. Так как ни один из указанных вариантов не является полностью кросс-платформенным, их придется использовать несколько, чтобы решить эту задачу. Обычно рекомендуется иметь следующую комбинацию форматов для установки на сайт: TTF, WOFF, EOT, SVG. Имея шрифт TTF или OTF можно конвертировать его, используя, например, генератор Fontsquirrel - сервис позволяет загрузить шрифт и конвертировать его в необходимые форматы. Кроме этого, он генерирует код CSS, который можно использовать для последующей установки шрифтов на сайт.

При использовании библиотеки Google или Adobe Edge - можно не беспокоится о форматах. Предоставляемый компаниями программный сервис определяет поддержку шрифта в большинстве случаев.

Встраивание шрифтов в сайт

Сама возможность встраивать шрифты для использования на сайте (подобно тому как мы встраиваем изображения или видео) обеспечивается языком стилей CSS , который отвечает за оформление всех элементов на странице, в том числе и текста. Уже на ранних этапах развития этой технологии существовала возможность указать, какой шрифт должен использоваться для отображения того или иного элемента. Однако при этом предполагалось, что указанный шрифт должен быть установлен на компьютере пользователя. Как вариант «страховки» на случай отсутствия конкретного шрифта - существовала возможность задать несколько шрифтов в порядке «приоритетности», с тем чтобы система последовательно выполнина поиск и использовала первый найденный вариант из списка. Такой подход породил концепцию безопасных для веб шрифтов (web save fonts) - некоторого набора шрифтов, которые с большой долей вероятности установлены на компьютерах пользователей, так как, например, входят в комплект поставки ОС или просто пользуются большой популярностью.

Статистику «распространения» таких шрифтов можно увидеть с помощью сервисаcssfontstack.com , который также помогает сконструировать последовательность «страховочных» шрифтов для каждого из них.

Соответственно, все возможности веб-типографики того периода были сосредоточены в десятке шрифтов, которые входили в состав «безопасного» набора. Однако с развитием CSS появилась возможность «встраивать» шрифты в сайт, т.е. размещать файл шрифта вместе с другим содержимым сайта на сервере и ссылаться на него в коде шаблонов с тем, чтобы он загружался браузером при просмотре сайта и таким образом становился доступным для использования на компьютере пользователя. Это достигается с помощью директивы @font-face , она поддерживается большинством современных браузеров и используется на все большем числе сайтов. Но и при ее использовании не следует забывать указывать «страховочные» варианты шрифтов, которые могут быть использованы в случаях, когда основной шрифт по какой-то причине оказался недоступным. Итак,встраиваем шрифт, расположенный на собственном сервере .

1. Находим нужный шрифт в формате TTF или OTF, проверяем, поддерживает ли он нужный нам язык.
2. Используем генератор Fontsquirrel для конвертации шрифта в различные веб-форматы.

1. Скачиваем создаваемый генератором @font-face-пакет, который включает в себя файлы шрифтов (их необходимо разместить на сервере, вместе с другими элементами шаблона) и заготовку @font-face правила, которое необходимо разместить в самом начале файла стилей на своем сайте, убедившись, что пути к файлам шрифтов в нем указаны верно.

@font-face { font-family: ‘myfont’; src: url(‘myfont-webfont.eot’); src: url(‘myfont-webfont.eot?#iefix’) format(’embedded-opentype’), url(‘myfont-webfont.woff’) format(‘woff’), url(‘myfont-webfont.ttf’) format(‘truetype’), url(‘myfont-webfont.svg#myfont’) format(‘svg’); font-weight: normal; font-style: normal; }

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

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

1. Выбираем шрифт в библиотеке и проверяем, поддерживает ли он нужный язык.
2. В режиме «быстрого использования» выбираем необходимый нам вариант начертания и наборы символов, которые необходимо поддерживать. Чем больше вариантов мы захотим использовать, тем «тяжелее» файл шрифта и как следствие больше время его загрузки. Поэтому не выбирайте лишнего.
3. Копируем генерируемый системой код и вставляем его в код шаблона сайта между тэгами перед другими ссылками на .css файлы.
4. Указываем в стилях, к каким элементам должен быть применен встроенный шрифт с помощью регулярного CSS синтаксиса, также как и в предыдущем случае.

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

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

Шрифты

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

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

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

Крупные компании, наподобие Microsoft, не горели желанием (что вполне понимаемо) добавлять функциональность, которая могла бы потакать загрузке веб-разработчиками установленных на компьютере шрифтов на веб-сайт без должного на то разрешения.

В CSS3 поддержка сложных шрифтов обеспечивается посредством возможности @font-face , которая применяется следующим образом:

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

Каждый шрифт регистрируется в таблице стилей с помощью команды @font-face.

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

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

В последующих разделах мы рассмотрим эти шаги более подробно.

Форматы веб-шрифтов

Хотя все современные браузеры поддерживают возможность @font-face, не все они поддерживают одинаковые типы файлов шрифтов. Например, Internet Explorer, который обеспечивает использование @font-face в течение многих лет, поддерживает только файлы типа EOT (Embedded OpenType) . Этот формат предоставляет ряд преимуществ, например, в нем используется сжатие для уменьшения объема файла шрифтов, а также применяется строгое лицензирование для веб-сайтов, чтобы шрифт нельзя было украсть с одного сайта и использовать на другом.

Но формат EOT никогда ни пользовался большой популярностью и не используется никакими другими браузерами. Вместо него браузеры работают с более знакомыми стандартами шрифтов, применяемыми в компьютерных приложениях - TTF (TrueType) и OTF (OpenType PostScript) . Кроме этого, существуют еще два типа отображения шрифтов - SVG и WOFF. В таблице ниже дано краткое описание всех этих форматов шрифтов:

Форматы внедряемых шрифтов

Формат	Описание	Используется в
TTF (TrueType), OTF (OpenType PostScript)	Распространенные форматы шрифтов настольных компьютеров	Firefox (до версии 3.6), Chrome (до версии 6), Safari и Opera
EOT (Embedded OpenType)	Формат, специфичный для продуктов корпорации Microsoft. Не завоевал популярности у браузеров, за исключением Internet Explorer	Internet Explorer (до версии IE 9)
SVG (Scalable Vector Graphics)	Универсальный графический формат, который можно использовать для создания шрифтов. Дает хорошие, но не отличные результаты - медленно отображается и демонстрирует текст пониженного качества	Safari Mobile (на iPhone и iPad до iOS 4.2) и мобильные устройства под управлением операционной системы Android
WOFF (Web Open Font Format)	Возможно, единый формат шрифтов будущего. Поддерживается новыми версиями браузеров	Любой поддерживающий браузер, начиная с Internet Explorer 9, Firefox 3.6 и Chrome 6

В итоге можно сказать следующее: если вы хотите использовать возможность @font-face и поддерживать широкий диапазон браузеров, вам нужно предоставлять ваш шрифт в нескольких разных форматах. Как минимум, шрифт нужно предоставить в формате TTF или OTF (без разницы), EOT и SVG. Хорошо (но не обязательно) также предоставить шрифт в перспективном формате WOFF, может стать более популярным и лучше поддерживаемым в будущем. (Одним из достоинств этого формата является использование сжатых файлов, что сокращает время их загрузки.)

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

Многие шрифты выглядят плохо в операционной системе Windows XP, т.к. в настройках многих компьютеров с этой операционной системой отключено сглаживание (anti-aliasing). (А без применения сглаживания шрифты выглядят очень непривлекательно.)

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

Некоторые браузеры страдают проблемой FOUT (Flash of Unstyled Text, вспышка нестилизованного текста) . Это явление происходит, когда внедренный шрифт не успевает загрузиться вовремя, и страница отображается сначала в резервном шрифте, а потом воспроизводится повторно на встроенном шрифте. Эта проблема особенно заметна в старых версиях браузера Firefox. Если вас это сильно беспокоит, можете воспользоваться библиотекой JavaScript от Google , позволяющей разработчику определить резервные стили, которые используются вместо незагруженных внедренных шрифтов, таким образом, предоставляя ему полный контроль над воспроизведением текста в любое время.

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

Наборы шрифтов

Вы, наверное, уже задаетесь вопросом, где можно взять разные файлы шрифтов, которые могут вам потребоваться? Легче всего будет загрузить готовый набор шрифтов из Интернета, получив, таким образом, все требуемые файлы шрифтов. Недостаток этого подхода состоит в том, что ваш выбор ограничивается тем, что вы сможете найти в глобальной сети. Чтобы помочь вам в поиске наборов веб-шрифтов, можно порекомендовать воспользоваться одним из лучших сайтов шрифтов - Font Squirrel . На рисунке ниже показано несколько шрифтов из предоставляемых на этом сайте наборов:

Сайт Font Squirrel предоставляет для загрузки несколько сотен высококачественных шрифтов, организованных в разделы по категориям (такие как, например, Calligraphic, Grunge или Retro). Но самое приятное, что все эти шрифты бесплатные для любого использования, будь то на персональном компьютере для создания документов или на веб-странице в Интернете.

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

@font-face { font-family: "MetrophobicRegular"; src: url("Metrophobic-webfont.eot"); src: local("Metrophobic"), url("Metrophobic-webfont.eot?#iefix") format("embedded-opentype"), url("Metrophobic-webfont.woff") format("woff"), url("Metrophobic-webfont.ttf") format("truetype"), url("Metrophobic-webfont.svg#MetrophobicRegular") format("svg"); font-weight: normal; font-style: normal; }

Строки приведенного кода выполняют следующие функции:

Выражение @font-face регистрирует шрифт для его дальнейшего применения в таблице стилей.

Шрифту можно присвоить любое название. Это название будет употреблено позже, при использовании шрифта.

Первым должен быть указан формат EOT, т.к. дальнейшая часть правила сбивает с толку Internet Explorer, и тот не обращает внимания на остальные форматы. Функция таблицы стилей url() указывает браузеру загрузить файл из обозначенного URL. Если шрифт размещен в одной папке с веб-страницей, то здесь можно просто указать название файла.

Функция local() указывает браузеру название шрифта, и если этот шрифт установлен на компьютере посетителя веб-страницы, браузер использует локальный шрифт. Но в редких случаях это может вызвать проблемы. Например, в зависимости от того, где установлен шрифт на компьютере посетителя, компьютеры Mac OS X могут вывести предупреждение о нарушении безопасности, или же может загрузиться другой шрифт с таким же названием, как и ваш. По этой причине веб-разработчики иногда указывают явно несуществующее имя файла, чтобы браузер не нашел локального шрифта. В качестве простого имени такого типа можно использовать какой-либо бессмысленный символ.

Последний шаг - это сообщить браузеру о других файлах шрифтов, которые он может использовать. Если имеется файл шрифта типа WOFF, укажите этот файл первым, т.к. данный формат предоставляет наилучшее качество шрифта. Следующим укажите файл шрифта формата TTF или OTF, а самым последним - файл формата SVG.

Зарегистрировав веб-шрифт с помощью функции ©font-face, вы можете использовать его в любой таблице стилей. Для этого используется уже знакомое нам свойство font-family, которому присваивается значение в виде названия семейства шрифтов, зарегистрированного с помощью функции @font-face (в строке 2). Далее приведен пример использования этого шрифта в правиле таблицы стилей:

Body { font-family: "MetrophobicRegular"; }

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

Веб-шрифты Google

Еще один источник бесплатных веб-шрифтов -- это служба Google Web Fonts . Ее особенность в том, что пользователю не нужно беспокоиться о форматах шрифтов, т.к. Google определяет браузер посетителя страницы и автоматически отправляет файл шрифта нужного формата.

Чтобы использовать шрифт Google в своих страницах, выполните такую последовательность шагов:

Всем добрый день!!! Сегодня мы поговорим о шрифтах. А поможет нам в этом иностранный товарищ. Внимательно читаем и перенимаем опыт.

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

Томас Лауринавичус (Tomas Laurinavicius) заинтересовался, какие шрифты любят больше всего использовать веб-дизайнеры в своей работе.

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

Кроме того, он взял короткое интервью у веб-дизайнеров с целью узнать, какой шрифт наиболее подходит в определенной ситуации. Результатами своего опроса Томас поделился на сайте hongkiat.com.

Во время опроса веб-дизайнеры назвали 73 различных шрифта – 46 бесплатных и 27 платных.

Самыми любимыми шрифтами веб-дизайнеров оказались: Helvetica, Arial, Georgia, Gotham, Myriad Pro, DIN, Futura, League Gotic, Cabin, Corbel.

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

Топ-10 любимых бесплатных шрифтов веб-дизайнеров

Опрошенные дизайнеры выбрали 10 лучших шрифтов для веб-графики. При этом не учитывались шрифты, по умолчанию установленные в операционную систему, такие как, Arial, Verdana, Times New Roman, Georgia или Tahoma. (Это немного странно – на первом месте шрифт, который есть в операционной системе).

Топ-10 любимых платных шрифтов веб-дизайнеров

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

Первая часть главы посвящена знакомству с CSS шрифтами. На этой странице вы узнаете, как подключать шрифты в CSS, что такое веб-шрифты и как с ними работать, какие форматы шрифтов бывают, как пользоваться Google Fonts. Для начала рассмотрим легкий пример подключения шрифта CSS:

P { font-family: Verdana; }

Этот небольшой кусочек кода означает, что ко всем тегам

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

В свое время дизайнерам приходилось дополнительно указывать несколько запасных шрифтов на случай, если на компьютере пользователя будет отсутствовать основной. Допустим, вы желаете оформить текст шрифтом Verdana, а в качестве запасных установить шрифты Trebuchet MS, Geneva и любой шрифт без засечек. Записывается это таким образом:

P { font-family: Verdana, "Trebuchet MS", Geneva, sans-serif; }

При обработке этого кода браузер сначала проверит наличие шрифта Verdana на компьютере пользователя. Если шрифт присутствует, содержимое тегов

Отобразится этим шрифтом. Если шрифт отсутствует, браузер проверит наличие следующего по списку шрифта – Trebuchet MS. Если и этот шрифт отсутствует, будет проверяться наличие следующего шрифта – Geneva. Если на компьютере пользователя нет и Geneva, браузер выберет другой доступный шрифт без засечек и отобразит текст им.

Обратите внимание: в коде мы записали название шрифта Trebuchet MS в кавычках. Необходимо брать название шрифта в двойные либо одинарные кавычки тогда, когда в нем содержатся пробелы.

О том, что такое шрифт с засечками (serif) и без (sans-serif), вы можете прочитать на странице Википедии .

Веб-шрифты

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

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

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

Поддержка форматов

Как бороться с проблемой несоответствия формата файла? Давайте взглянем на таблицу, где показаны наиболее популярные форматы шрифтов и узнаем, какие браузеры их поддерживают:

Примечание: актуальную информацию о поддержке форматов шрифтов вы всегда можете узнать на сайте caniuse.com . В строку поиска необходимо ввести название формата (например, ttf).

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

Подключаем веб-шрифт с помощью @font-face

Предположим, у вас есть свой уникальный шрифт под названием MyUniqueFont в формате TTF и вы желаете, чтобы основной текст веб-страницы отображался именно этим шрифтом. Первое, что нужно сделать, это скопировать файл шрифта в папку, где находятся все остальные файлы сайта. Чтобы не создавать беспорядок, вы можете создать отдельную папку специально для шрифтов, назвав ее, к примеру, fonts .

@font-face { font-family: MyUniqueFont; src: url("fonts/MyUniqueFont.ttf"); }

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

P { font-family: MyUniqueFont; }

Во второй строке указывается путь к файлу шрифта. В нашем примере файл MyUniqueFont.ttf находится в папке fonts . У вас URL-адрес может отличаться.

Шрифты Google Fonts

Компания Google дает возможность легко подключать любой шрифт из коллекции Google Fonts. Всё, что вам необходимо сделать, чтобы начать использовать понравившийся шрифт, – указать несколько настроек на странице шрифта в Google, после чего скопировать специальную ссылку на этот шрифт и добавить в ваш веб-документ.

Примечание: вся коллекция шрифтов от Google доступна на сайте Google Fonts . На странице можно воспользоваться различными фильтрами для поиска шрифтов по категориям, толщине, алфавиту.

Ниже мы опишем каждый шаг подключения шрифта от Google. Чтобы понимать, о чем идет речь, выберите любой шрифт со страницы Google Fonts и откройте его, нажав на кнопку Quick-use .

Шаг 1: выберите начертание

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

Шаг 2: выберите алфавит

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

Шаг 3: добавьте код на сайт

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

...

Второй способ – подключение шрифта с помощью директивы @import . Готовый код находится во второй вкладке пункта 3 на странице выбранного Google-шрифта. Его нужно добавить в самое начало вашей таблицы стилей (в противном случае файл не импортируется). Выглядит код примерно так:

@import url(http://fonts.googleapis.com/css?family=Roboto&subset=latin,cyrillic);

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

Шаг 4: создайте стиль

После осуществления предыдущих шагов можно начать применять шрифт. Как записывается такое правило CSS, вы уже видели ранее:

P { font-family: "Roboto", sans-serif; }

Если на первом шаге вы выбрали несколько вариантов начертания (к примеру, добавили вариант жирного шрифта Bold 700), тогда на третьем шаге код немного видоизменится:

@import url(http://fonts.googleapis.com/css?family=Roboto:700,400&subset=latin,cyrillic);

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

P { font-family: "Roboto", sans-serif; font-weight: 700; }

Примечание: в Google Fonts для обозначения насыщенности шрифта используются только условные единицы от 100 до 900. Так, нормальное начертание (по умолчанию) эквивалентно значению 400 (normal), а стандартное полужирное начертание эквивалентно 700 (bold).

Главными преимуществами сервиса Google Fonts является:

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

Среди недостатков сервиса – не очень большое разнообразие шрифтов, особенно кириллических. К слову, в интернете есть и другие похожие сервисы, например, TypeKit (платный).

Итоги

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