Písmo - Triky CSS | Almanach CSS 2025

fontNemovitost v CSS je vlastnost, zkratka, která spojuje všechny tyto dílčí vlastnosti v jediném prohlášení.

body ( font: normal small-caps normal 16px/1.4 Georgia; ) /* is the same as: body ( font-family: Georgia; line-height: 1.4; font-weight: normal; font-stretch: normal; font-variant: small-caps; font-size: 16px; ) */

Existuje sedm fontdílčích vlastností, včetně:

font-stretch: tato vlastnost nastavuje šířku písma, například zkrácené nebo rozšířené.
- normal
- ultra-condensed
- extra-condensed
- condensed
- semi-condensed
- semi-expanded
- expanded
- extra-expanded
- ultra-expanded
font-style: způsobí, že text bude kurzívou nebo šikmý.
- normal
- italic
- oblique
- inherit
font-variant: změní cílový text na malá písmena.
- normal
- small-caps
- inherit
font-weight: nastavuje váhu nebo tloušťku písma.
- normal
- bold
- bolder
- lighter
- 100, 200, 300, 400, 500, 600, 700, 800, 900
- inherit
font-size: nastaví výšku písma.
- xx-small
- x-small
- small
- medium
- large
- x-large
- xx-large
- smaller, larger
- percentage
- inherit
line-height: definuje velikost prostoru nad a pod vloženými prvky.
- normal
- number (font-size multiplier)
- percentage
font-family: definuje písmo, které se použije na prvek.
- sans-serif
- serif
- monospace
- cursive
- fantasy
- caption
- icon
- menu
- message-box
- small-caption
- status-bar
- "string"

Písmo zkratka Gotchas

fontMajetek není tak jednoduché, jak ostatní těsnopisu vlastnosti, částečně v důsledku požadavků syntaxe pro něj, a částečně kvůli problematice dědičnosti.

Zde je souhrn některých věcí, které byste měli vědět při používání této zkratkové vlastnosti.

Povinné hodnoty

Dvě ze fontzkratek jsou povinné: font-sizea font-family. Pokud některý z nich není zahrnut, bude celá deklarace ignorována.

Také font-familymusí být prohlášeny za poslední všech hodnot, jinak se opět celá prohlášení budou ignorovány.

Nepovinné hodnoty

Všech pět dalších hodnot je volitelných. Pokud zahrnete některý z font-style,, font-varianta font-weight, musí být font-sizev prohlášení uveden před . Pokud nejsou, budou ignorovány a mohou také způsobit ignorování povinných hodnot.

body ( font: italic small-caps bold 44px Georgia, sans-serif; )

Ve výše uvedeném příkladu jsou zahrnuty tři volitelné položky. Pokud jsou definovány dříve font-size, lze je umístit v libovolném pořadí.

Zahrnutí line-heightje rovněž volitelné, ale může být deklarováno až za font-sizelomítkem a pouze za ním:

body ( font: 44px/20px Georgia, sans-serif; )

Ve výše uvedeném příkladu line-heightje to „20px“. Pokud vynecháte line-height, musíte také vynechat lomítko, jinak bude celý řádek ignorován.

Pomocí roztažení písma

font-stretchVlastnost je nového v CSS3, takže pokud je použit ve starším prohlížeči, který nepodporuje font-stretchve fontzkratce, bude to způsobí, že celý řádek, které mají být ignorovány.

Specifikace doporučuje zahrnout záložní řešení font-stretch, například takto:

body ( font: italic small-caps bold 44px Georgia, sans-serif; /* fallback for older browsers */ font: ultra-condensed italic small-caps bold 44px Georgia, sans-serif; )

Dědičnost pro volitelné položky

Pokud vynecháte některou z optianálních hodnot (včetně line-height), vynechané volitelné položky nezdědí hodnoty z jejich nadřazeného prvku, jak je tomu často u typografických vlastností. Místo toho budou obnoveny do původního stavu.

Například:

body ( font: italic small-caps bold 44px/50px Georgia, sans-serif; ) p ( font: 30px Georgia, sans-serif; )

V tomto případě jsou volitelné hodnoty (kurzíva, malá písmena a tučné písmo) umístěny na fontdeklaraci prvku. Budou platit také pro většinu podřízených prvků.

Protože jsme však znovu deklarovali fontvlastnost na odstavcových prvcích, všechny volitelné položky se v odstavcích resetují, což způsobí, že se styl, varianta, váha a výška řádku vrátí na své původní hodnoty.

Klíčová slova pro definování systémových písem

Kromě výše uvedené syntaxe fontvlastnost také umožňuje použití klíčových slov jako hodnot. Oni jsou:

caption
icon
menu
message-box
small-caption
status-bar

Tyto hodnoty klíčových slov nastavují písmo, které se používá v operačním systému uživatele pro danou kategorii. Například definování „titulku“ nastaví písmo na tomto prvku tak, aby používalo stejné písmo, jaké se používá v operačním systému pro ovládací prvky s titulky (tlačítka, rozevírací nabídky atd.).

Jedno klíčové slovo obsahuje celou hodnotu:

body ( font: menu; )

Ostatní vlastnosti uvedené výše nejsou platné ve spojení s těmito klíčovými slovy. Tato klíčová slova lze použít pouze se fontzkratkou a nelze je deklarovat pomocí žádné z jednotlivých vlastností longhand.