2.1 Właściwość font-family
Czcionki mają kluczowe znaczenie w web designie, wpływając na czytelność i atrakcyjność wizualną tekstu.
Rodziny czcionek określają ogólny styl i cechy czcionek, które można użyć na stronach internetowych.
W CSS czcionki zazwyczaj dzielą się na trzy główne rodziny: serif, sans-serif i monospace. Przyjrzyjmy się każdej z nich bliżej.
Właściwość font-family
Właściwość font-family używana jest do określenia rodziny czcionek. Można podać kilka czcionek,
oddzielając je przecinkami, aby przeglądarka mogła użyć następnej czcionki z listy, jeśli pierwsza jest niedostępna.
Przykład użycia kilku czcionek
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
Przykład użycia:
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
<body>
<p>Ten tekst wyświetlany jest z użyciem czcionek Helvetica Neue, Helvetica lub Arial.</p>
</body>
2.2 Rodzina czcionek serif
Czcionki z szeryfami (serif) charakteryzują się małymi liniami lub kreskami dodanymi do końców liter i symboli.
Te czcionki nadają tekstowi bardziej tradycyjny i formalny wygląd.
Przykłady czcionek serif:
- Times New Roman
- Georgia
- Garamond
- Baskerville
Przykład użycia:
body {
font-family: 'Times New Roman', serif;
}
<body>
<h1>This is a heading</h1>
<p>This is a paragraph using a serif font.</p>
</body>
2.3 Rodzina czcionek sans-serif
Czcionki bez szeryfów (sans-serif) nie mają małych linii na końcach liter i symboli. Te czcionki wyglądają bardziej
nowocześnie i minimalistycznie, i często są używane w web designie ze względu na ich dobrą czytelność na ekranach.
Przykłady czcionek sans-serif:
- Arial
- Helvetica
- Verdana
- Open Sans
body {
font-family: 'Arial', sans-serif;
}
<body>
<h1>This is a heading</h1>
<p>This is a paragraph using a sans-serif font.</p>
</body>
2.4 Rodzina czcionek monospace
Czcionki monospace (monospace) mają taką samą szerokość dla wszystkich znaków. Takie czcionki często
są używane do wyświetlania kodu, dokumentacji technicznej i tabel, gdzie ważne jest, aby znaki były wyrównane pionowo.
Przykłady czcionek monospace:
- Courier New
- Consolas
- Monaco
- Lucida Console
Przykład użycia:
body {
font-family: 'Courier New', monospace;
}
<body>
<h1>This is a heading</h1>
<p>This is a paragraph using a monospace font.</p>
<pre>
function helloWorld() {
console.log("Hello, world!");
}
</pre>
</body>
Dla poprawy odbioru i różnorodności stylistycznej na stronach często używa się kombinacji różnych
rodzin czcionek. Na przykład, nagłówki mogą być stylizowane za pomocą czcionek serif, a główny tekst —
za pomocą czcionek sans-serif. A kod zawsze monospace.
GO TO FULL VERSION