Srp
23

Nahrazování fontů na webu metodou cufón

By majlan  //  Skripty, Tipy, Webová tvorba  //  Komentářů: 9

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.

Nahrazování fontů na webu metodou cufón, 7.0 out of 10 based on 1 rating

9 komentářů k “Nahrazování fontů na webu metodou cufón”

  • 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.

    VA:F [1.9.20_1166]
    +0 / -0
    • 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

      VN:F [1.9.20_1166]
      +0 / -0
  • jQuery není nutné, pokud budeš používat HTML 5 tak lze využít např. document.querySelector(‚section.text a’)

    VA:F [1.9.20_1166]
    +1 / -0
    • Vida, díky za tip :-) Moc jsem HTML 5 ještě nezkoumal..

      VN:F [1.9.20_1166]
      +0 / -0
  • 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/

    VA:F [1.9.20_1166]
    +1 / -2
  • 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áš?

    VA:F [1.9.20_1166]
    +0 / -0
    • 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 :-)

      VN:F [1.9.20_1166]
      +0 / -1
      • jj, myslel jsem tady na blogu

        VA:F [1.9.20_1166]
        +0 / -0
  • 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

    VA:F [1.9.20_1166]
    +0 / -0

Vyjádři svůj názor



Zajímá vás cokoliv o mobilních aplikacích? Uvažujete o spolupráci? Kontaktujte mne na seitler@reinto.cz

O mně

Jmenuji se Milan Seitler a jsem spoluzakladatelem společnosti Reinto s.r.o., ve které se věnujeme mobilním i webovým aplikacím a marketingu.

Zabývám se celým procesem tvorby mobilních a webových aplikací. Nejvíce se věnuji návrhu aplikace a UX/UI designu. Kladu velký důraz na jednoduchost a srozumitelnost uživatelského rozhraní.

Zajímám se o online i offline podnikání, fascinují mě úspěšní lidé, kteří se nebojí tvrdé práce. Mou hlavní motivací je konkurence, která mě vždy nutí jít do všeho naplno, protože nerad prohrávám.

Mám rád hudbu, knížky, sport a cestování.

milan@seitler.cz

Odkazy

Inzerujte zde!

Kupte si odkaz! PR 3, SR 2

Inzerujte zde!

Kupte si odkaz! PR 3, SR 2

Inzerujte zde!

Kupte si odkaz! PR 3, SR 2

Partner links