Font-weight - CSS-Tricks

Anonim

font-weightProprietatea stabilește greutatea sau grosimea unui font și depinde fie pe fețele de font disponibile într - o familie de fonturi sau greutăți definite de către browser.

span ( font-weight: bold; )

font-weightProprietatea acceptă fie o valoare de cuvânt cheie sau o valoare numerică predefinită. Cuvintele cheie disponibile sunt:

  • normal
  • bold
  • bolder
  • lighter

Valorile numerice disponibile sunt:

  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900

Valoarea cuvântului cheie se normalmapează la valoarea numerică 400și valoarea se boldmapează la 700.

Pentru a vedea orice efect folosind alte valori decât 400sau 700, fontul utilizat trebuie să aibă fețe încorporate care se potrivesc cu greutățile specificate.

Dacă un font are o versiune aldină („700”) sau normală („400”) ca parte a familiei de fonturi, browserul o va folosi. Dacă acestea nu sunt disponibile, browserul va imita propria versiune aldină sau normală a fontului. Nu va imita celelalte greutăți indisponibile. Fonturile folosesc adesea nume precum „Regular” și „Light” pentru a identifica orice greutate alternativă a fontului.

Următoarea demonstrație demonstrează utilizarea valorilor alternative ale greutății:

Verificați acest stilou!

Demo-ul de mai sus folosește fontul gratuit Open Sans, încorporat utilizând Google Web Fonts API. Fontul este încărcat cu toate greutățile fontului disponibile și astfel, folosind font-weightproprietatea, diferitele greutăți disponibile sunt afișate așa cum este descris de textul fiecărui paragraf. Greutățile indisponibile afișează pur și simplu greutatea logică cea mai apropiată.

Fonturile obișnuite precum Arial, Helvetica, Georgia etc. nu au alte greutăți decât 400și 700. Deci, aceeași demonstrație afișată cu unul dintre acele fonturi ar afișa doar două greutăți în cele nouă paragrafe.

Folosind cuvinte cheie „mai îndrăznețe” și „mai ușoare”

Valorile cuvântului cheie bolderși lightersunt relative la greutatea calculată a fontului elementului părinte. Browserul va căuta cea mai apropiată greutate „mai îndrăzneață” sau „mai ușoară”, în funcție de ceea ce este disponibil în familia de fonturi, altfel va alege pur și simplu „400” sau „700”, în funcție de care are cel mai mult sens.

Elementele secundare nu vor moșteni valorile cuvintelor cheie „mai îndrăznețe” și „mai ușoare”, ci vor moșteni greutatea calculată.

Suport pentru browser

Crom Safari Firefox Operă IE Android iOS
Lucrări Lucrări Lucrări Lucrări Lucrări Lucrări Lucrări