@font-face

CSS pravidlo @font-face umožňuje nastavit 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í:

  1. ttf font není úplně malý soubor a nějaký čas trvá, než se do klientského počítače stáhne
  2. Internet Explorer nepodporuje ttf fonty a písmo se do něj musí 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)
  3. mnohé fonty, zvláště ty hezké, jsou chráněné autorským zákonem a nelze si je jenom tak vystavit na web
  4. 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.

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.

Podpora vlastnosti font-family
Prohlížeč Podpora formátu fontu
Internet Explorer .eot, woff, ttf od verze 9
Mozilla Firefox .ttf, woff
Chrome .ttf, woff, woff2,

Příklad se zpětnou kompatibilitou pro IE8

V některých návodech se uvádí možnost zadat za src: dvě různá umístění fontu oddělená čárkou, jednou .ttf a podruhé .eot:

@font-face{
    font-family: 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;}

 

Reklama

www.webhosting-c4.cz, webhosting s doménou v ceně. 20GB
o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

CSS kurz Přehled hodnot Vlastnosti CSS příklady

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.