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.

|
Autor: Michal Odcházel |
Kategorie:

Obecné články

Chystáte nový projekt? Napište nám

Přetáhněte soubory do této oblasti a nebo klikněte pro nahrání. Choose File
Maximální velikost souboru: 20.97MB