Váha písma - Triky CSS

Anonim

font-weightVlastnost nastavuje hmotnost, tloušťka, z písma a je závislé buď na dostupných plochách písmo v rámci rodiny fontů nebo hmotnosti definované v prohlížeči.

span ( font-weight: bold; )

font-weightHotelu je možné platit buď hodnotu klíčového slova nebo předem definované číselnou hodnotu. K dispozici jsou klíčová slova:

  • normal
  • bold
  • bolder
  • lighter

Dostupné číselné hodnoty jsou:

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

Hodnota klíčového slova se normalmapuje na číselnou hodnotu 400a hodnota se boldmapuje na 700.

Aby bylo možné vidět jakýkoli efekt s použitím jiných hodnot než 400nebo 700, musí mít použité písmo předdefinované tváře, které odpovídají uvedeným váhám.

Pokud má písmo v rámci rodiny písem tučnou („700“) nebo normální („400“) verzi, použije ji prohlížeč. Pokud tyto nejsou k dispozici, prohlížeč napodobí vlastní tučné nebo normální verzi písma. Nebude napodobovat ostatní nedostupné váhy. Fonty často používají názvy jako „Regular“ a „Light“ k identifikaci jakékoli alternativní váhy písma.

Následující ukázka ukazuje použití alternativních hodnot hmotnosti:

Podívejte se na toto pero!

Výše uvedená ukázka využívá bezplatné písmo Open Sans vložené pomocí rozhraní Google Web Fonts API. Písmo se načte se všemi dostupnými váhami písma, a tak se pomocí font-weightvlastnosti zobrazí různé dostupné váhy, jak je popsáno v textu každého odstavce. Nedostupná závaží jednoduše zobrazují logicky nejbližší váhu.

Běžná písma jako Arial, Helvetica, Georgia atd. Nemají jiné váhy než 400a 700. Stejná ukázka zobrazená s jedním z těchto písem by tedy v devíti odstavcích zobrazila pouze dvě váhy.

Použití výrazů „odvážnější“ a „lehčí“

Hodnoty klíčového slova boldera lighterjsou relativní k vypočítané hmotnosti písma nadřazeného prvku. Prohlížeč bude hledat nejbližší „odvážnější“ nebo „lehčí“ váhu podle toho, co je v rodině písem k dispozici, jinak jednoduše zvolí „400“ nebo „700“, podle toho, co má největší smysl.

Podřízené prvky nezdědí hodnoty klíčového slova „odvážnější“ a „lehčí“, ale zdědí vypočítanou váhu.

Podpora prohlížeče

Chrome Safari Firefox Opera TJ Android iOS
Funguje Funguje Funguje Funguje Funguje Funguje Funguje