CSS nabízí širokou škálu vlastností pro stylování textu a písma, což vám umožní dokonale vyladit typografii vaší webové stránky.
Tato vlastnost určuje typ písma, které bude použito pro text. Můžete specifikovat seznam písem oddělených čárkami. Prohlížeč se pokusí použít první písmo v seznamu. Pokud není k dispozici, zkusí další, a tak dále, dokud nenajde písmo, nebo použije výchozí generické písmo.
p {
font-family: "Helvetica Neue", Arial, sans-serif;
}Generické rodiny písem: Doporučuje se vždy na konci seznamu uvést generickou rodinu písem (např. serif, sans-serif, monospace), aby se zajistilo, že se text zobrazí i v případě, že žádné z uvedených písem není k dispozici.
Pro rozšíření nabídky písem můžete použít služby jako Google Fonts. Google Fonts poskytuje velké množství volně dostupných webových písem, která můžete snadno integrovat do svých projektů. Jednoduše si vyberete písma na webu Google Fonts, zkopírujete vygenerovaný tag do
vašeho HTML souboru a pak můžete vybraná písma používat s font-family.<head>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>
<h1 style="font-family: 'Roboto', sans-serif;">Text s Google písmem</h1>
</body>Nastavuje velikost písma. Můžete použít různé jednotky:
p {
font-size: 18px;
}
h1 {
font-size: 2.5em; /* 2.5x velikost písma rodiče */
}Určuje tloušťku písma (tučnost). Může mít hodnoty jako normal, bold, lighter, bolder, nebo číselné hodnoty od 100 do 900 (např. 400 pro normální, 700 pro tučné).
strong {
font-weight: 700; /* nebo 'bold' */
}Nastavuje styl písma, nejčastěji pro kurzívu. Hodnoty jsou normal, italic a oblique.
em {
font-style: italic;
}Přidává nebo odstraňuje dekorace textu, jako je podtržení, přeškrtnutí nebo nadtržení. Hodnoty zahrnují none, underline, overline, line-through. Lze také kombinovat s barvou a stylem čáry (např. underline dashed red).
a {
text-decoration: none; /* Odstraní výchozí podtržení odkazů */
}
.zvyrza {
text-decoration: underline;
}Nastavuje výšku řádku, tedy mezeru mezi řádky textu. Hodnoty mohou být v pixelech, em, nebo jako bezjednotkové číslo, které se vynásobí velikostí písma elementu (doporučený způsob).
p {
line-height: 1.6; /* 1.6 násobek velikosti písma */
}Zarovná text uvnitř elementu. Možné hodnoty jsou left (vlevo), right (vpravo), center (na střed) a justify (do bloku).
h1 {
text-align: center;
}