---

Pravidlo font-family

Jelikož se zde objevil komentář, který mě trošku zarazil, rozhodl jsem se udělat si v této části jasno. A tak se podíváme na to, jak by se mělo definovat písmo pomocí CSS, jaká písma jsou patková, bezpatková, proporcionální a neproporcionální. Nezapomeneme si také říct něco víc o typech písma.

font-family může nabývat tří hodnot, a to <název-písma> , <typ-písma> nebo inherit . Ovlivňuje všechny prvky a je dědičné. Výchozí hodnota závisí na nastavení klienta.

<název-písma>

Obsahuje název vybrané rodiny písma. Pokud se název skládá z několika slov, musí být ohraničen jednoduchými nebo dvojtými uvozovkami.

<typ-písma>

Může obsahovat jedno z následujících: serif , sans-serif , cursive , fantasy , monospace .

inherit

Aktivuje pravidlo, že se hodnota dědí po rodičovském prvku.

Moc tomu zatím nerozumíte? Nevadí, za chvíli to všechno vysvětlím a uvedu nějaké příklady.

Hodnoty pro <typ-písma>

serif

Jedná se o patkové proporcionální písmo. Nejčastější zástupci pro latinku jsou Times New Roman, Garamond, Minion Web, MS Georgia, Bodoni, ITC Stone Serif, Bitstream Cyberbit.

sans-serif

Jedná se o bezpatkové proporcionální písmo. Nejčastější zástupci pro latinku jsou MS Arial, MS Verdana, Helvetica, MS Trebuchet, Univers, Futura, ITC Stone Sans, Gill Sans, Akzidenz Grotesk, ITC Avant Garde Gothic.

cursive

Jedná se o kurzívu. Nejčastější zástupci pro latinku jsou Adobe Poetica, Sanvito, Zapf-Chancery, Snell Roundhand, Ex Ponto, Caflisch Script.

fantasy

Jedná se o dekorativní písmo. Nejčastější zástupci pro latinku jsou Western, Alpha Geometrique, Cottonwood, FB Reactor, Studz, Critter.

monospace

Jedná se o neproporcionální písmo napodobující psací stroj. Nejčastější zástupci pro latinku jsou Courier, MS Courier New, Prestige, Everson Mono.

Patkové nebo bezpatkové?

• Patkové písmo má tahy ukončeny patkami. Mezi patková písma patří známý Times New Roman či Courier. Tato skupina se může dále rozdělit na písma proporcionální a neproporcionální.
  Proporcionální písmo má různé znaky různě široké.
  Neproporcionální písmo má všechny znaky stejně široké.
• Bezpatkové písmo je bez patek. Na webu se nejčastěji objevuje písmo Arial, MS Sans Serif, Helvetica či Verdana. Tato písma vypadají mnohem více elegantně než patková písma, která se však lépe čtou.

Správné využití

Pokud jste předchozímu textu moc nerozuměli, nezoufejte, zkusíme si to teď vysvětlit a pomalu určitě všechno pochopíte.

Takže v CSS pravidlu font-family nastavujeme název a typ písma, který se nám má zobrazit. Tyto hodnoty by měli jít popořadě, a to tak že nejdřív zapíšeme <název-písma> a teprve poté <typ-písma> . <názvů-písma> může být zapsáno několik nebo nemusejí být vůbec uvedeny, přičemž <typ-písma> by měl být uveden pokaždé a to pouze jeden na posledním místě. Pokud <název-písma> obsahuje více jak jedno slovo, musí být ohraničen uvozovkami (dvojtými nebo jednoduchými).

Důležitou věcí je přítomnost <typu-písma> na konci pravidla, která nám zaručí že počítač vždy vybere nějaké písmo, a to protože každý fungující systém má základní typy písem nainstalované. Pokud zapomenete na přidání typu písma do font-family , CSS nebude validní a může se stát že nebude mít pro prohlížeč na výběr žádné písmo.

Příklady

body { font-family: inherit; }

A: dědí hodnotu po rodičovském prvku.

body { font-family: arial; }

B: písmo zobrazené na celé stránce bude Arial . Pokud ho však váš počítač nebude mít nainstalované, CSS nemá žádné v záloze a bude použito výchozí písmo vašeho systému. Upozorňuji však že tato metoda není validní. Situace by se vyřešila přidáním typu písma (např. serif) za název písma (zde arial).

body { font-family: "Arial CE", arial; }

C: písmo zobrazené na celé stránce bude Arial CE . Pokud ho však váš počítač nebude mít nainstalované, CSS pošle další písmo arial . Pokud i toto nebude ve vašem systému nainstalované, nastává stejná situace jako v předchozí metodě. Upozorňuji že tato metoda není validní. Situace by se vyřešila přidáním typu písma (např. sans-serif) za názvy písma (zde Arial CE a arial).

body { font-family: serif; }

D: zobrazí stránku písmem, které je v systému nastaveno jako výchozí pro daný typ písma (zde serif). Tato metoda je validní.

body { font-family: verdana, "Arial CE", arial, sans-serif; }

E: text na stránce bude zobrazen písmem Verdana , pokud není přítomné pokračuje se na písmo Arial CE . Když není k dispozici i Arial CE , použije se arial . A kdyby i toto písmo nebylo v systému nainstalováno, použije se výchozí písmo v systému pro daný typ písma (zde sans-serif). Tato metoda je validní a zcela správná.

12.7.2005