Písmo - Triky CSS | Almanach CSS 2025

fontNehnuteľnosť v CSS je vlastnosť, skratka, ktorá spája všetky tieto čiastkové vlastnosti v jedinom vyhlásení.

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 sedem fontpodvlastností, medzi ktoré patrí:

font-stretch: táto vlastnosť nastavuje šírku písma, napríklad zhustené alebo rozšírené.
- normal
- ultra-condensed
- extra-condensed
- condensed
- semi-condensed
- semi-expanded
- expanded
- extra-expanded
- ultra-expanded
font-style: spôsobí, že text bude zobrazený kurzívou alebo šikmým písmom.
- normal
- italic
- oblique
- inherit
font-variant: zmení cieľový text na veľké písmená.
- normal
- small-caps
- inherit
font-weight: nastavuje váhu alebo hrúbku 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 veľkosť priestoru nad a pod vloženými prvkami.
- normal
- number (font-size multiplier)
- percentage
font-family: definuje písmo, ktoré sa použije na element.
- sans-serif
- serif
- monospace
- cursive
- fantasy
- caption
- icon
- menu
- message-box
- small-caption
- status-bar
- "string"

Písmo Stenograf Gotchas

fontMajetok nie je tak jednoduché, ako ostatní tesnopis vlastnosti, čiastočne v dôsledku požiadaviek syntaxe pre neho, a čiastočne kvôli problematike dedičnosti.

Tu je súhrn niektorých vecí, ktoré by ste mali vedieť pri používaní tejto skratkovej vlastnosti.

Povinné hodnoty

Dve z fontskratkových hodnôt sú povinné: font-sizea font-family. Ak ani jeden z nich nie je zahrnutý, celá deklarácia bude ignorovaná.

Tiež font-familymusia byť vyhlásené za posledný všetkých hodnôt, inak sa opäť celá vyhlásenia budú ignorované.

Nepovinné hodnoty

Všetkých päť ďalších hodnôt je voliteľných. Ak uvediete ktorékoľvek z font-stylevýrazov font-variant,,,, a font-weightmusia byť pred nimi font-sizevo vyhlásení. Ak nie sú, budú sa ignorovať a môžu tiež spôsobiť ignorovanie povinných hodnôt.

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

Vo vyššie uvedenom príklade sú zahrnuté tri voliteľné položky. Pokiaľ sú tieto definované skôr font-size, je možné ich umiestniť v ľubovoľnom poradí.

Zahrnutie line-heightje tiež voliteľné, ale môže byť deklarované až za font-sizea iba za lomítkom:

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

Vo vyššie uvedenom príklade line-heightje to „20px“. Ak vynecháte line-height, musíte tiež vynechať lomítko, inak bude celý riadok ignorovaný.

Pomocou roztiahnutia písma

font-stretchVlastnosť je nové v CSS3, takže ak je použitý v staršom prehliadači, ktorý nepodporuje font-stretchvo fontskratke, bude to spôsobí, že celý riadok, ktoré majú byť ignorované.

Špecifikácia odporúča zahrnúť záložnú verziu bez font-stretch, naprí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; )

Dedenie pre voliteľné

Ak vynecháte ktorúkoľvek z optianálnych hodnôt (vrátane line-height), vynechané voliteľné položky nebudú dediť hodnoty od svojho nadradeného prvku, ako je to často pri typografických vlastnostiach. Namiesto toho sa uvedú do pôvodného stavu.

Napríklad:

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

V takom prípade sú voliteľné hodnoty (kurzíva, malé písmená a tučné písmo) umiestnené na fontdeklarácii prvku. Budú sa týkať aj väčšiny podradených prvkov.

Pretože sme však znovu deklarovali fontvlastnosť prvkov odseku, všetky voliteľné možnosti sa v odstavcoch resetujú, čo spôsobí návrat štýlu, variantu, hmotnosti a výšky riadku k pôvodným hodnotám.

Kľúčové slová pre definovanie typov systémov

Okrem vyššie uvedenej syntaxe táto fontvlastnosť umožňuje aj použitie kľúčových slov ako hodnôt. Oni sú:

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

Tieto hodnoty kľúčových slov nastavujú písmo, ktoré sa používa v operačnom systéme používateľa pre konkrétnu kategóriu. Napríklad definícia „titulku“ nastaví písmo na tomto prvku tak, aby používalo rovnaké písmo, aké sa používa v operačnom systéme pre ovládacie prvky s titulkami (tlačidlá, rozbaľovacie ponuky atď.).

Jedno kľúčové slovo obsahuje celú hodnotu:

body ( font: menu; )

Ostatné vlastnosti uvedené vyššie nie sú platné v spojení s týmito kľúčovými slovami. Tieto kľúčové slová možno použiť iba s fontskratkou a nemožno ich deklarovať pomocou žiadnej z individuálnych vlastností ručnej práce.