Novinky v CSS3: vlastní písmo s @font-face

Martin Smola 16. 10. 2012

Měli jste někdy potřebu použít při tvorbě webové stránky jiný než standardní font? Pokud ano, v dnešní době HTML5 je to možné. Díky vlastnosti CSS3 @font-face, rychle a jednoduše definujete nový font. Pojďme si nastínit výhody a nevýhody této nové vlastnosti a ukázat si, jak k ní přistupují jednotlivé prohlížeče.

Jako ve všech dílech tohoto seriálu se vám i v tomto pokusím podrobně vysvětlit a názorně ukázat, jak funguje další nástroj z rodiny HTML5. Je jím vlastnost @Font-face. Záměrně ji nazývám prefixem @, protože je takto definována a zapisuje se tímto způsobem i v CSS. Jestli se ptáte, k čemu vlastně tato vlastnost slouží, odpovím vám otázkou. Měli jste někdy potřebu použít jiný styl písma, než které jsou na webových stránkách k dispozici? Přesně tak, touto vlastností můžeme použít jakýkoliv soubor se stylem písma, který si nahrajeme na server, nebo ho nalinkujeme z nějakého jiného webového místa. Tomuto stylu písma si pak přiřadíme náš interní název a pokud definujeme nějakému prvku styl písma, použijeme k jeho deklaraci pouze náš název, namísto Arial, Times New Roman, Verdana a podobně.

Tato funkce je už nějakou dobu hojně využívána na spoustě webových stránek a její použití se čím dál více rozšiřuje. Já osobně ho používám na některých z mých posledních projektů jako součást loga. Pokud je součástí loga nějaký text, nahraji na web soubor se stylem a vytvořím logo pomocí @font-face. Pouze pro starší prohlížeče a především IE8 a nižší, je třeba definovat logo obrázkové. Abych řekl pravdu, nevyužívám to úplně ve všech projektech. Pokud je totiž písmo větší velikosti, různé verze prohlížečů ho potom vykreslují s různým vyhlazením. Některé vyhlazení nepoužijí vůbec. To může mít vliv na výsledný dojem. Poslední dobou, hlavně s nástupem podpory HTML5, se snažím vytvářet stránky tak, aby obsahovaly co nejméně obrázkových prvků a aby bylo pokud možno vše nahrazeno nějakou „vektorovou“ alternativou. Ta pak umožňuje přizpůsobit stránku různým velikostem displaye.

Vlastnost se v CSS zapisuje nejprve jako definice nového stylu písma:

@font-face {
    font-family: nazev_naseho_stylu;
  src: url('soubor_s_fontem.ttf'),
         url('soubor_pro_IE.eot');
}

Pokud nechceme font nahrávat ze serveru nebo z jiného místa, můžeme jej nalinkovat. Například na Google fonts si najdeme font, který se nám líbí, klikneme na něj a google nám vygeneruje link, který zapíšeme do hlavičky html dokumentu, stejně jako například externí CSS soubor. Link vygenerovaný googlem může vypadat například takto:

<link href='http://fonts.googleapis.com/css?family=Marcellus+SC' rel='stylesheet' type='text/css'>

Písmo se v tomto případě jmenuje Marcellus SC a tímto názvem ho budeme poté deklarovat ve stylech jednotlivých elementů. Následné použití na libovolný element s textem (ať už jsme definovali soubor s fontem nebo jsme ho nalinkovali):

#id_nejakeho_elementu {
    font-family: nazev_naseho_stylu;
}

nebo takto:

<div id="nejaky_div" style="font-family:nazev_naseho_stylu;"> Text se stylem našeho fontu </div>

Ještě bych měl upřesnit možné, použitelné přípony souborů s fonty. Asi nejpoužívanějším se zdá být True Type Font .ttf. Dále je možné použít Open Type Font .otf a výhradně pro IE9 a vyšší, je nutno používat soubor ve formátu .eot. Online konvertor z ttf, otf formátu do eot je například na stránkách font2web.

Standardně lze zapisovat při definování nového stylu i jeho roztažení font-stretch a to hodnotami:

  • normal
  • condensed
  • ultra-condensed
  • extra-condensed
  • semi-condensed
  • expanded
  • semi-expanded
  • extra-expanded
  • ultra-expanded

Defaultní hodnota je normal.

Dále lze definovat font-style, hodnotami:

  • normal
  • italic
  • oblique

Poslední definovatelnou vlastností je font-weight, tučnost písma:

  • normal
  • bold
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900

Nyní bych měl nejspíše uvést, na jakých stránkách lze fonty pro naše weby stahovat, nebo z jakých, je lze přímo linkovat, nahrávat. Zde je pár odkazů:

V úvodu článku jsem nastínil problematiku s vyhlazováním písma u různých prohlížečů. V dalším kroku bych rád nastínil srovnání největších z nich. V testu nejlépe dopadly Mozilla Firefox a Internet Explorer, nejhůře pak Google Chrome a Opera. Zde se můžete podívat na srovnání a posoudit sami.

Existují různé pluginy například do Google Chrome, které mají za úkol vyhlazovat text na úrovni Firefoxu i lépe, ale procento uživatelů, jež je využije je mizivé. Spíše bych do budoucna očekával zlepšení renderování textu, přímo od výrobců prohlížečů.

Závěrem bych doplnil, že vlastnost @font-face lze využít i pro jiný účel, než jen pro načtení vlastního stylu písma. Veškeré ikony nebo symboly například v menu lze nahrát na web přes tuto vlastnost a následně je využívat s veškerými jejich vektorovými výhodami. To opět zlepšuje schopnost webu přizpůsobovat se různým rozlišením a velikostem.

Doufám, že jste se při čtení našeho článku něco nového naučili a budete se těšit na další díl o rodině HTML5 příští týden.

Ohodnoťte jako ve škole:

Průměrná známka 2,67

Našli jste v článku chybu?
Zasílat nově přidané názory e-mailem
120na80.cz: Jak si udržet zdravou vaginu

Jak si udržet zdravou vaginu

DigiZone.cz: Šlágr TV: pokuta 100 tisíc za on-line

Šlágr TV: pokuta 100 tisíc za on-line

120na80.cz: Tady se vaří padělané léky

Tady se vaří padělané léky

Vitalia.cz: Dnešní patolog o mrtvolu téměř nezavadí

Dnešní patolog o mrtvolu téměř nezavadí

Vitalia.cz: Tři sta kilogramů tuňáka obsahovalo histamin

Tři sta kilogramů tuňáka obsahovalo histamin

Vitalia.cz: Taky ji kupujete? Je šizená

Taky ji kupujete? Je šizená

Vitalia.cz: Mražené ryby z Makra byly falšované

Mražené ryby z Makra byly falšované

Vitalia.cz: Před, nebo po snídani? Kdy je lepší čistit si zuby

Před, nebo po snídani? Kdy je lepší čistit si zuby

Podnikatel.cz: Když už je sexy, tak ať taky funguje

Když už je sexy, tak ať taky funguje

120na80.cz: 10 dezinfekcí: Vede „starý dobrý“ peroxid

10 dezinfekcí: Vede „starý dobrý“ peroxid

Lupa.cz: Přenos hokeje padal kvůli útoku, tvrdí O2

Přenos hokeje padal kvůli útoku, tvrdí O2

Vitalia.cz: Sója a rakovina

Sója a rakovina

DigiZone.cz: Konec geoblokace online médií?

Konec geoblokace online médií?

120na80.cz: 10 nej přípravků na holení

10 nej přípravků na holení

Podnikatel.cz: Šizený guláš na pultě. Jako Lidl to nedělejte

Šizený guláš na pultě. Jako Lidl to nedělejte

Vitalia.cz: Muži kouří 24 cigaret denně, ženy o dost míň

Muži kouří 24 cigaret denně, ženy o dost míň

DigiZone.cz: UPC umí televizi sedm dní nazpět

UPC umí televizi sedm dní nazpět

Lupa.cz: Schváleno: Rockaway může převzít Heureku

Schváleno: Rockaway může převzít Heureku

Podnikatel.cz: Proměny stavebnice Seva. Znáte ji?

Proměny stavebnice Seva. Znáte ji?

120na80.cz: Zjistěte, zda je vaše klíště infikované

Zjistěte, zda je vaše klíště infikované