Vlastnost font-style se většinou používá k zadání textu kurzívou.
Tato vlastnost má tři hodnoty:
normální - Text se zobrazuje normálně
kurzíva - Text je zobrazen kurzívou
šikmý - text je "nakloněný" (šikmé je velmi podobné kurzívě, ale méně podporováno)
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}Zkuste to sami →
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
</style>
</head>
<body>
<h1>The font-style property</h1>
<p class="normal">This is a paragraph in normal style.</p>
<p class="italic">This is a paragraph in italic style.</p>
<p class="oblique">This is a paragraph in oblique style.</p>
</body>
</html>
Vlastnost font-weight určuje váhu písma:
p.normal {
font-weight: normal;
}
p.thick {
font-weight: bold;
}Zkuste to sami →
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
font-weight: normal;
}
p.light {
font-weight: lighter;
}
p.thick {
font-weight: bold;
}
p.thicker {
font-weight: 900;
}
</style>
</head>
<body>
<h1>The font-weight property</h1>
<p class="normal">This is a paragraph.</p>
<p class="light">This is a paragraph.</p>
<p class="thick">This is a paragraph.</p>
<p class="thicker">This is a paragraph.</p>
</body>
</html>
Vlastnost font-variant určuje, zda má text být zobrazeny malým písmem.
V malém písmu jsou všechna malá písmena převedena na velká písmena. Převedená velká písmena se však zobrazí v menší velikosti písma než původní velká písmena v textu.
p.normal {
font-variant: normal;
}
p.small {
font-variant: small-caps;
}Zkuste to sami →
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
font-variant: normal;
}
p.small {
font-variant: small-caps;
}
</style>
</head>
<body>
<h1>The font-variant property</h1>
<p class="normal">My name is Hege Refsnes.</p>
<p class="small">My name is Hege Refsnes.</p>
</body>
</html>