Fonty a problémy s diakritikou (CSS)
Příliš žluťoučký kůň úpěl ďábelské ódy! 123456789
Znáte tuto frázi? Pokud se pohybujete v kruzích webdesignu, tak jste ji s největší pravděpodobností viděli. Problematika fontů a webdesignu začala s příchodem CSS3 a @fontface. Ne vždy se ale podaří úspěšně nasadit font, který požadujeme na vytvářené stránky. Nedávno jsem tuto problematiku řešil a pokusím se vám přiblížit, jak úspěšně nasadit font s diakritikou na webové stránky.
1. Stáhnout font s diakritikou
Existuje hodně stránek, kde se dají stáhnout české fonty. Uvádím několik stránek, ze kterých nejvíce čerpám.
www.ceskefonty.cz – jednoduché stránky bez možnosti si nějakým způsobem vyzkoušet text, nezobrazuje mapu znaků, který font obsahuje a moc fontů tam nenajdete.
www.fontsquirrel.com – výběr z velkého množství fontů, je zde přehled znaků, i možnost otestovat text, který si napíšete (k této stránce se ještě vrátíme).
cs.fonts2u.com – obrovská databáze fontů s výborným filtrem a hledáním. Zobrazuje také mapu znaků.
Po stáhnutí fontu se raději přesvědčete, zda doopravdy vidíte českou diakritiku (u Windows stačí otevřít soubor s příponou *.ttf a hned vidíte výsledek)
2. Vygenerování dalších formátů fontu a @fontface
Musíme zpět na stránky www.fontsquirrel.com konkrétně tuto stránku. Tam nahrajeme font a zvolíme Expert.
Výborný generátor pro generování @fontface.
Je to nutné pro pár věcí. Jednak u font formats zvolit i formát svg (dobrý pro IE), ale hlavně zvolit u Subsetting -> custom Subsettinga tam poté zatrhnout Czech.
Při výběru určitého jazyka nebo unicode tabulek, uvidíte všechny znaky, které jsou v daném jazyce
Tím zajistíte české fonty do nově vygenerovaného souboru s formáty fontů a css s @fontface. Nakonec stačí zatrhnout souhlas a kit si můžete stáhnout.
3. Úprava stylů u vygenerovaného souboru
Poslední věc, co je potřeba udělat je přidat jeden řádek u vygenerovaného souboru style.css (pokud jste si to nezměnili u generování jinak).
Původně v souboru je něco takového:
|
1
2
3
4
5
6
7
8
9
|
@font-face { font-family: 'NazevPismaVyuzivanehoVCss'; src: url('nazev-pisma-fyzicky-na-disku-webfont.eot?') format('eot'), url('nazev-pisma-fyzicky-na-disku-webfont.woff') format('woff'), url('nazev-pisma-fyzicky-na-disku-webfont.ttf') format('truetype'), url('nazev-pisma-fyzicky-na-disku-webfont.svg#OswaldLight') format('svg'); font-weight: normal; font-style: normal;} |
Pro úplnou funkčnost musíme přidat tento řádek:
|
1
|
unicode-range:'U+0-1FFFFF'; |
Takže to vypadá nějak takto:
|
01
02
03
04
05
06
07
08
09
10
|
@font-face { font-family: 'NazevPismaVyuzivanehoVCss'; src: url('nazev-pisma-fyzicky-na-disku-webfont.eot?') format('eot'), url('nazev-pisma-fyzicky-na-disku-webfont.woff') format('woff'), url('nazev-pisma-fyzicky-na-disku-webfont.ttf') format('truetype'), url('nazev-pisma-fyzicky-na-disku-webfont.svg#OswaldLight') format('svg'); font-weight: normal; font-style: normal; unicode-range:'U+0-1FFFFF';} |
A je hotovo, stačí vše přenést na sever nebo na hosting, přidat style.css do hlavičky html a můžete hned využívat písmo, které jste si stáhli a připravili.
