Працюємо з насиченістю шрифтів у CSS, 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 у своїх проектах, перевірте браузерну сумісність.

Питання та відповіді

Я думаю, що варто відразу ж відповісти на питання, які можуть виникнути:

Чому властивість font-weight набуває лише дев'ять числових значень?

Ці дев'ять значень дозволяють охопити всі традиційні типографічні рівні насиченості.

Чому б не використовувати малі значення (CSS font weight bold) для вказівки насиченості в CSS?

Тому що числові значення є нейтральними, і їх можна використовувати незалежно від номенклатури стилів шрифту.

Чому числові значення насиченості CSS починаються зі 100, а не з 1?

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

Дана публікація є перекладом статті « How To Fine-Tune Your Font Weights In CSS? », підготовленою дружною командою проекту Інтернет-технології.ру

---