Jak správně používat jakýkoliv font na webu?

13.10.2009 09:02 | Přečteno: 3151× | Ostatní | | poslední úprava: 13.10.2009 09:03

Někteří lidé vytvářejí svoje webové stránky pro zábavu, prezentace sebe, svých projektů, svých koníčků apod. K tomu však nevyužívají zdarma dostupné služby, ale jsou tak odvážní, že si svoje jednoduché webové stránky vytvoří sami - ať již pomocí WYSIWYG editoru, nebo jen prostého editoru textu. Kolikrát se ale stane, že na svém webu, a zejména s velkým nadšením, použijí font, který mají v počítači oni a jen několik málo vyvolených - je-li font součástí nějakého balíku či aplikace. Autorovi se web líbí, vypadá skvěle, vše funguje. Když se na prezentaci ale podívá někdo jiný, nemusí vždy vidět to, co sám autor očekává. Font prostě chybí, a je nahrazen.

Existuje totiž uzavřená množina "bezpečných" a správných fontů, resp. skupin/rodin (font-family), které by se měly pro webové prezentace používat. Nejsmutnější je, že výše uvedenou chybu kolikrát udělají i lidé, kteří vývoj webů dělají již nějaký ten pátek.

Řešení pro jiné fonty je několik. První, nejjednodušší, takové fonty nepoužívat A pak už jsou jen tzv. další řešení (siFR, rendering do obrázku, apod.). Nejlepší a nejjednodušší, co se mého pohledu na věc týče, je cufón. Ten nahrazuje text, který má být vypsán specifickým fontem pomocí JavaScriptu. Postup nahrazení je patrný z obrázku a popisu. Pokud je JavaScript v prohlížeči vypnut, je text vypsán původním fontem - nedojde ke změně. Jedinou nevýhodou je to, že text se velmi špatně označuje pro uložení do schránky (pokud vybereme na webu vše a zkopírujeme do schránky, tak se texty nahrazené cufónem objeví, ale samotný text lze označit velmi ztěžka).

Postup

1. na webu http://cufon.shoqolate.com/generate/ si stáhneme pod odkazem Download soubor cufon-yui.js
2. na webu stejném webu si vygenerujeme JS soubor, který bude obsahovat námi požadovaný font - na tomto webu lze nastavit různé možnosti generování, např. které znaky se mají zahrnout apod.; to velice doporučuji projít, protože správnou volbou minimalizujeme cílový soubor s fontem a tím urychlíme stažení ke klientovi a zpracování
3. pokud máme vygenerovaný font, uložíme na disk - nyní máme dva soubory, soubor cufon-yui.js a soubor s fontem, např. TerribleFont_100.font.js
4. do hlavičky webové stránky vložíme
   • <script type="text/javascript" src="cufon-yui.js"></script>
   • <script type="text/javascript" src="TerribleFont_100.font.js"></script>
5. a pak už nám stačí zavolat konstruktor cufónu, např. na elementy h1 - Cufon.replace('h1');
   • opět aby nebylo vše jednoduché, MSIE nepracuje optimálně, je třeba za replace ještě přidat Cufon.now();
6. osobně volám cufón v jQuery, tedy:

   $(document).ready(function() {
     Cufon.replace('#main-head h1');
   })

A to je v podstatě vše. Jako malá zmínka o řešení to myslím stačí, koho zaujme, tak pomocí Google dohledá další informace.

       

Komentáře

[dexík]

dobry, mozna si se ale mohl vic rozepsat o tom, ze to prvni reseni je mnohem lepsi

[Toman]

To jsem mohl, ale nevím co bych tam psal... možná něco ve stylu: "Je to lepší, je to lepší, je to lepší" Tak je pravda, že někdy je prostě potřeba použít nějaký, pro web nestandardní, font, a toto mi přijde jako dobré řešení. sIFR totiž používá kombinaci Flashe a JS, a to už je moc - velká závislost. Jedno bude vypnuté a nebude to fungovat. Cufón potřebuje jen JS, takže mi přijde v tomto ohledu lepší.

[R]

Aha, takze uz ani text nebudeme mat na webe ako text?

[l4m4]

Text, který není ve Flashi, jakoby ani nebyl... Čekám, který browser první odstraní tlačítka back a forward, protože na příliš mnoho webech způsobují totální roserání a chybové hlášky...

[Kvakor]

To jde už teď - v Javascriptu jde u nového okna ovlivnit to, co se v něm objeví (tlačítka, scrollbary, stavová řádka ...), tedy pokud to prohlížeč sám dovolí. Viděl jsem už několik webů, kde byly v nových oknech schované jak tlačítka, tak stavová řádka, protože tvůrce stránek chtěl nejspíš obejít právě tento druh problému. Dokonce jsem viděl jednu intranetovou webovou aplikaci, co běžela standardně ve fullscreenu, což prý podle místního IŤáka mělo zabránit nejen problémům s tlačítky Zpět/Vpřed, ale hlavně omezit hraní Solitéru

[xkucf03]

Vždyť text tam pořád je, v tom HTML, obrázek se vyrobí až následně. Z hlediska SEO by to nemělo mít vliv. Problém vidím spíš v autorských právech na fonty – chce to používat svobodné.

[Toman]

Ano, přesně tak - toto řešení je z hlediska SEO úplně v pořádku. O autorských právech musí rozhodnout tvůrce webu, zda-li má licenci (právo k užití) na použité fonty.

[Filip Jirsák]

z hlediska SEO zaměřeného jen na vyhledávače možná ano, z hlediska SEO zaměřeného na použitelnost to moc v pořádku není – ten text nepůjde zkopírovat do schránky, různá netypická zařízení (mobil, hlasová čtečka) to také nemusí vyhodnotit správně.

[xkucf03]

Na co jiného než na vyhledávače by mělo být SEO zaměřené?

[Filip Jirsák]

SEO je zaměřené obecně na použitelnost webu. To „S“ v názvu je jen pro zmatení nepřítele

[Fluttershy, yay!]

Search Engine Optimization... optimalizace pro vyhledávače... nebo optimalizace pro motory?

[Filip Jirsák]

To je ale název, ne obsah toho pojmu. Počítač také dnes nepoužíváme jenom k počítání, ač by tomu název napovídal. Optimalizace pro vyhledávače je až vedlejším efektem toho opravdového SEO.

[Fluttershy, yay!]

Počítače vlastně vůbec nepočítají... co tam teda ksakru dělají s těmi číslíčky?!

[Fluttershy, yay!]

Nějak to tam nevidím...

Search engine optimization (SEO) is the process of improving the volume or quality of traffic to a web site from search engines via "natural" or un-paid ("organic" or "algorithmic") search results as opposed to search engine marketing (SEM) which deals with paid inclusion. Typically, the earlier (or higher) a site appears in the search results list, the more visitors it will receive from the search engine. SEO may target different kinds of search, including image search, local search, video search and industry-specific vertical search engines. This gives a web site web presence.

Použitelnost je AFAIK něco jiného.

[Filip Jirsák]

Marek Prokop: SEO není optimalizace pro vyhledávače – autor je „trochu“ lepší zdroj informací o skutečném SEO, než Wikipedie.

[xkucf03]

Autor potřebuje předně prodat svoji práci – proto musí říct, že dělá „něco víc“ než jiní podomní obchodníci se SEO (kteří si pod tím pojmem představují hlavně využití linkfarem a jiné „černé“ techniky).

S tím, že uživatel musí nejprve mít o informaci, kterou máme na svém webu, zájem, souhlasím – tohle je na webu asi to nejdůležitější – je to vlastně samotná podstata kvalitního a navštěvovaného webu.

Ale nemíchal bych tyhle dvě věci dohromady – prostě bych tvorbu kvalitního obsahu neschovával za pojem SEO. Jenže z marketingového hlediska asi webová firma zákazníkům líp prodá „SEO optimalizaci“ (v době, kdy tenhle pojem byl v kurzu/novinka, to platilo dvojnásob) než nějaké obyčejné „poradíme vám s vašim webem, co tam jako máte psát a kdesi cosi“.

[Filip Jirsák]

Ovšem SEO bez tvorby kvalitního a použitelného obsahu není nic. Vyhledávače se dlouhodobě snaží preferovat právě kvalitní obsah, takže jediná šance, jak dlouhodobě ve vyhledávačích uspět, je právě kvalitní obsah. Cokoli jiného, co využívá nějakých slabin vyhledávače, je už v době vzniku zastaralé a nejspíš přestane brzy fungovat.

[xkucf03]

Podvádět se samozřejmě nevyplácí, je to krátkozraké. A taky je fakt, že snahou vyhledávačů je najít uživateli to, co hledá, a tímhle směrem se vyvíjejí – takže je potřeba dávat na web to, co lidé chtějí (pokud chceme návštěvnost). Ale: vyhledávač nikdy nepozná, jestli ten článek, co jsme napsali, je kvalitní nebo pravdivý, nerozumí obsahu. Je tu prostě oblast mezi tvorbou kvalitního obsahu a podváděním – a to je právě to SEO. Nemusíš podvádět, chce to jen jít tomu štěstíčku trochu naproti Třeba dávat stránkám výstižné titulky nebo vhodně používat nadpisy, nepsat příliš dlouhé stránky, dělit je na logické celky a propojovat pomocí odkazů, protože je lepší několik stránek zaměřených na konkrétní témata, než jedna kilometr dlouhá, kde je naplácáno několik témat dohromady. A tohle nemá s tvorbou kvalitního obsahu (psaní kvalitního textu) nic společného, to je SEO

[Filip Jirsák]

Třeba dávat stránkám výstižné titulky nebo vhodně používat nadpisy, nepsat příliš dlouhé stránky, dělit je na logické celky a propojovat pomocí odkazů, protože je lepší několik stránek zaměřených na konkrétní témata, než jedna kilometr dlouhá, kde je naplácáno několik témat dohromady. A tohle nemá s tvorbou kvalitního obsahu (psaní kvalitního textu) nic společného, to je SEO

Podle mne je tohle právě součást kvalitního obsahu. To, co zmiňuješ, se líbí vyhledávačům právě proto, že se to líbí i lidem.

[hikikomori82]

Nepodporuje FF3.5 nahodou uz pouzivanie stiahnutelnych fontov?

[hikikomori82]

<p style="font-size: 200%; font-family: osifont; src: url('http://osifont.googlecode.com/files/osifont-2009-10-01.ttf')">Kŕdeľ ďatľov učí koňa žrať kôru</p>

[stativ]

To je skoro stejný průser. Jak je na tom FF ale donedávna to pořádně uměla jen Opera. Takže procento lidí, kterým to nebude fungovat pořádně opět není zanedbatelné.

[Fluttershy, yay!]

FF (3.5) i Opera (10?) to umí v pohodě; MSIE snad už od verze 4.0, ale jen s některými fonty.

[Toman]

No právě, jen s některými fonty - a to není univerzální řešení...

[Fluttershy, yay!]

Raději s některými fonty, než aby se tropily sračky tohoto kalibru.

[Toman]

Takže ještě jednou - když klient prostě nějaký font vyžaduje, a považuje to za klíčový požadavek, tak není na výběr!!

[Fluttershy, yay!]

Když klient vyžaduje nějakou blikající sračku ve Flashi a považuje to za klíčový argument, není na výběr. Děkuji pěkně.

[Toman]

Ne nadarmo platí "Náš zákazník, náš pán". Klientovi lze něco doporučit, naopak nedoporučit, a z osobní zkušenosti se i stalo, že po několika "doporučeních něco nedělat" klient ukončil spolupráci a přešel k někomu jinému. Já Vám rozumím, jak to myslíte, ale naopak bych poprosil i já o pochopení. Ne vždy v práci děláme právě to, co si myslíme, že je správné. Život je o kompromisu, a kde jsou hranice, to je již věc jiná.

[Fluttershy, yay!]

Dovolím si citovat:

Klient, který přijde za SEO konzultantem s tím, že chce být první na slovo „bazény“ a nic jiného ho nezajímá, je předem odsouzen k neúspěchu. Solidní firma ho pošle domů a zbudou na něj jen ty nesolidní.

To lze aplikovat na téměř cokoliv.

[Toman]

Dobře, vezmu si toto Vaše doporučení k srdci.

[Stevko]

A každý normálny browser podporuje nepovolenie stránkam zmeniť použité písmo a dokonca aj farby. S obľubou využívam.

[cadic]

Já to mám zakázaný už několit let, mám natvrdo nastavený fonty Dejavu. Na tenhle font jsem si zvyknul. A že to nevypadá uplně přesně tak, jak autor myslel? Who cares.....

[dexík]

Áááno - presne - pro me take naprosto nepostradatelna funkce!

[Toman]

Všechno co jste zde napsali a týká se fontu je pravda, normální je používat bezpečnné webové fonty, ale když to nejde jinak, a klient vyžaduje použití tohoto fontu, vymluvit si to nenechá... je to jediné, a řekl bych dokonce i "čisté" řešení. Pořád lepší JS, než Flash.

[kavol]

proč proboha používat nějaké javascriptové sračky namísto systémového řešení?

[Toman]

A co prohlížeče nepodporující CSS3?

[mirec]

A čo prehliadače s vypnutým js?

[freshmouse]

A co děti v Africe, které počítač nemají?

[Toman]

Přesně Pokud chceme takto polemizovat, tak co lidé co se dívají na web jen přes lynx, má CSS a JS pro ně vůbec cenu A co ti, co používají ještě Win 3.11 a Netscape Navigator, navíc na černobílém monitoru - má to pro ně význam dělat a něco řešit?

[Daniel Hejduk]

Grafická klikátka jako Navigator či Firefox vyžadují k plné funkci webu pravidlené aktualizace. Správný web má pro mě tyto vlastnosti:

1) V textovém prohlížeči si umím najít požadovanou informaci, celý web funguje. (Lynx, elinks, w3m,..)

2) Pokud má grafická udělátka(flash, skripty), tak dokáže správce vyjmenovat několik programů, ve kterých to testoval.

[houska]

A co děti v Africe, mají si kde hrát??

[Toman]

U prohlížečů s vypnutým JS se zobrazí text v původním fontu, nastaveném v CSS (podpora font-family v dnes běžných prohlížečích je bezproblémová). Naopak si ale dovolím tvrdit, že je větší procento prohlížečů, které nedisponují podporou CSS3, než prohlížečů s vypnutým JS. Do té doby než bude CSS3 lépe podporováno, tak to jinak nepůjde. Vezměte si, jak to je dnes s CSS, jaké CSS hacky musíme dělat, aby web vypadal všude stejně. Takováto JS řešení, ať si kdo chce říká cokoliv, jsou odladěna tak, že fungují ve všech současných prohlížečích, existuje fenomén AJAXu, a pokud máte vypnutý JS, tak většina webů ztrácí na své původní funkčnosti, kterou do něho vývojáři vložili. Většina lidí má tedy JS zapnutý, proto podporuji toto řešení. A proč? Funguje totiž ve všech dnes nejpoužívanějších prohlížečích bez závislosti na CSS, který je v každém implementován jinak, ale JS "stejně".

[hikikomori82]

src: pre font funguje aj v msie 6.0, aky nepodporovany prehliadac mas na mysli?

[Toman]

No měl jsme s tím problémy v MSIE, teď ale koukám, po dlouhém Googlení, že to jde nějak řešit přes font ve formátu EOT, který chce MSIE, jiné prohlížeče naopak chtějí TTF... I love webdeveloping

[kavol]

U prohlížečů s vypnutým JS se zobrazí text v původním fontu, nastaveném v CSS (podpora font-family v dnes běžných prohlížečích je bezproblémová).

a to je jako co za argument? - bez JS, byť vypnutého, podpora font-family neexistuje?

Do té doby než bude CSS3 lépe podporováno, tak to jinak nepůjde.

tak naokraj, a kdo donutí autory browserů podporovat něco, co se nepoužívá?

Vezměte si, jak to je dnes s CSS, jaké CSS hacky musíme dělat, aby web vypadal všude stejně. Takováto JS řešení, ať si kdo chce říká cokoliv, jsou odladěna tak, že fungují ve všech současných prohlížečích, existuje fenomén AJAXu, a pokud máte vypnutý JS, tak většina webů ztrácí na své původní funkčnosti, kterou do něho vývojáři vložili. Většina lidí má tedy JS zapnutý, proto podporuji toto řešení. A proč? Funguje totiž ve všech dnes nejpoužívanějších prohlížečích bez závislosti na CSS, který je v každém implementován jinak, ale JS "stejně".

MUHEHE, tak to je vtip dne

vezmi si sto náhodných stránek, pusť na ně několik současných browserů, a počítej rozdíly v interpretaci CSS a rozdílné chování užitého JavaScriptu ... pak si ještě udělej statistiku ze zdrojáků, kolik hacků na detekci typu a verze (!) browseru je v JS kódu a kolik v CSS zdrojáku

[Toman]

U prohlížečů s vypnutým JS se zobrazí text v původním fontu, nastaveném v CSS (podpora font-family v dnes běžných prohlížečích je bezproblémová).

a to je jako co za argument? - bez JS, byť vypnutého, podpora font-family neexistuje?

Čtěte pozorně. Napsal jsem, že když se vypne JS, tak se zobrazí text daného elementu podle jeho font-family. Takže jsem vůbec neřekl, že je s tím problém. Myslím, že ta věta zní dost logicky, i když to chce člověk už od počátku autorovi v komentářích vytmavit za každé jeho slovo.

tak naokraj, a kdo donutí autory browserů podporovat něco, co se nepoužívá?

Vezměte si, jak to je dnes s CSS, jaké CSS hacky musíme dělat, aby web vypadal všude stejně. Takováto JS řešení, ať si kdo chce říká cokoliv, jsou odladěna tak, že fungují ve všech současných prohlížečích, existuje fenomén AJAXu, a pokud máte vypnutý JS, tak většina webů ztrácí na své původní funkčnosti, kterou do něho vývojáři vložili. Většina lidí má tedy JS zapnutý, proto podporuji toto řešení. A proč? Funguje totiž ve všech dnes nejpoužívanějších prohlížečích bez závislosti na CSS, který je v každém implementován jinak, ale JS "stejně".

V článku se jasně hovoří o hotových řešeních, frameworcích, tzn. že toto řešení náhrady fontu je univerzální ve všech dnes běžných prohlížečích. Stejně jako jQuery právě řeší nedokonalost interpretace v každém prohlížeči. Framework se o tyto nedokonalosti obvykle velmi dobře postará za nás, a nemusíme psát nekonečné if sekvence.

Nenarodil jsme se včera, a vím, že se při používání běžného JS musí hodně hackovat, méně než u CSS, ale pokud použiješ framework na JS, tak už pak hackuješ jen CSS. A jelikož CSS3 není všude podporováno, zatím a bohužel, a JS díky jQuery např., a dobře napsaném řešení cufon, umožní funkci všude, kde je povolen JS.

Stačí?

[kavol]

A co prohlížeče nepodporující CSS3?

ehm, a co si o tom nejprve něco zjistit než se takto blbě ptát? - to, že CSS3 to konečně normuje, pro praktické použití nicmoc neznamená ... Google prozradí, že tato syntaxe by měla fungovat už od IE4 a též NN 4.x

[Toman]

Vysvětlil Vám někdy někdo pojem - řečnická otázka? Zřejmě ne. Myslíte si, že jsme nehledal jiné, jednodušší řešení? Ale ano, hledal. Jenže právě u MSIE jsem vždy skončil na tom, že to nefungovalo.

[kavol]

řečnická otázka? - ano, chápu ... takže nemá smysl se pokoušet odpovídat na příspěvek výše, jestliže to o tom CSS3 byla jen "řečnická otázka", pak je zjevné, že není sebemenší snaha hledat skutečné řešení a nějak logicky argumentovat pro jednu či druhou variantu, prostě jsi se rozhodl, že co popisuješ v blogu je to jediné_správné(tm)

p.s. popisovat na linuxovém portále řešení motivované funkčností v IE a naopak problematické pro "nativní" linuxové prohlížeče mi přijde, ehm, velmi hloupé a neslušné

[Toman]

Hledáme-li univerzální řešení, které poběží minimálně na Linuxu a na Windows v běžných prohlížečích, je toto nejsnazší řešení. To že jsou "nativní" linuxové prohlížeče někde jinde, řekněme napřed, však neznamená, že by se neřešili i prohlížeče jiné.

[kavol]

nech si ty kydy laskavě od cesty - již několikrát ti bylo řečeno, že to funguje v IE, takže co to meleš o "linuxových prohlížečích napřed"?

a co jsou podle tebe na Linuxu "běžné prohlížeče" pro to tvoje řešení? - v seznamu podporovaných nevidím ani SeaMonkey, ani Konqueror, ani "mobilní" prohlížeče ...

[Toman]

Jasně, takže tohle Vám přijde jako normální řešení? Lepší než výše uvedené? Nějaké transformování TTF na EOT? Ono je sice pěkný, že mi bylo řečeno, že to funguje... ale tak si to laskavě zkuste v praxi, ať vy naopak nemelete.

<!--[if IE]>
<style type="text/css">
@font-face {
	font-family: "Font1";
	font-style:  normal;
	font-weight: normal;
	src: url("font1.eot");
}
</style>
<![endif]-->

<!--[if !IE]>-->
<style type="text/css">
@font-face {
	font-family: "Font1";
	font-style:  normal;
	font-weight: normal;
	src: url("font1.ttf");
}
</style>
<!--<![endif]-->

[otasomil]

Zapisek pekny... nicmene asi zustanu u zaziteho: prohlizeci prohlizeci pridel nejaky font....

[vlastikroot]

Jaj to je ale prasárna. Správně by se mělo jen rozhodnout jestli patkové nebo bezpatkové písmo. Maximálně nějaký ten quirk kvůli widlím a jeho upředňostňovaným fontům (čím ošklivějši font, tim na přednějším místě).