Typografický design je kriticky důležitým prvkem úspěšného designu webových stránek. Vytvoření stránek s textem, který je snadno čitelný a vypadá skvěle, je cílem každého profesionála v oboru webdesignu. Abyste toho dosáhli, budete muset být schopni nastavit konkrétní písma, která chcete na svých webových stránkách používat. Chcete-li určit typ písma nebo rodinu písem ve svých webových dokumentech, použijete ve svém souboru vlastnost stylu rodina písem CSS.
Nejkomplikovanější styl rodiny písem, který byste mohli použít, by zahrnoval pouze jednu rodinu písem:
p {
rodina fontů: Arial;
}
Pokud jste na stránku použili tento styl, všechny odstavce by se zobrazily v rodině písem „Arial“. To je skvělé a protože „Arial“ je známý jako „písmo bezpečné pro web“, což znamená nejvíce (ne-li všechny) v počítačích by to bylo nainstalováno, můžete klidně vědět, že se vaše stránka zobrazí v zamýšleném pořadí písmo.
Co se stane, když vybrané písmo nelze najít? Pokud například na stránce nepoužíváte „bezpečné písmo pro web“, co udělá uživatelský agent, pokud toto písmo nemá? Dělají střídání.
To může vést k zábavným stránkám. Jednou jsem šel na stránku, kde to můj počítač zobrazil úplně v „Wingdings“ (sada ikon), protože můj počítač neměl písmo, které určil vývojář, a můj prohlížeč udělal propastnou volbu, jaké písmo použije jako výměna, nahrazení. Stránka byla pro mě úplně nečitelná! Tady vstupuje do hry sada písem.
Oddělte více rodin písem čárkou v zásobníku písem
„Zásobník písem“ je seznam písem, která mají vaše stránky používat. Výběr písma byste dali do pořadí podle svých preferencí a oddělili je čárkou. Pokud prohlížeč nemá v seznamu první rodinu písem, zkusí druhé a potom třetí atd., Dokud nenajde jedno, které má v systému.
rodina fontů: Pussycat, Algerian, Broadway;
Ve výše uvedeném příkladu prohlížeč nejprve vyhledá písmo „Pussycat“, poté „alžírské“ a poté „Broadway“, pokud nebylo nalezeno žádné jiné písmo. To vám dává větší šanci, že bude použito alespoň jedno z vašich vybraných písem. Není to dokonalé, a proto máme ještě více, co můžeme přidat do našeho zásobníku písem (čtěte dále!).
Použijte obecná písma jako poslední
Můžete tedy vytvořit zásobník písem se seznamem písem a stále žádný z nich prohlížeč nenajde. Nechcete, aby se vaše stránka zobrazovala jako nečitelná, pokud prohlížeč špatně zvolí náhradu. Naštěstí má CSS řešení i pro toto a volá se obecná písma.
Seznam písem byste měli vždy ukončit (i když je to seznam jedné rodiny nebo pouze písma bezpečná pro web) obecným písmem. Můžete použít pět:
- Kurzívní
- Fantazie
- Jednoprostorový
- Bezpatkové
- Patkové
Dva výše uvedené příklady lze změnit na:
rodina fontů: Arial, sans-serif;
nebo.
rodina fontů: Pussycat, Algerian, Broadway, fantasy;
Některá jména rodin písem jsou dvě nebo více slov
Pokud rodina písma, kterou chcete použít, obsahuje více než jedno slovo, měli byste ji obklopit uvozovkami. Zatímco některé prohlížeče mohou číst rodiny písem bez uvozovek, mohou být problémy, pokud je mezera zkrácena nebo ignorována.
font-family: "Times New Roman", patkové číslo;
V tomto příkladu vidíte, že název písma „Times New Roman“, který je víceslovný, je uzavřen v uvozovkách. Toto říká prohlížeči, že všechna tři tato slova jsou součástí názvu tohoto písma, na rozdíl od tří různých písem, která mají jednoslovná jména.