Hlavní navigace

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.

Našli jste v článku chybu?

16. 10. 2012 17:24

Franta (neregistrovaný)

Tohle je bohužel dneska normální, že si HTML5 a různí pošuci snaží přivlastnit zásluhy na kde čem -- a že to existovalo roky před HTML5, jim jaksi nevadí :-)

Root.cz: Vypadl Google a rozbilo se toho hodně

Vypadl Google a rozbilo se toho hodně

Podnikatel.cz: Přehledná titulka, průvodci, responzivita

Přehledná titulka, průvodci, responzivita

DigiZone.cz: Česká televize mění schéma ČT :D

Česká televize mění schéma ČT :D

Lupa.cz: Slevové šílenství je tu. Kde nakoupit na Black Friday?

Slevové šílenství je tu. Kde nakoupit na Black Friday?

Podnikatel.cz: K EET. Štamgast už peníze na stole nenechá

K EET. Štamgast už peníze na stole nenechá

Lupa.cz: UX přestává pro firmy být magie

UX přestává pro firmy být magie

Měšec.cz: Kdy vám stát dá na stěhování 50 000 Kč?

Kdy vám stát dá na stěhování 50 000 Kč?

Měšec.cz: Zdravotní a sociální pojištění 2017: Připlatíte

Zdravotní a sociální pojištění 2017: Připlatíte

Podnikatel.cz: Víme první výsledky doby odezvy #EET

Víme první výsledky doby odezvy #EET

Vitalia.cz: Láska na vozíku: Přitažliví jsme pro tzv. pečovatelky

Láska na vozíku: Přitažliví jsme pro tzv. pečovatelky

Měšec.cz: Finančním poradcům hrozí vracení provizí

Finančním poradcům hrozí vracení provizí

DigiZone.cz: Recenze Westworld: zavraždit a...

Recenze Westworld: zavraždit a...

DigiZone.cz: Sony KD-55XD8005 s Android 6.0

Sony KD-55XD8005 s Android 6.0

Vitalia.cz: Jsou čajové sáčky toxické?

Jsou čajové sáčky toxické?

Vitalia.cz: Baletky propagují zdravotní superpostel

Baletky propagují zdravotní superpostel

Podnikatel.cz: Prodává přes internet. Kdy platí zdravotko?

Prodává přes internet. Kdy platí zdravotko?

Podnikatel.cz: 1. den EET? Problémy s pokladnami

1. den EET? Problémy s pokladnami

Vitalia.cz: Paštiky plné masa ho zatím neuživí

Paštiky plné masa ho zatím neuživí

Lupa.cz: Babiš: E-shopů se EET možná nebude týkat

Babiš: E-shopů se EET možná nebude týkat

120na80.cz: Pánové, pečujte o svoje přirození a prostatu

Pánové, pečujte o svoje přirození a prostatu