Ostatnia aktualizacja 28 grudnia, 2023
Font leży u podstaw wyświetlania treści tekstowych na stronach internetowych, jednak już dawno . Dzięki nim możemy nadać tekstowi unikalny charakter i poprawić doświadczenia użytkownika. W tym tekście omówimy różne sposoby definiowania fontów w HTML, wraz z przykładami kodu, aby lepiej zrozumieć ich zastosowanie i możliwości.
- Ładowanie fontów, zwłaszcza niestandardowych, może wpływać na wydajność strony, dlatego dla poprawy czasu ładowania witryny, zaleca się stosowanie technik
font-display: swap;w CSS-ie. - Responsywność fontów uzyskuje się poprzez użycie jednostek względnych, np. em czy rem. Zapewniają one lepszą skalowalność i dostosowanie tekstu do różnych rozmiarów ekranów.
- Dla zapewnienia komfortu czytania, szczególnie na urządzeniach mobilnych, ważne jest dostosowanie fontów poprzez kontrolę rozmiaru, wysokości linii i odstępów.
Fonty w HTML – podstawy
W języku HTML fonty można definiować za pomocą znacznika <font>, choć jest to podejście przestarzałe i zaleca się stosowanie CSS. Dla przykładu w HTML-u wyglądało to tak:
<font face="Arial" size="4">To jest tekst w Arialu.</font>Definiowanie fontu z wykorzystaniem CSS-a przebiega za pomocą umieszczenia atrybutu w znaczniku. Możemy to zrobić poprzez atrybut <style>:
<p style="font-family: Verdana; font-size: 14px;">Tekst w Verdana.</p>Zaawansowane opcje fontów
Google Fonts możesz wykorzystać w ramach HTML-a
Google Fonts oferuje szeroką gamę fontów, które można łatwo włączyć do projektu. Dla przykładu:
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<p style="font-family: 'Roboto', sans-serif;">Tekst w Roboto.</p>@font-face w CSS
Za pomocą @font-face można używać niestandardowych fontów, które nie są dostępne domyślnie w przeglądarkach.
@font-face {
font-family: 'MojFont';
src: url('mojfont.woff2') format('woff2');
}<p style="font-family: 'MojFont', sans-serif;">Tekst w niestandardowym foncie.</p>Informacje o wyświetlaniu fontów na stronach w HTML
Dostępność fontów
Najważniejszym aspektem przy wyborze fontu jest jego dostępność. Fonty standardowe, czyli Arial czy Times New Roman, są zazwyczaj preinstalowane w większości systemów operacyjnych. Jednak przy użyciu niestandardowych fontów, takich jak te z Google Fonts lub załadowanych lokalnie, ważne jest, aby upewnić się, że będą one poprawnie wyświetlane na różnych urządzeniach i przeglądarkach.
Ładowanie fontów
Ładowanie fontów, szczególnie niestandardowych, może wpłynąć na czas ładowania strony. Używając @font-face, można kontrolować sposób ładowania fontów, na przykład z opcją font-display: swap;, która pozwala na szybkie wyświetlenie tekstu w domyślnym foncie, zanim załaduje się niestandardowy font.
Responsywność fontów
Ważne jest, aby fonty były responsywne, czyli dostosowywały się do różnych rozmiarów ekranu i urządzeń. Można to osiągnąć za pomocą jednostek względnych, takich jak em czy rem w CSS:
p {
font-size: 1.2em; /* Rozmiar fontu dostosowuje się do rozmiaru nadrzędnego elementu */
}Dalsza część tekstu znajduje się pod materiałem wideo:
HTML a dostosowanie fontów do czytelności
Czytelność jest istotna zwłaszcza na urządzeniach mobilnych. Rozmiar fontu, wysokość linii, odstępy między literami i słowami – wszystko to wpływa na komfort czytania. Dla przykładu, w HTML-u możemy określić wszelkie ustawienia, jakimi będzie cechował się wyświetlany tekst np. pod kątem różnych odstępów:
body {
font-family: Arial, sans-serif;
line-height: 1.6;
letter-spacing: 0.5px;
}Kolor i kontrast fontów w HTML
Kolor tekstu i tła również wpływa na czytelność. Zaleca się zachowanie wysokiego kontrastu między tekstem a tłem. Przykład kodu HTML, w którym ustawiamy te wartości:
p {
color: #333333; /* Ciemnoszary tekst */
background-color: #FFFFFF; /* Białe tło */
}Dostosowanie do preferencji użytkownika
Współczesne technologie webowe pozwalają na dostosowanie wyświetlania fontów do preferencji użytkownika, na przykład trybu ciemnego. Można to osiągnąć za pomocą zapytań media w CSS:
@media (prefers-color-scheme: dark) {
body {
color: #FFFFFF;
background-color: #000000;
}
}Czytaj także:
Jednostka em w CSS to zwykle 16 pikseli. Sprawdź zastosowania
