Jak zmienić czcionkę w HTML

Jeśli chcesz nadać swojej stronie internetowej indywidualny charakter poprzez zmianę czcionki, HTML oferuje kilka sposobów na osiągnięcie tego efektu. Wykorzystując tagi i style, możesz precyzyjnie kontrolować wygląd tekstu na stronie.

Wykorzystanie tagu <font>

Początkowo, tag <font> był popularnym sposobem zmiany czcionki w HTML. Jednakże, jest to metoda przestarzała i nie zalecana do użytku. Współczesne standardy HTML zalecają unikanie tego tagu ze względu na separację struktury i stylu.

Stylowanie za pomocą CSS

Najlepszym i zalecanym sposobem zmiany czcionki w HTML jest wykorzystanie arkuszy stylów CSS. Możesz to zrobić poprzez selektor elementu lub klasę.

Selektor elementu

Aby zmienić czcionkę dla konkretnego elementu HTML, użyj selektora CSS i właściwości font-family. Na przykład:

p {  font-family: "Arial", sans-serif;}

Zastosowanie klasy

Jeśli chcesz zastosować tę samą czcionkę do wielu elementów na stronie, nadaj im tę samą klasę w HTML, a następnie zdefiniuj styl dla tej klasy w arkuszu CSS.

<style>.mojaczcionka {  font-family: "Verdana", sans-serif;}</style>

Ten tekst będzie miał czcionkę Verdana.

To również będzie wykorzystywać czcionkę Verdana.

Zewnętrzne czcionki

Możesz także użyć zewnętrznych czcionek, takich jak Google Fonts, aby dodać różnorodność i wyjątkowość do Twojej strony. Wystarczy dodać odpowiedni link w sekcji <head> swojego dokumentu HTML.

Zmiana czcionki w HTML może być łatwa i precyzyjna, dzięki zastosowaniu arkuszy stylów CSS oraz korzystaniu z zewnętrznych bibliotek czcionek. Unikaj przestarzałych tagów jak <font>, a zamiast tego koncentruj się na separacji treści i stylu.

Korzystanie z atrybutu style

Alternatywnym sposobem zmiany wyglądu tekstu w HTML jest bezpośrednie korzystanie z atrybutu style w tagach HTML. Możesz to zrobić wewnątrz tagu, określając styl czcionki dla danego elementu.

PrzykładWynik
<p style="font-family: 'Times New Roman', serif;">Tekst w nowej czcionce</p>

Tekst w nowej czcionce

<h1 style="font-family: 'Georgia', serif;">Nagłówek w innej czcionce</h1>

Nagłówek w innej czcionce

Wykorzystanie jednostek em i rem

Podczas definiowania czcionek w CSS, warto rozważyć użycie jednostek em i rem. Jednostki te pozwalają skalować wielkość czcionki w zależności od rozmiaru czcionki elementu nadrzędnego lub wielkości czcionki bazowej dokumentu.

Jak działają jednostki em i rem?

1em oznacza wielkość czcionki elementu nadrzędnego, natomiast 1rem odnosi się do wielkości czcionki bazowej dokumentu. Na przykład, jeśli element ma ustawioną wielkość czcionki na 2em, będzie to dwukrotność wielkości czcionki elementu nadrzędnego.

Zmiana czcionki dla różnych urządzeń

Aby zapewnić lepsze dostosowanie do różnych urządzeń, warto stosować techniki responsywnego projektowania stron. Możesz wykorzystać media queries, aby zmieniać rodzaj czcionki lub jej rozmiar w zależności od szerokości ekranu czy urządzenia użytkownika.

Przykład użycia media queries

css
@media screen and (max-width: 600px) {
body {
font-family: 'Roboto’, sans-serif;
}
}
@media screen and (min-width: 601px) {
body {
font-family: 'Open Sans’, sans-serif;
}
}

Najczęściej zadawane pytania

  • Jakie są najlepsze praktyki przy wyborze czcionek dla stron internetowych?
  • Czy istnieje sposób na importowanie własnych czcionek do projektu?
  • Jakie są różnice między jednostkami em a rem przy definiowaniu czcionek?

Zobacz także:

Photo of author

Karol Baranowski

Moim celem jest dostarczanie wartościowych i przystępnych informacji, które pomogą Wam osiągnąć zdrowy tryb życia. Na tej stronie znajdziecie praktyczne poradniki, inspiracje oraz ciekawostki z zakresu Poradników, abyście mogli podejść do zdrowego stylu życia w sposób holistyczny i zrównoważony.

Dodaj komentarz