spájame
slovenskú
IT komunitu
pridaj sa
Registrácia · Login

Ernest Sawyer 21.10.2011
Hodnoť článok:
4 0

CSS triky 7: neštandardné fonty (písma) pre stránky- Cufón, @font-face a Google Webfonts

Kedysi ľudia žili v dobách mýtov a legiend, kedy bol IE 5 krutý a malicherný a mohli sme použivať na stránkach len niekoľko základných fontov. Doba však pokročila, ľudia už nežijú v jaskyniach internet exploreru 5 a máme tu veľa možností ako implementovať do stránky neštandardné fonty. V tomto článku sa budeme venovať trom z nich- Cufonu, CSS3 funkcie @font-face a Google Webfonts.

Google webfonts vs. Cufón vs. FontFace

Google Webfonts:
+jednoduchosť s písmom v css, ľahké použitie, podpora vo všetkých prehliadačoch, rýchle načítanie cez google api tools, "opensource"
-obmedzenie fontov na 270 (ďalšie stále pribúdajú)

Cufón:
+neobmedzené fonty
-problémy v starších prehliadačoch, problém s licenciami/autorstvom, veľký .js súbor, zložité aplikovanie do stránky

@font-face:
+neobmedzené fonty, css3 prehliadače, ľahká práca s písmom v css
-nepodporujú ho staršie prehliadače, komplikovaná implementácia pre IE (cez .oet fonty)

POZOR! Komu je život milý a kto nechce stratiť zopár minút života čítaním si o nudnom a komplikovanom Cufóne, nech rovno preskočí na nápis CSS3 @font-face alebo Google Webfonts.

Cufón

Cufón je javascriptový nástroj ktorý vám nahradzuje fonty na webe za neštandardné fonty (ďalej len custom font). Deje sa to pomocou dvoch súborov, jedného, ktorý prevádza fonty na vaše custom fonty, a druhého, ktorý obsahuje samotný custom font.

Prvý súbor tu: CUFON
Druhý súbor si vygenerujete tu: GENERATOR

Čo je potrebné urobiť pri generovaní Cufónu:

  • 1. Nahrajete z PC svoj font ktorý chcete na stránkach použiť. Nenahrávajte fonty, ktoré sú chránené autorskými právami. Súbor s fontom (.ttf, .otf, .pdf alebo postscript) majte mimo windowsovej zložky Fonts- v prehliadači vám tu zložku neukáže.
  • 2. Vyberte si názov fontu, ktorý chcete používať v css. Je teda jedno, či sa Váš font nazýva SuperiorMaximus. Môžete si jeho "volanie" nastaviť napr. na Fero, Jano, Somhladny alebo 123. Je to skutočne jedno a uľahčuje to prácu (napr. s názvom Cufon by to vyzeralo nasledovne font-family:"Cufon";)
  • 3. Potvrďte EULA povolenie (t.j. že je font Free a že sa môže používať na komerčné účely). To si musíte zistiť u každého fontu zistiť individuálne. Tu sa môže stať, že nejaký z fontov ktorý nahrávate je zakázaný autorom fontu u Cufónu. V tomto prípade nezostáva nič iné než vybrať iný font.
  • 4. V ďalšej možnosti NEZAHŔŇAJTE všetko (All). Výsledný súbor by bol veľmi veľký a my chceme mať stránku samozrejme čo najmenšiu. Stačí zaškrtnúť Basic latin a k tomu v možnosti "and also these" zvoliť slovenské znaky (Latin extended A alebo Latin extended B).
  • 5. v security si nastavte obmedzenie použitia fontov len na vašu doménu, aby si nikto vaše fonty nelinkoval k sebe (nepodporujte lenivosť iných web vývojárov).
  • 6. Ostatné veci nevyplňujte ak sa v tom nevyznáte.
  • 7. Zaškrtnúť Acknowledge a potvrdiť celé naše vytváranie fontov. Teraz vám vyskočí sťahovanie js súboru s fontami. Potvrďte, uložte, HOTOVO.
  • 8. Dajte Cufón js a aj js s fontami do head vášho webu.

Aplikovanie Cufónu do stránky

Keďže zajtra.sk doteraz korektne nevie zobrazovať HTML kód v kóde, viac info o aplikácii cufónu tu: Ako aplikovať cufón

Ale zhrnuté, ide len o to že si nalinkujete do hlavičky dva .js súbory a nastavíte si cufón replace v js.

Prečo NEPOUŽÍVAŤ Cufón

  • 1. Problém s licenciami/autorstvom fontov
  • 2. Problém so selector enginom pre IE 6 a 7, doctypom a hoverom
  • 3. Komplikovanosť
  • 4. Text sa vykresľuje ako obrázok
  • 5. Celkové znechutenie

CSS3 @font-face

Font face je záležitosť, ktorú nám ponúkla už CSS2 ale v dosť osekanom formáte (podporovalo to len formát .eot). CSS3 v nových prehliadačoch podporuje aj ostatné formáty (.tts a .otf).

CSS definícia:

@font-face { font-family: Delicious; src: url('Delicious-Roman.otf'); }

CSS volanie:

h3 { font-family: Delicious, sans-serif; }

Ďalšou podstatnou informáciou je fakt, že ak chceme používať aj BOLD (tučnú) verziu fontu, musíme to zadefinovať najprv vo font-face. Pre font Delicious-Roman by to vyzeralo nasledovne:

CSS definícia:

@font-face { font-family: Delicious; src: url('Delicious-Roman.otf'); } @font-face { font-family: Delicious; font-weight: bold; src: url('Delicious-Bold.otf'); }

a volanie:

h3 { font-family: Delicious, sans-serif; font-weight:bold }

Ukážkou, ako font-face funguje, je tento web. Všetky nápisy sú urobené cez @font-face. Skvelé, že? ;)

@Font-face generátor

Tak ako pri cufóne, aj tu máme možnosť využiť online generátor pre font-face (ďakujem za pripomenutie Eduardovi Marcinčovi). Generátor nájdtete na tejto adrese: http://www.fontsquirrel.com/fontface/generator

Google Webfonts

Google webfonts je ultimátne najlepšie riešenie pre neštandardné fonty na stránke. Okrem toho, že funguje naozaj v každom prehliadači (vrátane historických), generuje sa ako TEXT a v css sa s ním človek môže hrať ako s normálnym fontom bez toho, aby musel generovať niečo zvlášť pre obyčajné písmo, túčné písmo, kurzívu atď.

Google webfonts nájdete tu:http://www.google.com/webfonts

Ako to funguje

  • 1. Vyberiete si zo širokej ponuky fontov (momentálne vyše 270)
  • 2. Pridáte si fonty cez "Add to selection"
  • 3. Kliknete dole na Review. Tam si môžete ponastavovať aby vám ukázalo nejaký ten dummy text, ako bude vyzerať v odstavci, ako paragraf atď. Rovnako tak si môžete zadať vlastný text na zobrazenie (v Preview text kliknite na [Enter your own text] a napíšte si vlastný text.
  • 4. Zistite si, či font podporuje slovenské znaky. To urobíte tak, že si dáte zobraziť vo fontoch vlastný text (slovo) so slovenskými znakmi. Ideálna veta na zisťovanie je "Ľaľa ho, papľuha, ogrcal mi krpce i s čakanom".
  • 5. Odstráňte fonty ktoré nechcete použiť (vľavo dole na modrom pruhu klikajte na X vedľa fontov)
  • 6. Kliknite na Use
  • 7. Vyberte si štýly, ktoré chcete používať, hneď pod tým v druhom kroku zvoľte Character set Latin Extended (v prípade že by vám nešli slovenské znaky koretkne).
  • 8. Dajte na vašu stránku do head link na JS ktorý vám to vygenerovalo.
  • 9. Voilá, teraz už len stačí používať font-family:"názov fontu" ktorý ste si dali. Ukážeme si to na príklade.

Príklady:
http://thewitcher.sk (horné menu, nápisy)
http://zamun.sk (horné menu, nápisy atď)

Osobne považujem Google Webfonts za najlepšie, najrýchlejšie a najjednoduchšie riešenie.

Zoznam fontov s podporou slovenských znakov (je ich tam určite aj viac)

  • Oswald
  • Marck Script
  • Ubuntu Mono
  • Play
  • Sorts Mill Goudy
  • Abrill Farface
  • Andika
  • Gentium Book Basic
  • Istok Web
  • Open Sans Condensed
  • Open Sans
  • Varela
  • Francois One
  • Playfair Display
  • Modern Antiqua
  • EB Garamond
  • Kelly Slab
  • Forum
  • Neuton
  • Anonymous Pro
  • Ruslan Display
  • Tenor Sans
  • Lobster
  • Caudex
  • Anton
  • Cardo
  • Patrick Hand
  • Didact Gothic
  • MedievalSharp
  • Gentium Basic
  • Jura

Páčil sa ti článok? Ukáž mi svoju lásku a FOLLOWNI ma na https://twitter.com/sawyerernest

Ernest Sawyer Ernest Sawyer

Venujem sa propagačnej grafike, internetovému marketingu, UI designu, vývoju internetových aplikácií, gitare, písaniu a som css3 mág level 7 s palicou fire damage +20 pts =)


Hodnoť článok:
4 0

17 komentárov k článku:

Komentovať môžu iba prihlásení

Zaregistruj sa cez bezplatnú registráciu alebo použi login cez Facebook (FB Connect)

Prihlás sa tu, ak už máš profil na Zajtra.sk:


Zabudol som heslo

0 0 Jpop Squarpatich 21.3.2012 10:31:05
Použil som font squirrel
a stále to nefunguje,, možno je to len nejaká blbosť , ktorá m uniká.. vieš mi prosím pomocť,?
0 0 Martin Maricak 17.3.2012 17:57:52
Jpop Squarpatich A čo si použil? font squirrel, alebo cufon?
0 0 Jpop Squarpatich 12.3.2012 14:18:01
Ahojte mám taký problémik. mám vlastny font , pracne som si vo font-labe vyrobil všetku diakritiku dokonca aj českú a ked ten font prebehnem cez generator a nastavím stredoeuropske jazyky a aj UTF-8 a to Č Š a Ď nefunguje. existuje nejaké riešenie , alebo nemám sa stým už ďalej trápiť? vobec ma netrápi IE ani staré prehliadače, len aby to išlo v nových ďakujem
0 0 majoksa 14.11.2011 12:09:27
Ernest Sawyer: co "č" som uviedol len na príklad. To že je to konflikt XP/WIN7 na konečnom výsledku ale nič nemení, proste to nie je na 100% ...
0 0 Ernest Sawyer 11.11.2011 17:02:17
majoksa: to, o čom hovoríš, je konflikt XP/WIN7. Win7 vykresľuje fonty inak ako xp. A ide o konkrétne tento font a nie len č ale aj š.
0 0 majoksa 10.11.2011 11:33:59
ono to s tou diakritikou v google web fonts nie je až také ok, ako som zistil. Npr font Ubuntu Condensed zobrazuje písmeno "č" akoby iným fontom. Proste nepasuje k ostatným písmenám fontu...
0 0 Martin Maricak 28.10.2011 15:53:03
Ešte aj také existuje: www.fontsquirrel.com/fontface/generator skvelý nástroj.
0 0 Ernest Sawyer 28.10.2011 09:13:57
@martin: samozrejme, ale preto preferujem google webfonts =D
0 0 Martin Bihuň 27.10.2011 20:06:36
@ernest: tak jest, ale koli IE musime robit stale xyz veci navyse, cize ziadne prekvapenie :)
0 0 Ernest Sawyer 26.10.2011 18:30:07
@martin: Ďakujem za pripomienku, ja som to v IE testoval na tejto stránke a nevykreslilo mi to: http://www.css3.info/preview/web-fonts-with-font-face/

a mrkni si, ten text ti to cez font-face nevykreslí. Je to spôsobené kvoli tomu že IE vykresľuje .eot fonty.

"Not exactly a feature which is new to CSS3, @font-face was first proposed for CSS2 and has been implemented in Internet Explorer since version 5! However, their implementation relied on the proprietary Embedded Open Type (.eot) format, and no other browsers decided to use this format. With the release of Safari 3.1, however, website makers can use any licensed TrueType (.ttf) or OpenType (.otf) font in their pages."

Takže áno, IE ho podporuje, článok práve dostal na tvoj podnet korektúru. Ale to nič nemení na fakte, že človek musí urobiŤ ďalších xyz vecí aby mu to ten IE spapal a vykreslil. Not preferable ;)
0 0 Martin Bihuň 25.10.2011 15:54:07
@font-face: "nepodporujú ho staršie prehliadače, IE ho nepodporuje vôbec." -> nieje pravda, ie ho podporuje od 5.5 :)
0 0 Ernest Sawyer 22.10.2011 23:14:42
@andrej: no v pondelok tu bude aj ďalšia várka fontov z google fonts pridaná, lebo, ako som povedal už tomášovi, je tu konflikt medzi tým čo to zobrazí na stránkach google webfonts a praxou ako to funguje. Ale nakoľko som odcestovaný a doma budem až v pondelok, nie je šanca aby som sa k tej mojej "praktickej" databáze dostal skôr. Mrkni to tu tak v pondelok okolo desiatej dopoludnia, už by tu to malo byť komplet nahodené ;)
0 0 Ernest Sawyer 22.10.2011 23:09:06
@eduardo: pridané ;) spomenul som ťa v článku
0 0 Eduard Marcinčo 22.10.2011 19:48:56
Mohol si este spomenut nejaky @font-face generator, ktory ti vygeneruje kod kompatibilny s vecsinou prehliadacov.
http://www.fontsquirrel.com/fontface/generator
0 0 Andrej Očenáš 22.10.2011 19:25:33
Ooo tak tie vypisane fonty pomozu diki moc. To ma vzdy najviac stve kym najdem daco tak sa na to aj vykaslem.
0 0 Ernest Sawyer 22.10.2011 11:43:38
@tomas: máš to mať, je to pridané už k článku, len tam chýba moja "praktická" databáza fontov, lebo niektoré fonty ti na google webfonts ukáže tak akoby diakritiku nepodporovali, ale v realite ti ju plne podporujú (príkladom je napr. font Oswald). Keďže som cca 3 mesiace dozadu skúšal všetky tie fonty v praxi tak mám doma spísané v txt súbore ktoré fonty podporujú diakritiku. Tie tam dopíšem ešte zajtra ako bonus. =)
0 0 Tomas Dolezal 22.10.2011 06:22:11
Za tú sk diakritiku by som bol vďační :)
Zajtra.sk > Programovanie > CSS/HTML > CSS triky 7: neštandardné fonty (písma) pre stránky- Cufón, @font-face a Google Webfonts


Kritika

Vieš ako robiť veci lepšie? Pomôž našim odvážnejším členom a skritizuj im projekty!

Reklama

Seriály zo Zajtra.sk

Reklama