Exemple de utilizare

Proprietatea font-weight vă permite să setați grosimea cu care sunt afișate literele textului. De obicei, proprietatea font-weight este utilizată pentru a afișa text aldin (valoare aldinată):

referință

Lorem ipsum pain sit amet, consectetuer adipiscing elit. Donec dignissim. Pellentesque id pede vitae pede ultricies gravida. Fii vulputat. Vestibulum quis ipsum. Aenean nec quam. Be ultrices tempor massa.

Cealaltă utilizare obișnuită a proprietății font-weight este de a afișa textul care a fost afișat inițial cu caractere aldine, cum ar fi eticheta, cu un stil normal din HTML:

În plus față de valorile îndrăznețe și normale, proprietatea în stilul fontului definește valorile relative (mai ușor subțire) și mai groase mai gros). Referința care este luată pentru a face litera mai mult sau mai puțin groasă este grosimea moștenită de la elementul container.

Următorul exemplu prezintă rezultatele diferite pe care valorile mai ușoare și mai îndrăznețe le produc în funcție de grosimea literei din elementul container:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

În exemplul de mai sus, browserele determină grosimea literei elementului container (în acest caz, paragraful) și măresc (mai îndrăzneț) sau micșorează (mai ușor) grosimea acestuia în elementul interior (în acest caz,). De fapt, aceasta este doar explicația teoretică a ceea ce ar trebui să facă browserele, deoarece în practică rezultatele sunt foarte diferite.

Principala problemă cu proprietatea font-weight este că aproape niciun font folosit de utilizatorii normali nu are mai multe greutăți diferite. De fapt, majoritatea fonturilor lor au doar un stil normal (valoare normală) și un stil aldin (valoare aldonată). Prin urmare, până când toate tipurile de caractere au mai multe greutăți diferite, valorile mai îndrăznețe și mai ușoare nu sunt de niciun folos practic.

Mai mult, fonturile care au multe greutăți diferite folosesc o nomenclatură care nu este standard și, prin urmare, variază de la un font la altul. Dacă luați, de exemplu, o grosime care arată îndrăzneață, numele grosimii respective poate fi îndrăzneț, regulat, roman, mediu, semiblod sau negru, în funcție de font.

Din acest motiv, proprietatea font-weight nu folosește cuvinte pentru a se referi la fiecare pondere, ci definește nouă valori numerice cuprinse între 100 și 900. Valoarea normală corespunde valorii numerice 400, iar cea aldină corespunde valorii numerice 700 .

Standardul CSS 2.1 explică faptul că fiecare valoare numerică indică faptul că grosimea respectivă este cel puțin la fel de groasă ca valoarea numerică anterioară. Următorul exemplu prezintă nouă paragrafe cu grosimi diferite, deși în practică browserele arată doar două grosimi diferite:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Când un font are doar stilul normal și stilul aldin, valorile numerice 100, 200, 300, 400 și 500 corespund stilului normal, iar valorile numerice 600, 700, 800 și 900 corespund stilului aldin.

Corespondența dintre greutățile definite de fiecare font și valorile numerice ale proprietății font-weight depinde de fiecare browser. Cu toate acestea, se aplică câteva reguli generale, precum următoarele:

  • Dacă fontul definește o scară de grosime numerică cu toate cele nouă valori (cum ar fi fonturile OpenType), aceste valori sunt utilizate direct.
  • Dacă fontul are un tip de caractere numit Medium și un alt tip numit Book, Regular, Roman sau Normal, stilul Medium este atribuit valorii numerice 500 .
  • Stilul Bold corespunde în mod normal valorii numerice 700 .
  • Dacă fontul are mai puțin de nouă greutăți diferite, valorile numerice lipsă sunt atribuite urmând algoritmul explicat mai jos:
    • Dacă valoarea 500 nu a fost atribuită, aceasta este atribuită aceluiași stil ca valoarea 400
    • Dacă valorile 600, 700, 800 și 900 nu au fost mapate, acestea sunt mapate la următoarea grosime disponibilă (de obicei echivalentă cu valoarea aldină). Dacă nu sunt disponibile alte greutăți, acestea sunt atribuite stilului corespunzător grosimii anterioare (de obicei echivalent cu valoarea normală).
    • Dacă valorile 100, 200 și 300 nu au fost atribuite, acestea sunt atribuite grosimii disponibile anterioare. Dacă nu este disponibilă o grosime anterioară, acestea sunt atribuite grosimii următoare.

Dacă, de exemplu, aveți un font cu patru grosimi:

Tip de caractere Dimensiune atribuită Dimensiuni suplimentare atribuite
TypeNameLiteră regulată 400 100, 200, 300
TypeNameLetter Medium 500 -
TypeNameLetter Bold 700 600
TypeNameLetter Heavy 800 900

Dacă, de exemplu, aveți un font cu șase grosimi:

Tip de caractere Dimensiune atribuită Dimensiuni suplimentare atribuite
TypeNameLetter Book 400 100, 200, 300
TypeNameLetter Medium 500 -
TypeNameLetter Bold 700 600
TypeNameLetter Heavy 800 -
TypeNameLetter Black 900 -
TypeNameLetter ExtraBlack - -

Proprietatea font-weight este una dintre cele mai subutilizate proprietăți din CSS. Limitările browserelor și fonturile utilizate de utilizatorii normali, împiedică funcționarea corectă dincolo de valorile normale și aldine .