Пользовательская веб-типографика

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

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

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

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

Оказывается, правило @font-face снова было представлено с выходом модуля CSS3 Fonts (http://www.w3.org/TR/css3-fonts). Из-за исторически сложившихся юридических неурядиц по поводу использования шрифтов в веб-страницах это правило лишь недавно начало набирать силу. Кроме того, существует такая проблема, как рассогласованность форматов и реализаций шрифтов от разных поставщиков. Например, формат шрифтов Embedded OpenType (EOT) предпочитался браузером Internet Explorer (и никаким больше). Другие браузеры отдают предпочтение более распространенному формату TrueType (TTF), хотя также существуют Scalable Vector Graphics (SVG) и Web Open Font Format (WOFF).

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

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

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

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

Облагородим типографику сайта And the winner isn’t. с помощью CSS-правила @font-face.

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

Сайт Font Squirrel.

Случилось так, что все шрифты, использованные в моей композиции, бесплатно доступны на сайте Font Squirrel (знаю, что я скряга!). Это шрифты Bebas Neue, Bitstream Vera Sans и Collaborate Thin. Скачав соответствующий набор @font-face для каждого шрифта с сайта Font Squirrel, загляните в ZIP-файл каждого из них, где определенный шрифт представлен в разных форматах (WOFF, TTF, EOT и SVG). Кроме того, там будет файл stylesheet. css, содержащий правила для требуемого шрифта. Например, правило для Bebas Neue выглядит следующим образом:

@font-face {

Font-family: ‘BebasNeueRegular’; src: url(‘BebasNeue-webfont. eot’);

Src: url(‘BebasNeue-webfont. eot?#iefix’) format(‘embedded-opentype’), url(‘BebasNeue-webfont. woff’) format(‘woff’), url(‘BebasNeue-webfont. ttf’) format(‘truetype’), url(‘BebasNeue-webfont. svg#BebasNeueRegular’) format(‘svg’); font-weight: normal; font-style: normal;

}

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

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

@font-face {

Font-family: ‘BebasNeueRegular’; src: url(‘../fonts/BebasNeue-webfont. eot’); src: url(‘../fonts/BebasNeue-webfont. eot?#iefix’) format(‘embedded-opentype’),

Url(‘../fonts/BebasNeue-webfont. woff’) format(‘woff’), url(‘../fonts/BebasNeue-webfont. ttf’) format(‘truetype’), url(‘../fonts/BebasNeue-webfont. svg#BebasNeueRegular’) format(‘svg’);

Font-weight: normal; font-style: normal;

}

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

Nav ul li a { height: 42px; line-height: 42px; text-decoration: none; text-transform: uppercase; font-family: ‘BebasNeueRegular’; font-size: 1.875em; /*30×16 */ color: black;

}

Посмотрите На рисунке 5.19. Вот как теперь будет выглядеть наша навигационная панель в браузере.

Для ссылок установлен шрифт Bebas Neue.

При замене шрифтов вам придется изменять задаваемые для них размеры. Однако, если вычисление размера имеющегося шрифта расшифровывается в комментарии сбоку, то вы сможете легко внести соответствующие исправления. Дополнительное преимущество заключается в том, что, если в композиции задействуются те же шрифты, что и в коде, то вы сможете взять их размеры прямо из файла композиции. Например, размер шрифта текста EVERY YEAR в моей композиции составляет 102 пиксела, поэтому, используя проверенную и надежную формулу ширина цели x ширина контекста = результат, я могу преобразовать это значение в показатель, выраженный в единицах em:

#content h1 { font-family: Arial, Helvetica, Verdana, sans-serif; text-transform: uppercase; font-family: ‘BebasNeueRegular’; font-size: 6.375em; /* 102 x 16 */

}

После внесения изменений в объявления font-family и font-size для всех соответствующих правил наша первая страница сайта будет выглядеть в браузере Google Chrome так, как показано На рисунке 5.20 (с использованием формата шрифтов WOFF).

Дизайн по-прежнему небезупречен, однако теперь типографика идеально соответствует той, что представлена в оригинальной композиции. Для сравнения На рисунке 5.21 показано, как наша страница будет выглядеть на экране iPad 2, операционная система которого поддерживает шрифты TTF начиная с версии iOS 4.2 и выше.

Страница сайта с новым шрифтом в Google Chrome.

Страница сайта с новым шрифтом на экране iPad 2.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *