Работаем с насыщенностью шрифтов в CSS

Большинство шрифтов, которые мы используем, представлены в нескольких уровнях насыщенности. Самая распространенная градация: нормальное начертание(normal) и полужирное начертание(CSS bold). В данной статье я хочу познакомить вас с разными уровнями насыщенности шрифтов, доступными в CSS.

Объявление насыщенности в CSS

В CSS предусмотрены разные значения насыщенности, которые можно без труда применять к шрифтам(конечно же, если они представлены в семействе шрифтов):

CSS-значение Описание
100 Тонкий
200 Сверхлегкий
300 Легкий
400 Нормальное начертание(базовый)
500 Средний
600 Полужирное начертание
700 Жирный шрифт
800 Сверхжирное начертание
900 Плотное начертание
normal Эквивалент значения 400 в CSS
CSS font bold Эквивалент значения 700 в CSS
Bolder На один уровень плотности больше, чем у родительского элемента
Lighter На один уровень плотности меньше, чем у родительского элемента
  • Вы будете сталкиваться с разными описаниями данных уровней, поскольку на данный момент не существует единых и универсальных названий и значений для них;
  • Если необходимо добиться более точных параметров насыщенности шрифтов, то я не рекомендую использовать относительные значения плотности(то есть lighter или bolder), а вместо них использовать числовые значения;
  • В типографике каждый уровень насыщенности представляет собой отдельный шрифт, разработанный печатником. Из наиболее распространенных шрифтов для веб-страниц, лишь некоторые могут изменять уровни насыщенности(зачастую они представлены лишь в значениях 400 и 700, а во многих случаях только 400).

Что будет, если уровень насыщенности отсутствует?

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

Уровень плотности шрифта Алгоритм выбора
100-300 Если указанная насыщенность находится в этом диапазоне, то при отсутствии нужного уровня производится подбор подходящего варианта в порядке возрастания значения.
400 Сначала проверяется значение 500. Если оно отсутствует, то подбор продолжается по вариантам ниже 400 в порядке убывания(то есть, 300-100), а далее по значениям выше 500 в порядке возрастания(то есть, 600-900).
500 Сначала проверяется значение 400. Если оно отсутствует, то подбор продолжается по вариантам ниже 400 в порядке убывания(то есть, 300-100), а далее по значениям выше 500 в порядке возрастания(то есть, 600-900).
600-900 Проверяются уровни насыщенности выше указанного значения, а далее перебираются значения ниже указанного в убывающем порядке.

Фальшивое жирное начертание:

Если в семействе шрифтов отсутствует указанный уровень насыщенности, некоторые браузеры могут изменять внешний вид текста ради выдержки стилизации. То есть, попытаются самостоятельно сгенерировать новый CSS font style bold. Этого лучше избегать, поскольку это может привести к неожиданным результатам в разных браузерах.

Можно легко воспользоваться свойством font-synthesis, предусмотренным в CSS3. Оно отвечает за то, разрешено ли браузеру самостоятельно синтезировать полужирный стиль в тех случаях, когда семейство шрифтов выглядит как полужирный текст. Ниже представлен пример использования этого свойства:

/* запрещаем браузеру синтезировать полужирный стиль шрифта */font-synthesis: none;

Прежде чем использовать о font-synthesis в ваших проектах, проверьте браузерную совместимость.

Вопросы и ответы

Я думаю, что следует сразу ответить на вопросы, которые могут возникнуть:

Почему свойство font-weight принимает лишь девять числовых значений?

Данные девять значений могут охватить все традиционные типографские уровни насыщенности.

Почему бы не использовать строчные значения(CSS font weight bold)для указания насыщенности в CSS?

Так как числовые значения нейтральны, и их можно использовать независимо от номенклатуры стилей шрифта.

Почему числовые значения насыщенности в CSS начинаются с 100, а не с 1?

Шрифтовая шкала 100-900 продиктована форматом шрифта TrueType, в котором 400 – это регулярный стиль(то есть, базовый). Такая же шкала используется в CSS и в формате OpenType.

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

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