Pro zkušenější webdesignéry a CSS kodéry nebude tento článek asi ničím převratným, myslím si však, že spousta vás o možnosti použití vlastního písma na webové stránce neví. Nutnost pracovat jen s omezenou nabídkou standardních písem je totiž při návrhu webu docela svazující. Použití vlastních písem na webu je přitom docela snadné.
Důvod k tomu, že se doposud použití libovolného písma na webové stránce nerozšířilo, je nekompatibilita potřebné technologie se staršími webovými prohlížeči a v některých případech nutnost konverze souborů s fontem do jiného typu. Bez zajímavosti nejsou ani licenční problémy, ty však teď ponechejme stranou.
Jak na vlastní písmo na webu
Pouštíte-li se do kódování grafického návrhu a potřebujete nebo chcete implementovat netradiční font přímo do webové stránky, pak byste měli vědět, že tento požadavek je možné řešit pomocí zápisu @font-face, který je k dispozici od doby vzniku CSS2. Problém je v tom, že ne všechny prohlížeče podporují stejný typ souboru s písmem.
- Opera 10+, Safari 3.1+ a Chrome 4+ podporují formáty TTF, OTF a SVG
- Internet Explorer podporuje formát EOT
Z toho vyplývá, že je potřeba dvojího zápisu a konverze fontu tak, abyste jej mohli použít ve všech vyjmenovaných prohlížečích. Nejprve obecný zápis v CSS, který umožňuje použití vybraného fontu na webové stránce i v případě, že jej uživatel nemá v počítači:
@font-face { font-family: VasePismo; src: url(relativni-cesta/VasePismo.otf); }
Všimněte si, že nejprve je v zápisu definován název tohoto písma, následuje uvedení relativní cesty ke zdrojovému souboru s tímto písmem.
Budete-li chtít použít tuto techniku zároveň pro Internet Explorer s fontem ve formátu EOT, pak v hlavičce HTML kódu na místě, kde připojujete styly, uveďte něco podobného:
<!--[if IE]> <link type="text/css" rel="stylesheet" media="all" href="ie-styles.css" /> <![endif]-->
Jelikož se jedná díky značce <!-- o HTML poznámku, nebudou ji ostatní prohlížeče s výjimkou Internet Exploreru interpretovat. Ten však pozná, že se v poznámce požaduje načtení dalšího souboru se stylem. Do něj pak vložíte výše uvedený zápis @font-face s malou modifikací - odkážete v něm na soubor EOT.
Dále pak v CSS postupujete již klasicky. Nastavíte typ písma pomocí volání font-family, například takto pro odstavec:
p{ font-family: VasePismo, arial; font-size: 12px; }
Kromě licenčních problémů nyní musíte vyřešit vytvoření souboru EOT. Častěji totiž budete mít k dispozici soubor s písmem jen jako TrueType, TTF. Stáhněte si proto malý nástroj, který potřebnou konverzi obstará - jmenuje se ttf2oet.
A to je vše. Nyní byste měli být schopni bez problémů používat vlastní font na webové stránce. Pokud vás problematika zajímá, doporučuji navštívit web www.font-face.com.
Tvůrce webů z Brna se specializací na Drupal, WordPress a Symfony. Acquia Certified Developer & Site Builder. Autor několika knih o Drupalu.
Web Development Director v Lesensky.cz. Ve volných chvílích podnikám výlety na souši i po vodě. Více se dozvíte na polzer.cz a mém LinkedIn profilu.
Podobné články
Komentáře k článku
Díky, jen mám dotaz - jak zařídit, když potřebuji importovat 3 soubory písma - jeden normální, jeden pro tučné a další pro kurzívu?
Funguje mi to pouze pro jeden soubor s písmem, kdy se sice font použije, ale tam kde je <strong> resp. <em> se bohužel tučný, resp. kurzívou neudělá.
Díky za radu
Google generuje pro stejné písmo v různých tloušťkách a kurzívě takovéto CSS, viz http://fonts.googleapis.com/css?family=Droid+Serif:regular,italic,bold,b...
Dobrý den, měl bych k tomuto tématu jeden dotaz.
Aby tyto vychytávka fungovala v drupalu, vložil jsem
@font-face {
font-family: VasePismo;
src: url(relativni-cesta/VasePismo.otf);
}
do style.css, nakopíroval soubor s písmem na server. Pro FF, Chrome, pohoda. Zobrazuje se mé písmo. Poté jsem chtěl aby se písmo zobrazovalo i v IE. Dodal jsem tedy @font-face {
font-family: VasePismo;
src: url(relativni-cesta/VasePismo.eot);
}
do style.ie6.css ... V IE 6 se zobrazuje mé písmo.No, poslední otevřu IE 8, písmo Ariel... Pokusím se tedy IE 8 obejít následovně.
Do page.tpl.php vložím<!--[if IE 8]><link rel="stylesheet" href="<?php echo $base_path . $directory; ?>/style.ie8.css" type="text/css" /><![endif]-->zároveň s tím vytvořím style.ie8.css které je úplně stejné jako style.css až na to že pro IE je v css uvedeno písmo v .eot...
Bohužel, IE 8 stále ukazuje Ariel a né mnou požadovný font. Zkoušel jsem do page.tpl.php vložit i vámo udanou podmínku a stejně to explorer nereflektoval? Něměl byste nějakou radu jak dál, nebo radu kde dělám co špatně?
Děkuji velice za pomoc,
s Pozdravem Michal Ps.: Zlatý FF :-)
Dobrý den.
Ve stylu pro IE nemusí být komplet vše, stačí tam jen ty pravidla s fontem, která chcete mít jinak, než ve výchozích stylech.
Co se problému týče, vložil jste tu podmínku pro IE8 až po připojení style.css?
No ono v page.tpl.php jsou již nějaké podmínky pro IE vytvořeny, takže jsem jednu upravil a vložil za ně. Vypadá to vlastně následovně:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="<?php echo get_page_language($language); ?>" xml:lang="<?php echo get_page_language($language); ?>">
<head>
<title><?php if (isset($head_title )) { echo $head_title; } ?></title>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<?php echo $head; ?>
<?php echo $styles ?>
<?php echo $scripts ?><? $drupal = ''; include "drupal.php"; ?>
<!--[if IE 6]><link rel="stylesheet" href="<?php echo $base_path . $directory; ?>/style.ie6.css" type="text/css" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" href="<?php echo $base_path . $directory; ?>/style.ie7.css" type="text/css" media="screen" /><![endif]-->
Poté jsem vložil mou, upravenou podmínku:
<!--[if IE 8]><link rel="stylesheet" href="<?php echo $base_path . $directory; ?>/style.ie8.css" type="text/css" /><![endif]-->
Já myslím, že příčina je v následujícím, které prohlížeči říká, aby stránku zobrazil v kompatibilním režimu jako IE7. Čili jako osmička se to asi ani nezobrazí, proto se vám ty styly pak neuplatňují.
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
JJ, už je to v cajku... content="IE=EmulateIE8 a písmo je na světě... velice děkuji českému guru drupalistovi :-) ... asi školácká chyba, že? Ale tak snad se bude hodit i někomu dalšímu.
Školácká chyba asi ne... Prostě se stane. Já se dneska taky mořil čtyři hodiny s jednou prkotinou.
Nebo se dá použít Cufon. Existuje i modul pro drupal, vygenerujete patřičnej soubor s fontem a zadáte jaký prvky ho maj používat, např. h2 atd. http://drupal.org/project/cufon
Odvolávám. Font face je lepší. I když Cufon někdy vykresluje tučně písmo "hezčeji". Pro font-face používám http://drupal.org/project/fontyourface kterej mi vyřešil problém(y) s IE.
Ahoj, a co když mám pomalé připojení, třeba mobilní přes GPRS, které jede pár kilobajtů.
Nejdřív se mi stáhne stránka, texty se vykreslí, ale v defaultním fontu, pak se dotáhnout font-face fonty a teprve pak se vykreslí na těch písmech, které ale už jsou zobrazené v arialu. VELMI NEHEZKÉ, jenom kvuli tomuto nechci použít vlastní fonty. třeba např. tím jak se ty fonty změněj, tak se i některé řádky jinak zalomí, protože nahranej font je třeba uplně jinej, má jiný rozměry.
prosím pomozte. Buď nějak vykreslit stránku až po načtení písem, nebo přednačíst písma, ale to je vlastně to samí.
A další věc: na každé sekci webové stránky se děje to samé! Kdyby se to dělo aspon na úvodní a pak se používaly tyto nahrané po celém webu(ale to snad dokáži vyřešit)
Totiž chtěl bych to tak, jak to má třeba wordpress, má vlastní písma, ale toto se neděje.
Děkuji za jakýkoliv názor, odpověď.
S pozdravem JD
Optimalizovat stránky pro někoho kdo na stránky chodí přes GPRS se ve většině případů finančně nevyplatí. Kolik lidí s timhle připojením si bude dneska prohlížet web? Asi ještě menší procento než uživatelů používajících IE6.
Dobrý den,
chtěl bych se zeptat, kde hledat nedostatek, pokud je stránka zobrazena na jednom PC jinak, než na jiných. V praxi se jedná o jeden PC z osmi, který interpretuje stránku jinak, a to jak v IE tak v Chrome. Onou interpretací myslím to, že font na daném elementu stránky je zobrazen chybně, než na těch ostatních.
.
.
.
- Jedná se tedy o chybu webu nebo o chybu klienta?
- I kdyby se jednalo o chybu klienta, pomohla by změna načítání fontu ne defaultně, tak jak je, ale ze serveru, tedy vlastního fontu?
- Za typografickou interpretaci webu je odpovědný OS + prohlížeč, nebo samotná stránka?
.
.
- Jaké byste prosím navrhl řešení?
Těžko říci. Nejpravděpodobnější bych viděl problém v tom, že je použit formát písma, který IE neumí. Viz https://medium.com/minitheory-design/font-support-on-internet-explorer-w...
Vykreslení je záležitostí především prohlížeče a pak OS. Jinak vypadá písmo v různých prohlížečích na stejném systému, jinak ve stejných prohlížečích v různých systémech. Třeba macOS má podle mého názoru hezčí vyhlazování písma, než Windows.
Díky za článek,
jenom doplním, že název písma musí být zadán přesně tak, jak je nadefinován ve zdroji písma. Nelze si tedy název písma zjednodušit nebo změnit, pak to zkousne jenom Opera, FF ani IE ne.