Работа с наситеност на шрифта в CSS, CSS

Повечето от шрифтовете, които използваме, се предлагат в различни нива на тегло. Най-често срещаните градации са нормални (normal) и удебелени (CSS bold). В тази статия искам да ви запозная с различните нива на тегло на шрифта, налични в CSS.

Декларация на насищане в CSS

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

CSS стойност	Описание
100	тънък
200	Свръхлек
300	лесно
400	Нормален шрифт (основен)
500	Средно аритметично
600	Удебелен
700	Удебелен шрифт
800	Изключително смело
900	Дебел шрифт
нормално	CSS еквивалент на 400
css шрифт удебелен	CSS еквивалент на 700
По-смел	Едно ниво на плътност повече от родителския елемент
запалка	Едно ниво на плътност по-малко от родителския елемент

• Ще срещнете различни описания на тези нива, тъй като в момента няма единни и универсални имена и значения за тях;
• Ако искате да постигнете по-прецизни настройки за теглото на шрифта, тогава не препоръчвам да използвате стойности за относително тегло (т.е. по-леки или по-дебели), а вместо това използвайте числови стойности;
• В типографията всяко ниво на тегло представлява различен шрифт,проектиран от принтера. От най-често срещаните шрифтове за уеб страници само няколко ви позволяват да промените нивата на наситеност (често те са само 400 и 700, а в много случаи само 400).

Какво се случва, ако няма ниво на насищане?

Най-често само няколко стойности на тегло могат да се използват за определено семейство шрифтове. Ако случайно посочите удебелен CSS текст, който не е наличен за шрифта, тогава ще се използва най-близката стойност, като се използва следното правило:

Ниво на плътност на шрифта	Алгоритъм за избор
100-300	Ако определеното насищане е в този диапазон, тогава при липса на необходимото ниво се избира подходящ вариант във възходящ ред на стойността.
400	Първо се проверява стойността 500. Ако тя липсва, тогава изборът продължава при опции под 400 в низходящ ред (т.е. 300-100), а след това при стойности над 500 във възходящ ред (т.е. 600-900).
500	Първо се проверява стойността 400. Ако тя липсва, тогава изборът продължава при опции под 400 в низходящ ред (т.е. 300-100), а след това при стойности над 500 във възходящ ред (т.е. 600-900).
600-900	Нивата на насищане над определената стойност се тестват и след това стойностите под определената стойност се преминават в низходящ ред.

Фалшив удебелен стил:

Ако семейство шрифтове няма определено ниво на тегло, някои браузъри може да променят външния вид на текста в името на последователността на стила. Тоест, те ще се опитат сами да генерират нов CSS стил на шрифта bold. Това е най-добре да се избягва, тъй като може да доведе до неочакваниводи до различни браузъри.

Можете да използвате свойството за синтез на шрифтове, предоставено от CSS3. Той е отговорен за това дали на браузъра е позволено да синтезира удебеления стил сам в случаите, когато семейството шрифтове изглежда като удебелен текст. Следното е пример за използване на това свойство:

Моля, проверете съвместимостта на браузъра, преди да използвате синтеза на шрифтове във вашите проекти.

Въпроси и отговори

Мисля, че си струва да отговорите на въпросите, които могат да възникнат веднага:

Защо свойството font-weight приема само девет числови стойности?

Тези девет стойности покриват всички традиционни нива на типографско тегло.

Защо не използвате вградени стойности (CSS тегло на шрифта удебелен), за да посочите тегло в CSS?

Тъй като числовите стойности са неутрални и могат да се използват независимо от номенклатурата на стила на шрифта.

Защо числата на насищане в CSS започват от 100, а не от 1?

Скалата на шрифта 100-900 е продиктувана от формата на шрифта TrueType, в който 400 е стандартният стил (тоест основен). Същата скала се използва в CSS и във формата OpenType.

Тази публикация е превод на Как да настроите фино теглото на шрифта си в CSS? » подготвен от приятелския екип на проекта Internet-technologies.ru

---