CSS-live.ru

Скажем «нет» ложному жирному

Перевод статьи "Say No to Faux Bold" из журнала A List Apart, автор — Alan Stearns, переводчик — GreatRash

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

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

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

Заголовки и единое начертание отображаемых шрифтов

Представим, что вам захотелось использовать некий броский шрифт для ваших заголовков. Возможно вам приглянется шрифт Diplomata, который можно найти на сайте Google Web Fonts. Следуя инструкциям ниже вы можете подключить его для ваших элементов h1:

<link href="http://fonts.googleapis.com/css?family=Diplomata" rel="stylesheet" type="text/css">

<style>
  h1 {
    font-family: 'Diplomata', serif;
  }
</style>

<h1>Yikes!

Что даст подобный результат в Firefox:

Рис. 1: Diplomata в ложном жирном начертании

Dipomata содержит только одно начертание, поэтому правило @font-face, код которого вы получаете, содержит настройку font-face: normal;. Однако, так как в заголовки обычно по умолчанию имеют font-weight: bold; браузер размазывает глифы в попытке эмулировать жирное начертание. В предпросмотре шрифта вы могли видеть элегантные полосы в штрихах букв и он уже имел честное жирное начертание. Ложный жирный, созданный браузером, почти уничтожил подобные детали.

Вы можете исправить подобное поведение Diplomata, добавив font-weight: normal; для h1. Но это будет не слишком хорошим решением в случае когда шрифт недоступен и вам нужно деградировать в дефолтному списку шрифтов. Лучшим решением будет добавление еще одного правила @font-face для шрифтов с единым начертанием, показывающего, что данный шрифт может использоваться как для нормального текста, так и для жирного. Таким образом вы получите нормальное начертание вашего шрифта в заголовках и жирное, в случае его отсутствия и замены стандартным шрифтом.

Если вы перейдете по ссылке на шрифт Diplomata, используя браузер Internet Explorer, то увидите кроссбраузерный код @font-face, предоставленный Google. Вы можете скопировать этот код себе, изменив свойство font-weight на bold.

<link href="http://fonts.googleapis.com/css?family=Diplomata" rel="stylesheet" type="text/css">

<style>
  @font-face {
    font-family: 'Diplomata';
    font-style: normal;
    font-weight: bold;
    src: url('http://themes.googleusercontent.com/static/fonts/diplomata/v1/8UgOK_RUxkBbV-q561I6kPY6323mHUZFJMgTvxaG2iE.eot');
    src: local('Diplomata'), local('Diplomata-Regular'),
    url('http://themes.googleusercontent.com/static/fonts/diplomata/v1/8UgOK_RUxkBbV-q561I6kPY6323mHUZFJMgTvxaG2iE.eot') format('embedded-opentype'), url('http://themes.googleusercontent.com/static/fonts/diplomata/v1/8UgOK_RUxkBbV-q561I6kD8E0i7KZn-EPnyo3HZu7kw.woff')
    format('woff');
  }

  h1 {
    font-family: 'Diplomata', serif;
  }
</style>

<h1>Yikes!

Это сохранит дизайн выбранного шрифта:

Рис. 2: Diplomata без ложного жирного начертания

Так как Diplomata сам по себе жирный, он подходит для заголовков в нормальном начертании. Если вместо него будет использован другой шрифт из списка, заголовки все равно останутся жирными. Трюк с дублированием @font-face сработает и с другими шрифтовыми сервисами. В своем примере, я продублировал правило, которое использует Google, но если вы сами составляете ваше правило, то, возможно, вы захотите проверить @font-face, предложенный такими сервисами как FontSpring, Font Squirrel или Paul Irish. Если на вашем сайте используется шрифт с единым начертанием, то вы можете избежать проблемы ложного жирного путем добавления дополнительного правила @font-face.

Учтите, что спецификация CSS3-Fonts определяет свойство font-synthesis, при помощи которого можно контролировать нужно ли использовать ложный жирный или ложный курсив, используя одно правило @font-face. Но, в настоящее время, ни один браузер не реализовал поддержку этого свойства. Дублирование правил @font-face — единственный способ контролировать подобное поведение в браузерах.

Не обманитесь, отсутствием жирного или курсива

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

К примеру возьмём шрифт Lora, предоставляемый Google Web Fonts. Если вы последуете дефолтным рекомендациям по внедрению шрифта, то вы получите только одно начертание, что даст вам следующие результаты в браузере Chrome для текста, заключенного в <strong> и <cite>

Рис. 3: Lora в ложном жирном и ложном курсивном начертании

На первый взгляд это выглядит не так плохо как слово «Yikes!», использованное выше, но вы можете заметить что жирный текст не такой уж и жирный, а курсив выглядит совсем не как закругленные элегантные глифы на странице с примерами начертаний Lora. Ваш текст может включать стилизацию жирным или курсивом, явную или неявную, но в случае отсутствия подобных начертаний в дело вступит браузер. А вот что вы хотели бы получить на самом деле:

Рис. 4: Настоящее жирное и курсивное начертание шрифта Lora

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

Рис. 5: Шрифтовой веб-интерфейс с дефолтными настройками

Если вам случится выяснить, что вы получаете на выходе совсем не то, что вы видели на странице с примерами, вы можете решить подключить дополнительные стили, стрелка при этом переползет на красное поле.

Рис. 6: Шрифтовой веб-интерфейс со страшной красной шкалой

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

Я не предлагаю вам полагаться только на сервис Google Web Fonts. Но, по крайней мере, если вы отметите там нужные галки для жирного и курсивного начертания этот сервис предложит вам корректно сформированное правило @font-face. Некоторые другие шрифтовые веб-сервисы предлагают отдельное правило @font-face для каждого из начертаний шрифта в семействе, каждое правило настроено на font-weight: normal;. Это может стать причиной всех тех проблем, которые я описал в статье, несмотря на то, что жирное и курсивное начертание присутствует в шрифте.

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

Перевод статьи Say No to Faux Bold автора Alan Stearns

P.S. Это тоже может быть интересно:

8 комментариев

  1. А как быть, если google chrome обрабатывает стиль для h1 только после насильного обновления страницы (F5)?
    А пока не обновишь страницу (т.е. при первой загрузке) он подставляет стиль по умолчанию, несмотря на то, что там написано !important
    Все остальные браузеры почему-то этим не страдают. :(

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

  3. Я не совсем понял. Допустим у меня есть дизайн с 3-мя шрифтами (предположим это шрифты Roboto, PT Sans, Lobster), и у всех в дизайне применяется только начертание normal. Но из за того что на сайте можно поставить <em> <strong> и т. д. мне придется для каждого начертания еще и добавить bold + bold-italic в итоге у меня всего шрифтов должно быть не 3 а 3 + еще 2 начертания  bold + bold-italic ?
    Получается в итоге у меня вместо 3 файлов шрифта должно быть 9 ?

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

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

      1. За вариативными шрифтами слежу это действительно классно. А вот пока приходится мучатся. У меня проблема в том что на сайте дизайнер решил использовать 3 шрифта с 16 начертаниями, делаю как вы и описали сначала то что есть а потом заменяю через Font API но все равно чувствую себя не комфортно с этими костылями…

Добавить комментарий для Денис Отменить ответ

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

Получать новые комментарии по электронной почте. Вы можете подписаться без комментирования.