Помогите — мои заголовки с применением CSS3-правила @font-face выглядят неаккуратно

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

Пример дизайна с пользовательскими шрифтами

Когда я создал сайт, соответствующая разметка выглядела следующим образом:

<div class="intro">

<h1>We’re Bridestone: <span>providing <b>beautiful</b> quality <i>natural</i> stone products.</span></h1>

…еще код™

</div> <!— intro:КОНЕЦ —>

А вот как выглядел соответствующий CSS-код:

.intro h1 {

Font-family: CaudexBold, "Times New Roman", Times, serif; font-size: 2.63636364em; line-height: 1em;

}

.intro h1 span { font-size: 0.545454545em;

Font-family: CaudexRegular, "Times New Roman", Times, serif; font-weight: normal;

}

Несмотря на то что я использовал @font-face, чтобы применить точной такой же шрифт, как в композиции, заголовок выглядел в браузере немного неаккуратно (рисунок 5.23).

Заголовок не вписывается в композицию.

Надеюсь, вы понимаете, что текст We’re Bridestone не соответствует композиции. Его шрифт толще, чем у остального текста, а это ухудшает восприятие!

Получается, что проблема связана с толщиной шрифта. Если явным образом не определить свойство font-weight, то многие браузеры будут применять шрифт стандартной толщины (обычно равной 700) для всех заголовочных элементов. Следовательно, решение данной проблемы — всегда определять свойство font-weight для всех шрифтов, устанавливаемых правилом @font-face и используемых для заголовков. Например, в данном случае я так изменил CSS-код:

.productlntro h1 { font-family: CaudexBold, "Times New Roman", Times, serif; font-weight: 400; font-size: 2.63636364em; line-height: 1em;

}

Выделенная строка переопределяет значение font-weight, обычно используемое браузерами, и, как показано На рисунке 5.24, дизайн в конечном итоге будет соответствовать композиции.

Примечание насчет адаптивных веб-дизайнов и пользовательской веб-типографики, добавляемой посредством @font-face. Применять правило @font-face для пользовательского оформления страницы — отличный подход. Единственное предостережение, о котором необходимо помнить при использовании этой методики в адаптивных веб-дизайнах, касается размера файла шрифтов. Например, для оформления текста на сайте And the winner isn’t. применяются три пользовательских шрифта — Bebas Neue, Bitstream Vera Sans и Collaborate Thin. В самом худшем случае, если устройство, на котором будут открываться страницы сайта, потребует.

Формата шрифтов SVG, это повлечет необходимость в дополнительных 70 Кбайт данных по сравнению с тем, когда используются безопасные веб-шрифты вроде Arial. Такие шрифты в отличие от других довольно легковесны! Обязательно проверьте размер файла пользовательских шрифтов, если хотите обеспечить наиболее быструю загрузку страниц.

Рисунок 5.24. Толщина шрифта для заголовка стала меньше, и он теперь лучше смотрится на странице.

ДЕЙСТВИТЕЛЬНО ли адаптивные единицы измерения УЖЕ НА ПОДХОДЕ?

В текущих рабочих проектах модуля CSS3 Fonts есть ссылка на шрифты, связанные с областями просмотра (http://www.w3.org/TR/css3-values/#viewport-relative-lengths). Единицы измерения vw (viewport width — ширина области просмотра), vh (viewport height — высота области просмотра) и vm (viewport minimum — минимальная ширина или высота области просмотра; значение в vm рассчитывается относительно ширины или высоты области просмотра в зависимости от того, что из них меньше) в будущем могут стать инструментами, позволяющими сэкономить много времени. К сожалению, сейчас они не поддерживаются браузерами (за исключением Internet Explorer 9).

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

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