W CSS właściwość font
definiuje rodzaj czcionki, grubość i styl tekstu.
W arkuszach stylów, można wyróżnić następujące typy czcionek
- szeryfowe (ang. serif) - jest to czcionka, która posiada małe ozdobniki na końcu każdego znaku
- bezszeryfowe (ang. sans-serif) - jest to prosta czcionka bez ozdobników
- czcionki o stałej szerokości znaków (ang. monospace) - czcionka w której każdy znak jest tej samej szerokości. Może ona być zarówno szeryfowa jak i bezszeryfowa.
Rodzaj czcionki (font family)
W CSS możemy podzielić czcionki na
- czcionki generyczne - czyli grupy czcionek, takie jak
sans-serif
,serif
, czymonospace
- "rodzina czcionki" - czyli konkretny krój pisma, taki jak
Arial
lubTimes
Rodzaj czcionki można ustawić za pomocą font-family
. Dobrym zwyczajem jest podawanie kilku krojów czcionki,
wtedy jeżeli przeglądarka w jakimś systemie operacyjnym nie zna danego kroju pisma, to zastąpi go następnym.
Podczas ustawiania krojów, zacznij od czcionki, która najbardziej przypadła Ci do gustu, a definicję zakończ typem generycznym. Dzięki takiemu podejściu, będziesz miał pewność że czcionka szeryfowa nie zostanie zastąpiona bezszeryfową lub odwrotnie, w razie jej niedostępności na danym urządzeniu.
Poniżej znajduje się przykład, dokładnie pokazujący jak należy definować rodzaje czcionki. Jeżeli czcionka składa się z więcej niż jedneko członu, to należy umieścić jej nazwę w cudzysłowiach. Dodatkowe typy czcionek, można podawać po przecinku.
xxxxxxxxxx
<html>
<head>
<style>
.serif {
font-family: "Times New Roman", serif;
}
.sansserif {
font-family: Arial, sans-serif;
}
.monospace {
font-family: Courier, "Lucida Console", monospace;
}
</style>
</head>
<body>
<h1>CSS font-family</h1>
<p class="serif">Ten paragraf wykorzystuje czcionkę Times New Roman</p>
<p class="sansserif">Ten paragraf wykorzystuje czcionkę Arial</p>
<p class="monospace">Ten paragraf wykorzystuje czcionkę Courier. W CSS ma ona zdefiniowana alternatywną czcionkę Lucida Cosole oraz typ generyczny monospace.</p>
</body>
</html>
Styl czcionky (font style)
Do ustawiania stylu czcionki służy font-style.
Może ona przyjąć wartości:
- normal - czcionka bez dodatkowego stylu
- italic - czcionka pisana kursywą
xxxxxxxxxx
<html>
<head>
<style>
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
</style>
</head>
<body>
<p class="normal">Paragraf ze stylem normalnym.</p>
<p class="italic">Paragraf pisany kursywą.</p>
</body>
</html>
Pogrubienie (font weight)
Aby uzyskać pogrubienie, należy wykorzystać właściwość font-weight
.
xxxxxxxxxx
<html>
<head>
<style>
p.normal {
font-weight: normal;
}
p.bold {
font-weight: bold;
}
</style>
</head>
<body>
<p class="normal">Czcionka normalna.</p>
<p class="bold">Czcionka pogrubiona.</p>
</body>
</html>
Wariant czcionki (font variant)
Za pomocą właściwości font-variant
, można uzyskać ciekawy efekt. Wszystkie małe litery, zostaną przekonwertowane na
wielkie litery, jednak o mniejszym rozmiarze czcionki.
xxxxxxxxxx
<html>
<head>
<style>
p.normal {
font-variant: normal;
}
p.small-caps {
font-variant: small-caps;
}
</style>
</head>
<body>
<p class="normal">Czcionka normalna.</p>
<p class="small-caps">Czcionka ze zmienioną właściwością font-variant</p>
</body>
</html>
Rozmiar czcionki (font size)
Do zmiany rozmiaru czcionki słóży właściwość font-size
:
xxxxxxxxxx
<html>
<head>
<style>
p.medium {
font-size: 24px;
}
p.big {
font-size: 48px;
}
</style>
</head>
<body>
<p>Czcionka normalna.</p>
<p class="medium">Czcionka o rozmiarze 24px</p>
<p class="big">Czcionka o rozmiarze 48px</p>
</body>
</html>
CSS font
Aby ustawić powyższe właściwości czcionki, możemy też skorzystać ze skróconej formy zapisu, jaką umożliwia właściwość font
.
Kolejność w jakiej należy dokonać zapisu to:
font-style
font-variant
font-weight
font-size/line-height
font-family
Wykorzystując formę skróconą, musisz podać font-size
oraz font-family
. Podanie pozostałych parametrów jest opcjonalne.
xxxxxxxxxx
<html>
<head>
<style>
.custom {
font: 20px Arial, sans-serif;
}
</style>
</head>
<body>
<h1>Nagłówek</h1>
<p>Paragraf</p>
<p class="custom">Paragraf ze zmienionymi stylami CSS.</p>
</body>
</html>