Фрэйн . - HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств. 2-е изд.

При всей пользе, ожидаемой от использования единиц измерения относительно окон просмотра, в некоторых браузерах их применение реализовано довольно странно. К примеру, в Safari под управлением iOS 8 при изменении просматриваемой области в ходе прокрутки с верхней части страницы адресная строка сжимается, но никакие изменения в декларируемую высоту окна просмотра не вносятся.

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

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

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

Шрифтовое веб-оформление

Многие годы в веб-приложениях приходилось довольствоваться скучным выбором «безопасных» шрифтов. Когда для дизайна были важны какие-то особые шрифты, приходилось подставлять графический элемент, а для смещения текста от границ окна просмотра применять правило отступа text-indent. Это была та еще работенка!

Но кроме этого, для добавления на страницу особого типографского оформления имелось несколько оригинальных методов. В sIFR (http://www.mikeindustri­es.com/blog/sifr/) и Cufуn (http://cufon.shoqolate.com/generate/) для переделки текстовых элементов с целью их появления в виде шрифтов, для которых они предназначались, использовались технологии Flash и JavaScript соответственно. К счастью, в CSS3 предоставляются средства пользовательского шрифтового оформления, уже готовые к завоеванию широкой популярности.

CSS-правило @font-face

CSS-правило @font-face появилось еще в CSS2 (но затем из CSS 2.1 оно было удалено). Оно даже пользовалось частичной поддержкой Internet Explorer 4 (кроме шуток!). А как обстоят дела, когда речь заходит о CSS3?

Как выясняется, правило @font-face было снова введено для модуля шрифтов CSS3 Fonts Module (http://www.w3.org/TR/css3-fonts). Из-за исторически сложи­вшейся правовой тяжбы, касающейся использования шрифтов в веб-приложениях, серьезные подвижки в фактическом признании данного решения для шрифтового оформления начались только в последние годы.

Как обычно, когда в веб-мире речь идет о привлечении каких-либо ресурсов, единого формата файлов не существует. Точно так же, как изображения могут приходить в JPG, PNG, GIF и других форматах, у шрифтов имеется собственный набор форматов на выбор. Для Internet Explorer (и больше никакого другого браузера) в качестве наиболее предпочтительных были выбраны шрифты формата Embedded OpenType с расширениями имен файлов .eot. Для других браузеров предпочтение отдавалось более распространенным шрифтам формата TrueType с расширениями имен файлов .ttf. В то же время существуют шрифты форматов SVG-графики и Web Open Font Format с расширениями имен файлов .woff или .woff2.

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

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

Реализация веб-шрифтов с помощью @font-face

CSS предоставляет так называемое эт-правило (по названию символа @ — «эт») @font-face, позволяющее ссылаться на онлайн-шрифты, которые затем можно будет использовать для отображения текста.

Существует большое количество великолепных источников, позволяющих просматривать и получать веб-шрифты, среди которых как бесплатные, так и платные. Что касается источников бесплатных шрифтов, то я отдаю предпочтение Font Squirrel (http://www.fontsquirrel.com/), хотя Google также предоставляет бесплатные веб-шрифты, которые в конечном счете подаются с помощью правила @font-face (http://www.google.com/webfonts). Существуют также отличные платные сервисы от Typekit (http://www.typekit.com/) и Font Deck (http://www.fontdeck.com/).

Для данного упражнения я собираюсь загрузить Roboto. Это шрифт, используемый последними Android-телефонами, и если у вас имеется такой телефон, он должен быть вам знаком. В противном случае все, что вам нужно знать о нем, сводится к тому, что это весьма привлекательный шрифт интерфейса, разработанный для обеспечения высокой разборчивости на небольших экранах. Вы сами можете его получить по адресу http://www.fontsquirrel.com/fonts/roboto.