Z pewnością font w CSS odgrywa kluczową rolę w wyglądzie i czytelności strony internetowej. Co więcej CSS oferuje szeroki zakres właściwości, które pozwalają na pełną kontrolę nad wyglądem fontu. W tej lekcji omówię podstawowe właściwości fontu w CSS (nazywany także czcionką :-), ich zastosowanie oraz najlepsze praktyki. Sprawdź też następną lekcję, w której omawiam formatowanie tekstu w CSS.
Poznasz takie właściwości jak:
- font-family – rodzina czcionki
- font-size – wielkość fontu
- font-weight – grubość fontu
- font-style – styl fontu
- font-variant – wariant fontu
- line-height – wysokość linii
- letter-spacing – odstęp między literami
- Łączenie właściwości fontu
- Przykłady zastosowania właściwości fontu
Font-family – rodzaj fontu
Właściwość font-family określa, jakie fonty mają być używane do wyświetlania tekstu. Możemy podać listę fontów, które będą używane w przypadku, gdy pierwsza z nich nie jest dostępna.
selektor { font-family: wartość; }body { font-family: 'Arial', 'Verdana', sans-serif; }Możemy zastosować czcionki:
- szeryfowe (serif) – posiadają ozdobniki np. 'Times New Roman’, Georgia
- bezszeryfowe (sans-serif) – bez ozdobników np. Arial, Tahoma, Verdana
p { font-family: Times New Roman', Georgia, serif; }p { font-family: Arial, Tahoma, Verdana, sans-serif; }Przykład
To jest tekst pisany fontem szeryfowym.
Font-size – wielkość fontu
Właściwość font-size definiuje rozmiar czcionki. Może być wyrażona w różnych jednostkach, takich jak px, em, rem, % itp.
selektor { font-size: wartość; }Wielkość fontu możemy definiować w jednostkach względnych – em lub bezwzględnych – px. Wyższość fontów w jednostkach względnych polega na tym, że są one skalowalne natomiast bezwzględne mają stałą wielkość.
Jednostki względne obliczane na podstawie wielkości czcionki rodzica.
p { font-size: 1.4em; }Font-weight – grubość fontu
Grubość fontu ustalamy za pomocą font-weight.
selektor { font-weight: wartość; }Podstawowe wagi fontu:
- normal – standardowa (domyślna)
- bold – pogrubiona
p { font-weight: bold; }Przykład
Tekst pogrubiony.
Font-style – styl fontu
Styl fontu ustalamy za pomocą font-style.
selektor { font-style: wartość; }Dostępne wartości stylu fontu:
- normal – standardowa (domyślna)
- italic – pochylona (kursywa) – odrębna wersja czcionki
- oblique – pochylenie czcionki bez względu, czy faktycznie taki krój istnieje
p { font-style: italic; }Przykład
Tekst pisany kursywą.
Font-variant – wariant fontu
Właściwość font-variant kontroluje, czy tekst ma być wyświetlany jako małe wersaliki (small caps).
selektor { font-variant: wartość; }Dostępne wartości wariantu fontu
- normal – standardowa (domyślna)
- small-caps – kapitaliki – litery mniejsze zamieniane na ich mniejsze wersje wielkich liter
p { font-variant: small-caps; }Przykład
Tekst pisany kapitalikami.
Line-height – wysokość linii
Właściwość line-height określa wysokość linii tekstu, co wpływa na odstępy między wierszami. Może być wyrażona jako liczba, procent lub jednostka długości.
selektor { line-height: wartość; }Właściwość line-height określa wysokość linii tekstu, co wpływa na odstępy między wierszami. Może być wyrażona jako liczba, procent lub jednostka długości.
p { line-height: 2.5; }Przykład
Wysokość linii ustawiona na 2.5.
Letter-spacing – odstęp między literami
Właściwość letter-spacing kontroluje odstęp między literami w tekście. Może być używana do poprawy czytelności lub stylizacji tekstu.
selektor { letter-spacing: wartość; }p { letter-spacing: 2px; }Przykład
Odstęp między literami 2px.
Łączenie właściwości fontu
W CSS możemy łączyć kilka właściwości czcionki w jedną deklarację za pomocą właściwości font. Właściwość font łączy font-style, font-variant, font-weight, font-size, line-height, i font-family.
p { font: italic small-caps bold 16px/1.5 'Arial', sans-serif; }Przykład
Teks z połączonymi właściwościami.
Przykłady zastosowania właściwości fontu
Nagłówki strony
h2 {
font-family: 'Georgia', serif;
font-size: 36px;
font-weight: bold;
letter-spacing: 1px;
}Paragrafy
p {
font-family: 'Arial', sans-serif;
font-size: 16px;
line-height: 1.5;
}Font CSS – podsumowanie
Przede wszystkim font CSS oferuje szeroki zakres ustawienia właściwości fontu, które pozwalają na pełną kontrolę nad wyglądem fontu na stronie internetowej. Dlatego zrozumienie i umiejętne zastosowanie tych właściwości pozwala na tworzenie estetycznych i czytelnych stron www. Zachęcam do eksperymentowania z różnymi ustawieniami fontu, aby dostosować wygląd tekstu do własnych potrzeb i upodobań.
W następnej lekcji omawiam właściwości fontu w CSS.