23
Nahrazování fontů na webu metodou cufón
Existuje několik způsobů, jak se vypořádat s nutností použítí fontu, který není určen pro běžné použití na webu. Máme tu například Google Web Fonts, použití obyčejného obrázku a vlastnosti ALT nebo několik speciálních metod. Blíže se podíváme na jednu z nich a to cufón.
Použijeme font Champagne & Limouines, který je zdarma, obsahuje i české znaky a navíc je definován i pro různé řezy písma. Začneme nejprve HTML kostrou testovací stránky:
index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Cufón test</title> <link rel="stylesheet" type="text/css" href="style.css" /> <script language="javascript" src="jquery.js" type="text/javascript"></script> <script language="javascript" src="cufon-yui.js" type="text/javascript"></script> <script language="javascript" src="mujfont.font.js" type="text/javascript"></script> <script language="javascript" src="skript.js" type="text/javascript"></script> </head> <body> <h1>Normální nadpis</h1> <h2>Tučný nadpis</h2> <h3>Nadpis italikou</h3> <h4>Tučná italika</h4> <section class="text">Toto je text s <a href="#">odkazem</a>.</section> </body> </html> |
Nic složitého, jde o HTML5, což značí například zjednodušená hlavička DOCTYPE či tag SECTION. V hlavičce si natáhneme soubor s CSS a potřebné skripty (včetně jQuery, důvod vysvětlím později), v těle stránky vidíme několik ukázkových nadpisů a krátký text s odkazem. Teď si to trochu připravíme pro použití cufón.
style.css
1 2 3 4 5 6 7 8 9 10 11 | h1, h2, h3, h4, section, a { font-family: mujfont, sans-serif; } h1 { font-weight: normal; } h2 { font-weight: bold; } h3 { font-style: italic; font-weight: normal; } h4 { font-style: italic; font-weight: bold; } a { color: #ff0000; } a:hover { color: #00ff00; } |
Nejprve nastavíme písmo na mujfont. Proč mujfont? Protože takto si pro své potřeby pojmenujeme písmo, které použijeme. Dále si všimněte nastavení jednotlivých nadpisů, nastavíme je podle jejich textu, tučný nadpis tedy opravdu bude tučný atd. Nezapomeneme taky na odkaz, který se nám po najetí myši zbarví dozelena.
Teď přichází ten hlavní krok a tím je použití cufón. Nejprve si stáhneme samotnou knihovnu, kterou najdeme zde. Dalším krokem je vygenerování .js souboru pro naše písmo. Stáhneme tedy font, rozbalíme jej někam do složky a přejdeme na cufón generátor. Nejprve je nutné nahrát jednotlivé řezy písma, tedy normální, tučné, italiku a tučnou italiku. Povinné je pouze normální písmo, ale záměrně jsem použil font, kde máme na výběr i ostatní možnosti. V dalším políčku vyplníme náš vlastní název mujfont, zaškrtneme políčko o EULA a pokračujeme dál. Nyní si musíme vybrat, co vše má náš font umět zobrazit. Abychom mohli použít české znaky, čísla a nějakou interpunkci, vybereme možnosti Basic Latin, Latin-1 Supplement a Latin Extended-A. To je vše, zbývá ještě úplně dole souhlasit s podmínkami použití této služby a odeslat formulář. Ten nám vrátí .js soubor, který si stáheneme a spolu s knihovnou cufón umístíme do složky k index.html. Soubory si můžete pojmenovat podle svého, já jsem použil názvy cufon-yui.js a mujfont.font.js. Dále budeme potřebovat knihovnu jQuery, kterou stáhneme tady. Také ji přemístíme do složky k ostatním souborům a jako poslední krok vytvoříme soubor skript.js s tímto obsahem:
skript.js
1 2 3 4 | $(document).ready(function() { Cufon.replace("section.text a", { hover: true }); Cufon.replace("h1, h2, h3, h4, section, a"); }); |
Proč vlastně používáme jQuery? Pokud bychom použili čistý javascript, cufón by nám umožnil pouze výběr podle html tagů. Díky jQuery však funguje i selektor section.text nebo například #kontakt form.submit input.text a další. Jak vidíte, nahrazení textu provádí funkce Cufon.replace, ve které uvedeme všechny prvky, pro které chceme nahrazení provést. Všimněte si, že provádíme dvě nahrazení. Kromě samozřejmého nahrazení nadpisů a textu musíme také nahradit odkazy samostatně s parametrem { hover: true }. Toto volání musí předcházet obecnému nahrazení odkazů, v opačném pořadí by nám to nefungovalo. Teď už je vše hotovo a můžete si prohlédnout výsledek.
» Výsledek nahrazení
» Soubory ke stažení
A to je vše! Když si otevřete zdrojový kód v prohlížeči, uvidíte tam běžný text. Nevýhodou cufón je fakt, že takový text ovšem nelze označit a zkopírovat…Pokud by vám něco nefungovalo nebo máte s použitím cufón jiný problém, pište do komentářů.
EDIT 24.8: Tip od Vojty: v případě HTML5 není nutné použít jQuery, lze použít document.querySelector(‚…’). Více zde.
Čti dál:
9 komentářů k “Nahrazování fontů na webu metodou cufón”
Odpověď na majlan
Zajímá vás cokoliv o mobilních aplikacích? Uvažujete o spolupráci? Kontaktujte mne na seitler@reinto.cz
O mně
kategorie
SSME FI MUNI
FIT VUT
Odkazy
Kupte si odkaz! PR 3, SR 2
Kupte si odkaz! PR 3, SR 2
Kupte si odkaz! PR 3, SR 2
TAGS
Nejčtenější články
- 7 tipů Jak spát méně a efektivněji - 150 189 views
- První semestr na FIT VUT - 45 376 views
- TEST: Kolik spánku je denně potřeba? - 39 551 views
- Čtvrtý semestr na FIT VUT - 33 636 views
- Třetí semestr na FIT VUT - 33 485 views
- Jak v PHP nahradit zastaralé funkce ereg a eregi - 29 688 views
- Trend: poplatky za osobní odběr zboží. Bude hůř? - 28 372 views
- Druhý semestr na FIT VUT - 26 470 views
- Bakalářské studium na FIT VUT - 25 471 views
- Co by měla obsahovat HTML hlavička? - 24 815 views
Nejnovější komentáře
- 5 nových tipů pro lepší spánek « Milan Seitler u 7 tipů Jak spát méně a efektivněji
- 5 nových tipů pro lepší spánek « Milan Seitler u TEST: Je možné spát 6 hodin denně? Tak určitě!
- David u 9 nečekaně jednoduchých technik, které z vás udělají mistra komunikace
- Petr u Bakalářské studium na FIT VUT
- Martin u Jak v PHP nahradit zastaralé funkce ereg a eregi
archiv
- Prosinec 2018
- Listopad 2015
- Září 2015
- Březen 2015
- Květen 2014
- Duben 2014
- Prosinec 2013
- Listopad 2013
- Červenec 2013
- Červen 2013
- Duben 2013
- Březen 2013
- Únor 2013
- Leden 2013
- Prosinec 2012
- Listopad 2012
- Říjen 2012
- Září 2012
- Srpen 2012
- Červenec 2012
- Červen 2012
- Květen 2012
- Březen 2012
- Únor 2012
- Leden 2012
- Listopad 2011
- Říjen 2011
- Srpen 2011
- Červen 2011
- Duben 2011
- Únor 2011
- Leden 2011
Moc tomuhle nefandím, právě proto že když na to někde narazím, tak jsem akorát vždycky naštvanej že to nejde zkopírovat. Navíc si nedovedu představit situaci, kdy bych tak nutně potřeboval použít takovýto exotický font.
Proto se to taky nehodí pro velké úseky textu. Já jsem to například řešil u webu pro svoji firmu, kde jsem to chtěl zachovat jako text a přitom jsem to nechtěl měnit za něco web-safe
jQuery není nutné, pokud budeš používat HTML 5 tak lze využít např. document.querySelector(‚section.text a’)
Vida, díky za tip :-) Moc jsem HTML 5 ještě nezkoumal..
Já měl vždy za to že HTML 5 je podobné jako HTML které znám již spoustu let… spletl jsem se, díky za tyhle informace!!
http://financni-poradce-cenik.cz/
Díky za nový tip…zatím jsem používal jen Google fonty.
Přidám dva zvídavé dotazy:
1. proč nejde nahrazený text označit? je to tím, že je to nahrazení „reálného obsahu“?
2. jaký zvýrazňovač syntaxe používáš?
1. Text sice označit nejde, ale vyhledávače to vidí jako běžný text. Našel jsem ale tohle:
cufon {
-webkit-user-select: text;
-moz-user-select: text;
}
mohlo by to pomoct s označením textu, ale nezkoušel jsem to..
2. Myslíš tady na blogu? Používám WP-syntax :-)
jj, myslel jsem tady na blogu
Mám tři cufon fonty, které nepodporují české znaky. Byl by někdo tak hodný a dané fonty rozšířil o české znaky?
Děkuji
Zoner