Примери за използване

Свойството font-weight ви позволява да зададете дебелината, с която да се показват буквите на текста. Обикновено свойството font-weight се използва за показване на получер текст (получер шрифт):

adipiscing elit

Lorem ipsum болка седи amet, по-освежаващо по-елиптиращ elit. Donec dignissim. Pellentesque id pede vitae pede ultricies gravida. Бъдете вулпутирани. Vestibulum quis ipsum. Aenean nec quam. Be ultricks tempor massa.

Другото често използвано свойство font-weight е да показва текст, който първоначално е бил показан с получер шрифт, като етикета, с нормален стил от HTML:

В допълнение към получер и нормални стойности, свойството на шрифта определя относителните стойности по-светъл (по-тънък) и по-смел (по-дебел). Препратката, която се прави, за да направи буквата повече или по-малко дебела, е дебелината, наследена от елемента на контейнера.

Следващият пример показва различните резултати, които по-леките и по-смелите стойности дават в зависимост от дебелината на буквата в елемента на контейнера:

Lorem ipsum dolor sit amet, concectetuer adipiscing elit.

Lorem ipsum dolor sit amet, concectetuer adipiscing elit.

Lorem ipsum dolor sit amet, concectetuer adipiscing elit.

Lorem ipsum dolor sit amet, concectetuer adipiscing elit.

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

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

Освен това, шрифтовете с много различни тегла използват номенклатура, която не е стандартна и следователно варира от един шрифт до друг. Ако вземете например дебелина, която изглежда удебелена, името на тази дебелина може да бъде получер, правилен, римски, среден, полуплътен или черен в зависимост от шрифта.

Поради тази причина свойството font-weight не използва думи, за да се отнася за всяко тегло, но дефинира девет числови стойности, вариращи от 100 до 900. Нормалната стойност съответства на числовата стойност 400, а получерната стойност съответства на числовата стойност 700 .

Стандартът CSS 2.1 обяснява, че всяка цифрова стойност показва, че тази дебелина е поне толкова дебела, колкото предишната цифрова стойност. Следващият пример показва девет абзаца с различна дебелина, въпреки че на практика браузърите показват само две различни дебелини:

Lorem ipsum dolor sit amet, concectetuer adipiscing elit.

Lorem ipsum dolor sit amet, concectetuer adipiscing elit.

Lorem ipsum dolor sit amet, concectetuer adipiscing elit.

Lorem ipsum dolor sit amet, concectetuer adipiscing elit.

Lorem ipsum dolor sit amet, concectetuer adipiscing elit.

Lorem ipsum dolor sit amet, concectetuer adipiscing elit.

Lorem ipsum dolor sit amet, concectetuer adipiscing elit.

Lorem ipsum dolor sit amet, concectetuer adipiscing elit.

Lorem ipsum dolor sit amet, concectetuer adipiscing elit.

Когато шрифтът има само нормален стил и получер стил, числовите стойности 100, 200, 300, 400 и 500 съответстват на нормалния стил, а числовите стойности 600, 700, 800 и 900 съответстват на получер шрифт.

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

  • Ако шрифтът определя числова скала за дебелина с всичките девет стойности (като шрифтове OpenType), тези стойности се използват директно.
  • Ако шрифтът има шрифт, наречен Medium, и друг тип, наречен Book, Regular, Roman или Normal, средният стил се присвоява на числовата стойност 500 .
  • Удебеленият стил обикновено съответства на числовата стойност 700 .
  • Ако шрифтът има по-малко от девет различни тегла, липсващите цифрови стойности се присвояват, следвайки алгоритъма, обяснен по-долу:
    • Ако стойността 500 не е присвоена, тя се присвоява на същия стил като стойността 400
    • Ако стойностите 600, 700, 800 и 900 не са картографирани, те се картографират до следващата налична дебелина (обикновено еквивалентна на получерната стойност). Ако няма други тежести, те се присвояват на стила, съответстващ на предишната дебелина (обикновено еквивалентен на нормалната стойност).
    • Ако стойностите 100, 200 и 300 не са зададени, те се присвояват на предишната налична дебелина. Ако няма налична предишна дебелина, те се присвояват на следващата дебелина.

Ако например имате шрифт с четири дебелини:

Шрифт Присвоен размер Допълнителни зададени размери
TypeNameRegular Letter 400 100, 200, 300
TypeNameLetter Medium 500 -
TypeNameLetter Bold 700 600
TypeNameLetter Heavy 800 900

Ако например имате шрифт с шест дебелини:

Шрифт Присвоен размер Допълнителни зададени размери
TypeNameLetter Book 400 100, 200, 300
TypeNameLetter Medium 500 -
TypeNameLetter Bold 700 600
TypeNameLetter Heavy 800 -
TypeNameLetter Black 900 -
TypeNameLetter ExtraBlack - -

Свойството font-weight е едно от най-слабо използваните свойства в CSS. Ограниченията на браузърите и шрифтовете, използвани от нормалните потребители, възпрепятстват правилната работа извън нормалните и получер стойности .