@font-face
CSS pravidlo @font-face umožňuje načíst si do stránky vlastní font a pojmenovat si ho. Toto pojmenování bude potom použitelné u vlastnosti font-family. Font-family určuje font, který se použije k vykreslení písma, přižemž @font-face umožňuje takový font načíst z webu.
Příklad:
@font-face {
font-family: mujfontik; /*
deklarace fontu */
src: url("souborFontu.ttf"); /*
propojení na umístění souboru */
}
h2 {font-family: mujfontik;} /* použití jména ve
stránce */
V příkladu používám soubor souborFontu.ttf, ve kterém je uložený font. Ttf je běžná přípona true-type fontu, kterou podporují běžné operační systémy včetně Windows. Teoreticky by pro správnou funkci písma na stránkách mělo stačit takový font .ttf najít, vložit ho do nějakého adresáře (výše uvedený příklad předpokládá, že je v tomtéž adresáři jako stránka s příkladem) a přes pravidlo @font-face ho použít.
Používat @font-face?
Dnešní web je docela dobře zvyklý na to, že se na stránkách používá jenom několik málo fontů. Arial, Times, Verdana, Helvetica, Courier a občas něco divočejšího jako Georgia nebo Garamond. Předpoklad přitom je, že tato písma jsou na klientských počítačích nainstalovaná. To je většinou pravda.
@font-face je určeno právě pro případy, kdy je potřeba na stránce použít jiný font, který na počítači klienta není nainstalován. Lze tak uživateli ukázat text v libovolném písmu.
Jsou s tím spojena čtyři úskalí:
- ttf font není úplně malý soubor a nějaký čas trvá, než se do klientského počítače stáhne
- mnohé fonty nemají správnou podporu pro české znaky. To většinou zjistíte, když je zkusíte použít v českém textu.
- mnohé fonty, zvláště ty hezké, jsou chráněné autorským zákonem a nelze si je jenom tak vystavit na web
- Internet Explorer dříve nepodporoval ttf fonty a písmo se do něj muselo upravovat do formátu eot, což poněkud komplikuje použití (je s tím mnohem víc práce než jenom nalinkovat a používat)
Já osobně kvůli kombinaci těchto důvodů načítané fonty ve stránkách nepoužívám. Stačí mi, když se stránky zobrazí v nějakém generickém fontu, který uživatel už na svém počítači má předinstalovaný. Ale pokud někdo bazíruje na tom, aby nějaký text byl přesně v určitém fontu (to budou asi chtít pyšné firmy se speciálním corporate manuálem), tak se @font-face dá použít.
Podpora
TTF fonty jsou podporovány všude. V Internet Exploreru od verze 9, takže nefunguje v osmičce. Do Internet Exploreru 8 se musí použít font ve formátu .eot, který se musí vytvořit předem v programu Weft. Osobně mi přijde Explorer 8 jako nehodný pozornosti, takže doporučuji používat ttf.
| Prohlížeč | Podpora formátu fontu |
|---|---|
| Internet Explorer | .eot vždy, woff a ttf až od verze 9. Woff2 až od Edge. |
| Edge | ttf, woff, woff2 |
| Mozilla Firefox | .ttf, woff, woff2 |
| Chrome | .ttf, woff, woff2, |
Příklad se zpětnou kompatibilitou pro IE8
Za src: se dají zapsat dvě nebo více různých umístění fontu oddělená čárkou, jednou .ttf a podruhé .eot:
@font-face{
font-family: nejakejmeno;
local("nejakejmeno"),
src: url("font.ttf"),
url("font.eot");
}
h2 {font-family: nejakejmeno;}
To by situaci velmi zjednodušovalo, protože k fontu se prostě načte takový soubor s definicí písma, který prohlížeč podporuje. Naneštěstí podle mých zkušeností takový zápis funguje v Internet Exploreru až od verze 9. IE 8 a straší totiž nepochopí to oddělení čárkou a celou vlastnost ignorují. Pro verzi 8 je tedy potřeba vymýšlet komplikovanější zápisy:
@font-face{
font-family: nejakejmeno1;
src: url("font.eot"); /* pro Internet Explorer /
}
@font-face{
font-family: nejakejmeno2;
src: url("font.ttf"); /* pro ostatní prohlížeče */
}
h2 {font-family: nejakejmeno1, nejakejmeno2;}
Poslední aktualizace 6. 4. 2017
Reklama
