Открыть меню    

Насыщенность шрифта font-weight и Google Web Fonts

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

выбираем шрифт в Google Web Fonts API

Посчитав, что он отлично подойдет для заголовков вашего сайта, вы следуете по ссылке "quick use" за руководством по его установке.

1) Копировать/вставить тег link: связываем документ с документом, который прописан в атрибуте href:

HTML


<link href='http://fonts.googleapis.com/css?family=Spicy+Rice' 
rel='stylesheet' type='text/css'>

2) Копировать/вставить свойство CSS font-family, в данном случае форматируем заголовки:

CSS


h1, h2, h3, h4, h5 {
   font-family: 'Spicy Rice', cursive;
 
   /* Форматируем заголовки  */
}

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

выбирали шрифт через Google Web Fonts API

Однако затем вы начнете замечать, что ваши шрифты не такие четкие, как вам хотелось, и смотрятся не так хорошо, как это было на странице Google Web Fonts.

на сайте шрифт чуть-чуть изменился

Причина того, что шрифт не такой четкий, лежит в font-weight. По умолчанию font-weight шрифта заголовков в браузерах выставлен, как «bold» («жирный», а именно 700). При выборе этого шрифта, если вы были внимательны, вы могли заметить, что:

С такой проблемой можно столкнуться в случае, если:

  1. Вы не используете reset (сброс) и не специфицировали font-weight для заголовков.
  2. Вы используете Normalize.css вместо reset. Normalize.css не занимается регулированием font-weight, поэтому единообразным значением по умолчанию является bold.
  3. Вы явно задаете font-weight как bold для заголовков (наподобие, как если бы вы использовали reset).

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

Решение: явно задать значение свойства font-weight, причем желательно установить то, которое совпадает для предложенного шрифта.

CSS


h1, h2, h3, h4, h5 {
   font-family: 'Spicy Rice', cursive;
   font-weight: 400; /* уточняем */
}

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

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

Источник

Комментарии к статье

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