Cufón - nahrazování fontů na webu
Zkrácený návod - překlad z Cufon wiki
Cufon je javascriptový nástroj na nahrazování fontů na webu. Používá k tomu dva soubory, jeden prováděcí, který si stáhnete z webu, a druhý s vytvořenými fonty - ten si vyrobíte přes webové rozhraní z fontu, který máte stažený u sebe v PC.
První javascript, který potřebujete dát do stránek, je cufon-yui.js a stáhněte si ho zde a šoupněte na svůj web.
Vytvořte si javascriptový soubor s fonty pro web pomocí online generátoru:
- Do příslušných okének, podle toho, co budete potřebovat, nahrajte soubor fontů – mohou to být .ttf, .otf, .pdf nebo postscript. Je tam upozornění, že to nejde nahrát z adresáře windows\fonts – musíte si ty fonty na svém PC zkopírovat jinam.
- Zaškrtněte (musíte), že EULA povoluje font embedding. Tohle si musíte zjistit u každého fontu sami. Může se stát, že některý „free“ font nepůjde zpracovat (pak na vás místo výzvy ke stažení vyskočí stránka, kde je vysvětlení, že to autor fontu zakázal a že ho máte kontaktovat).
- Další je volba, co se tam má zahrnout. Nejjednodušší ale nejméně vhodné, protože je to pak moc velké) je All. Standardně je zaškrtnutá Basic latin. Přidejte si případně české znaky v chlívku "and also these". Umí to i samostatný háček a čárku. Výsledný font funguje i pro kódování win-1250 (zkusila jsem)
- V sekci security můžete použití omezit jen na svou doménu, aby je nikdo z vašeho webu nelinkoval.
- Další chlívky je lepší nechat tak, pokud nevíte, co děláte (jako že já ne).
- Zaškrtněte "acknowledge" a klik na tlačítko – měl by se vám nabídnout soubor fontů .js ke stažení.
- Nahrajte soubor s fonty na svůj web.
Jak dostat font na stránku
Příklad je z wiki:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="cufon-yui.js" type="text/javascript"></script>
<script src="Frutiger_LT_Std_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h1');
</script>
</head>
<body>
<h1>This text will be shown in Frutiger LT Std.</h1>
</body>
</html>
Doporučuje se striktní DTD ale co jsem zkoušela, tak to funguje i s trans (problém by mohl být tam, kde jsou odlišnosti v inline/block, v hlavičkách je to fuk)
Všechno podstatné je v <head>: Jako první tam je ten prováděcí javascript cufon-yui.js, potom ten js s fontem.
Potom je tam inline script, který už přímo říká, co se má nahrazovat. Pokud je font jen jeden, není třeba ho specifikovat, stačí určit jen kam s ním.
V tom tomto případě nahrazujeme hlavičku h1: Cufon.replace('h1'). A to je všechno, zbytek udělá cufon podle toho, co máte pro h1 definované v CSS.
Když chcete použít ten samý font pro více prvků, vypadá to takhle:
Cufon.replace('h1')('h2');
V IE je vidět malé zpoždění než se text nahradí, proto je dobré dát těsně před </body> následující kód:
<script type="text/javascript"> Cufon.now(); </script>
Když potřebujete víc nahrazovacích fontů, musíte pak určit, který kam patří:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="cufon-yui.js" type="text/javascript"></script>
<script src="Frutiger_LT_Std_400.font.js" type="text/javascript"></script>
<script src="Myriad_Pro_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h1', { fontFamily: 'Frutiger LT Std' });
Cufon.replace('h2', { fontFamily: 'Myriad Pro' });
</script>
</head>
<body>
<h1>This text will be shown in Frutiger LT Std.</h1>
<h2>This text will be shown in Myriad Pro.</h2>
</body>
</html>
Všimněte si změny v cufon.replace. Pokud se neuvede nic, použije se poslední font (v tomto případě by to byl Myriad)
Pozn: cufon normálně umí jen názvy tagů jako h1 ale spolupracuje s některými js frameworky, a pokud je umístíte před něho, pak budou fungovat i věci jako:
Cufon.replace('#content > h1:first-child') nebo Cufon.replace('#nav a')
Prohlížeče
Podporuje moderní prohlížečeProblémy se styly
Většinou nejsou ale:
- Velikost fontu se může o pixel lišit, pokud vám to vadí, specifikujte velikost fontu v px. IE prý nezná definice jako “larger” nebo “xx-small”
- Italic a bold pro tagy em, strong, i, b je v různých prohlížečích definováno různě, pokud chcete , aby se to použilo dobře, specifikujte to přímo:
em, i {font-style: italic;}
strong, b { font-weight: bold;} - Výška řádku. Jestli je font vysoký přes několik řádků, musíte specifikovat ine-height. Prý by to mohlo dělat problémy v non-strict dokumentu.
- Word-spacing a text-shadow nefunguje.
- :hover se musí specifikovat, např:
Defaultně se uplatní jen na odkazy, dá se to upravi i pro jiné elementy, viz článek doleCufon.replace('h1', {hover: true });Známé bugy:
- V IE hover nad odkazy občas bliká, řešení je prý zde
- Text:align justify funguje jako left (nebude opraveno)
- Line-height u non-strict dokumentů se možná chová divně (nebude opraveno)
- Bude opraveno:
- Text-decoration pro IE
- Word-spacing
- Výběr textu – není vidět, že je text vybraný (neoznačí se) ale zkopíruje se.
Další zajímavosti
Jestli jste uvažovali i o typeface.js (dělá něco podobného), podívejte se na jejich srovnání v článku Cufón vs. Typeface.js, which one is better?. zatím mi z toho lépe vychází cufon, hlavně proto, že typeface.js prý nepodporuje IE8, ale typeface.js má asi lepší způsob nahrazování elementů pomocí class ...
Update: Cameron Moll vyzkoušel cufón poměrně důkladně a celé to popsal v článku Exploring Cufón, a sIFR alternative for font embedding, jsou tam i příklady, jak to vypadá při nahrazování. Podívejte se i na stránku unit quality, kde sleduje vliv hustoty na kvalitu fontů (v generátoru v sekci "Performance .." je to políčko "Scale the font to the following size"). Podle té testovací stránky se mi zdá, že předdefinovaná hodnota 360 je postačující, nižší než 200 se nedoporučuje. (via)
Update2: Na net tuts je taky článek The Easiest Way to Use Any Font You Wish, který zhruba popisuje totéž, co jste už četli ale přidává návod, jak v Cufon použít i jiné CSS prvky než jen ty základní:
- Pokud nemáte žádný CSS framework, použijte DOM. např chcete udělat nahrazení jen pro hlavičku, která se nachází v sekci header
Cufon.replace(document.getElementById('header').getElementsByTagName('h1')); - Pokud používáte jQuery, pak to může vypadat takto:
Do<head>: přidejte před cufon odkaz na jQuery<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
a definice pro hlavičku v sekci header pak bude:Cufon.replace('#header h1');
Jiné metody nahrazování písma na webu
Jsou popsané ve starších článcích:
- přehledový článek Web - metody nahrazování standardních fontů
- přeložený návod na sIFR3 Jak snadno dostat sIFR na stránky
6 Komentářů
Přidat komentář
Předchozí články
14.05.2012 A tečka ... zatím30.08.2011 Diablo 3 - nový web a resources
24.08.2011 Teplo, dědečku, teplo ... a v létě, kdo by to tušil
18.08.2011 Diablo 3 - inferno
17.08.2011 Diablo 3 - článek o skillech na diablo.incgamers
16.08.2011 Diablo 3 - durability, gamescon, a nic se neděje
11.08.2011 Diablo3 - bashiokonoviny a odkaz na judgehype
08.08.2011 Diablo 3 - přehled tisku
02.08.2011 Diablo 3 - Bashiok obhajuje zrušení skill bodů
01.08.2011 Diablo 3 - Hromada nových informací o hře a beta testu
Dál už to nevede, ale můžete se vrátit nahoru nebo proslídit archiv blogu nebo nakouknout do ďábelského fora nebo na odkazy. Kontakt: sue@centrum.cz
V cufon i typeface se nahrazený text sice viditelně neoznačí ale zkopíruje se
ten php script na některé fonty chce imagemagick a to třeba na mém hostingu není
Použil na nich Cufón a musím říct, že to vypadá hezky (tedy změnil jsem názor :-) ). Jen to zvýrazňování textu mě štve. Ono ho to vybere, ale někdy ho to zvýrazní a někdy ne ...
.cufon-loading h1 { / pro Cufon.replace('h1') / visibility: hidden !important; }
Prepisovanemu h1 priradit css tridu cufon-loading a tu pak v css definovat tak, jak je napsana vyse.