Aby zmienić czcionkę w HTML, wykorzystuje się przede wszystkim właściwości CSS, takie jak font-family, font-size, font-weight, oraz font-style. Każda z nich odpowiada za inny aspekt wyglądu tekstu na stronie internetowej. Poniżej znajdziesz szczegółowy poradnik pokazujący różne metody zmiany czcionki – od podstaw po bardziej zaawansowane zastosowania.
Zmiana rodzaju czcionki (font-family)
Najczęściej używaną właściwością do określenia rodzaju czcionki w HTML jest font-family. Pozwala ona ustalić, jaka czcionka ma być użyta w wybranym elemencie.
<p style="font-family: Arial, Helvetica, sans-serif;"> Ten tekst będzie wyświetlony czcionką Arial, a jeśli nie jest dostępna – Helvetica, lub domyślną bezszeryfową. </p> Zalecenia:
- Podawaj kilka czcionek – oddzielonych przecinkami (tzw. lista fallback), aby zapewnić poprawne wyświetlanie tekstu niezależnie od systemu użytkownika;
- Na końcu zawsze warto podać ogólną rodzinę, np. sans-serif, serif lub monospace.
Zmiana rozmiaru czcionki (font-size)
Właściwość font-size służy do określania wielkości tekstu. Wielkość można podać w różnych jednostkach:
- piksele:
px, - punkty:
pt, - em/rem (jednostki względne),
- słowne wartości predefiniowane (
small,large, itp.).
<p style="font-size: 16px;">To jest tekst o wielkości 16 pikseli.</p> <p style="font-size: 1.5em;">Tekst o wielkości 1.5 razy większej niż domyślna.</p> <p style="font-size: 120%;">Tekst o wielkości 120% wartości bazowej.</p> <p style="font-size: large;">Tekst o predefiniowanym rozmiarze 'large'.</p> Zmiana stylu i grubości czcionki (font-style, font-weight)
font-style– pozwala uzyskać tekst pochylony (italic);font-weight– zmienia grubość czcionki.
<p style="font-style: italic;">Tekst pochylony.</p> <p style="font-weight: bold;">Tekst pogrubiony.</p> <p style="font-weight: 700;">Tekst bardzo pogrubiony (wartości: 100–900).</p> Zmiana koloru czcionki (color)
Kolor czcionki ustawia się za pomocą właściwości color.
<p style="color: red;">Czerwony tekst.</p> <p style="color: #00FF00;">Zielony tekst w zapisie szesnastkowym.</p> <p style="color: rgb(0, 0, 255);">Niebieski tekst zapisany za pomocą RGB.</p> <p style="color: rgba(255, 0, 0, 0.5);">Półprzezroczysty czerwony tekst.</p> Wczytywanie niestandardowych czcionek (Google Fonts)
Aby użyć czcionek nieszablonowych, których użytkownik nie ma na swoim komputerze, najwygodniej skorzystać z Google Fonts lub własnych fontów w formacie .woff/.ttf.
Przykład użycia Google Fonts:
Dodaj link do czcionki w sekcji <head> –
<head> <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"> </head> Użyj czcionki poprzez font-family –
<body style="font-family: 'Roboto', Arial, sans-serif;"> Tekst z wykorzystaniem niestandardowej czcionki Roboto. </body> Zmiana czcionki za pomocą oddzielnego arkusza CSS
W praktyce stylowanie na stronie internetowej realizuje się poprzez zewnętrzne pliki CSS. Pozwala to na łatwą zmianę stylów całej witryny.
Przykładowe reguły CSS –
body { font-family: 'Roboto', Arial, sans-serif; font-size: 18px; color: #333; } h1 { font-family: 'Montserrat', sans-serif; font-weight: bold; font-size: 2.5em; } Kompletny przykład – stylowanie akapitów i nagłówków
<!DOCTYPE html> <html lang="pl"> <head> <meta charset="UTF-8"> <title>Zmiana czcionki w HTML</title> <link href="https://fonts.googleapis.com/css?family=Montserrat:700&display=swap" rel="stylesheet"> <style> body { font-family: Arial, Helvetica, sans-serif; font-size: 16px; color: #222; } h1 { font-family: 'Montserrat', Arial, sans-serif; font-size: 2em; font-weight: 700; color: #1565c0; } p { font-size: 1.1em; line-height: 1.6; color: #444; } .important { font-weight: bold; color: #d32f2f; } </style> </head> <body> <h1>Przykład formatowania tekstu</h1> <p>To jest zwykły tekst akapitu.</p> <p class="important">To jest wyróżniony akapit, np. ważna informacja.</p> </body> </html> Podsumowanie najważniejszych właściwości do zmiany wyglądu czcionki
- font-family – typ czcionki (Arial, Verdana, Google Fonts itd.);
- font-size – wielkość czcionki (px, em, %, itp.);
- font-style – styl czcionki (italic, normal);
- font-weight – grubość czcionki (bold, normal, liczby);
- color – kolor tekstu.
Dzięki powyższym instrukcjom możesz łatwo zmieniać czcionki na stronach internetowych oraz dostosować je do charakteru swojej witryny. Pamiętaj, aby unikać nadmiernego mieszania wielu stylów czcionek na jednej stronie oraz dbać o czytelność tekstu dla użytkowników.
