CSS - Vlastnosti fontu

Dostali sme sa k vlastnostiam CSS, ktoré nám poskytujú naozaj široké spektrum možností, ako bude naša stránka vyzerať. Ako prvé si uvedieme vlastnosti fontu.

Meno fontu

Font môžeme určiť názvom alebo typom. Názvy písem všetci dobre poznáme - Arial, Times New Roman, Courier, Comic Sans MS,... Typy fontu existujú nasledujúce:

Pozrime si zápisy:

p {font-family: Arial}
.patkove {font-family: serif}

Písem môžeme určiť i viacero - použije sa to, ktoré má užívateľ nainštalované, pričom najväčšiu prioritu má prvé. Oddeľujeme ich čiarkami.

span {font-family: Arial, Tahoma, sans-serif}

K príkladu: Ak teda na PC nebude nainštalované písmo Arial, použije sa Tahoma. Pokiaľ by sme nemali ani Tahomu, výsledný font by bol akýkoľvek bezpätkový.

Viacslovné názvy konkrétnych písem by sme mali písať v úvodzovkách:

.bezne {font-family: "Times New Roman",
 "Palatino Linotype"}

Štýl písma

Pod pojmom štýl písma v CSS rozumieme jeho sklonenosť. Môže byť normálny - normal (vtedy nemusíme túto vlastnosť uvádzať - je predvolená), kurzíva - italic alebo šikmý - oblique.

div {font-style: normal}
.kurziva {font-style: italic}
.sikme {font-style: oblique}

Takto sa náš pokus zobrazí v prehliadači:

Variant veľkosti písma

Občas sa stane, že chceme písať text tzv. kapitálkami (veľké písmená, prvé najväčšie). Vtedy sa dá určiť vlastnosť font-variant s hodnotami normal (bežné), small-caps (kapitálky).

p {font-variant: small-caps}

Tučnosť písmen

Väčšina fontov je vytvorená na používanie ako bežný štýl písma alebo ako tučné písmená. Pomocou CSS sa teoreticky dá určiť tučnosť hodnotami: normal, bold, bolder, lighter, 100, 200, 300, ..., 900. Prakticky majú význam väčšinou len hodnoty normal a bold.

.bezne {font-weight: normal}
.tucne {font-weight: bold}

Veľkosť písma

Veľkosť (alebo tiež výška) písmen jednou z najčastejšie určovaných vlastností. Môže nadobúdať hodnoty: xx-small (ultra-malé), x-small (veľmi malé), small (malé), medium (stredne veľké), large (veľké), x-large (veľmi veľké), xx-large (ultra-veľké).

Zvoliť môžeme tiež relatívnu veľkosť: larger (väčšie vzhľadom k bežnému) a smaller (menšie). Dajú sa použiť i dĺžkové jednotky alebo percentá.

.male {font-size: x-small}
div {font-size: 12px}
.vacsie {font-size: larger}
span {font-size: 80%}

Súhrn fontu

CSS nám ponúka i tzv. súhrnné vlastnosti, ktoré môžu zahŕňať všetky bežné vlastnosti danej skupiny. Píšeme ich ako hodnotu a oddeľujeme medzerami. Nemusíme ich písať všetky, stačia tie, ktoré sú povinné a tie, čo potrebujete. Poradie vlastností je presne určené.

V prípade fontov vyzerá syntax nasledovne:

nejaký-element {
 font: štýl-fontu variant-veľkosti
  tučnosť-písmen veľkosť-písma meno-fontu
}

Povinné sú: veľkosť písma a meno fontu.

V praxi sú použiteľné napríklad nasledovné deklarácie:

/* skloneny 11px vysoky Arial */
p {font: oblique 11px Arial}
/* velmi male neproporcionalne pismo */
.male {font: x-small monospace}
/* tucna kapitalkova kurziva Verdana - 1cm */
div {font: italic small-caps bold 1cm Verdana}