Rodina písma

V této lekci se postaráme o text na naší stránce: o jeho písmo, velikost, tloušťku, řádkování a zarovnání.

Z kurzu HTML znáte prvky strong a em. Ty dávají textu význam: strong označuje důležitý text a em text, na který klademe důraz. Prohlížeče je ve výchozím stavu zobrazují tučně a kurzívou, o vzhledu textu ale rozhoduje CSS. Pomocí CSS můžeme ztučnit nebo napsat kurzívou jakýkoli text a můžeme také změnit, jak vypadají strong a em.

Písmo vybíráme vlastností font-family (rodina písma). Rodina písma je jedno písmo se všemi svými řezy (variantami): například rodina Arial má obyčejný a tučný řez, kurzívu a tučnou kurzívu. Prohlížeč může použít jen písma, která jsou nainstalovaná v zařízení návštěvníka (nebo písma stažená spolu se stránkou, k nimž se dostaneme na konci této lekce). Proto je hodnotou font-family seznam písem oddělených čárkami: prohlížeč použije první písmo ze seznamu, které má k dispozici.

p {
	font-family: Verdana, Arial, sans-serif;
}

Tady prohlížeč nejdřív zkusí písmo Verdana. Pokud v zařízení nainstalované není, zkusí Arial. A pokud chybí i Arial, použije své výchozí bezpatkové písmo.

sans-serif není název písma, ale obecné rodiny písma: celého druhu písem. Prohlížeč má pro každou obecnou rodinu nějaké písmo, proto seznam vždy zakončíme jednou z nich. Nejdůležitější obecné rodiny jsou:

  • serif (patkové písmo): písmena mají na koncích tahů malé příčné čárky (patky), jako v knihách,
  • sans-serif (bezpatkové písmo): písmena bez patek, jednoduchá a čistá,
  • monospace (neproporcionální písmo): všechna písmena jsou stejně široká, jako v kódu.

Když název písma obsahuje mezery, je nejlepší ho napsat do uvozovek: "Times New Roman". Obecnou rodinu ale do uvozovek nikdy nepište: "sans-serif" v uvozovkách znamená písmo s názvem sans-serif, a takové neexistuje.

Písmo se dědí, proto ho nastavíme prvku body a dostane ho všechen text na stránce. Některým prvkům, třeba nadpisům, pak můžeme dát jiné písmo.

Pokyny

Do pravidla pro body přidejte deklaraci font-family: Arial, sans-serif.

Do pravidla pro h2 přidejte deklaraci font-family: Georgia, "Times New Roman", serif.

Začněte programovat zdarma

Registrací souhlasíte s provozními podmínkami a zásadami ochrany osobních údajů.

Nebo se registrujte pomocí:

1/8