Jak zmienić czcionkę w HTML?

Jak zmienić czcionkę w HTML?

7 czerwca 2022

Jednym z najważniejszych elementów niemal każdej strony internetowej jest tekst. Tekst, jak to tekst, może jednak wyglądać różnie. Może być duży, mały, kolorowy, lub nie. Może mieć podkreślenie lub np. być pisanym kursywą.

W tym poradniku pokażę Wam różne popularne zabiegi pozwalające dostosować czcionkę do naszych potrzeb w HTML. W rzeczywistości, część z tych zmian będzie wymagała drobnej implementacji CSS, ale w tym poradniku będziemy osadzać go w pliku HTML za pomocą atrybutu style.

Jak zmienić krój czcionki w HTML?

Krój czcionki możemy zmienić za pomocą font-family.

Przykład:

<p style="font-family: Verdana">Jakiś tekst</p>

Rezultat:

Jakiś tekst


Problem może pojawić się jednak wtedy, gdy nasza czcionka nie jest ładowana na stronie internetowej, a użytkownik nie ma zainstalowanej jej w swoim systemie operacyjnym. Wówczas to po prostu nie zadziała.

W takim przypadku najłatwiej jest załadować konkretną czcionkę np. z Google Fonts jak w tym przykładzie.

Przykład:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">

<p style="font-family: Inter, sans-serif; font-weight: 600">Testowy napis czcionką Inter</p>

Rezultat:

Testowy napis czcionką Inter


Jak zmienić rozmiar czcionki w HTML?

Do rozmiaru czcionki możemy użyć atrybutu font-size. Można określić go między innymi za pomocą px, czy em.

Im większy rozmiar, tym większa będzie czcionka. Analogicznie, im mniejszy, tym mniejsza.

Przykład:

<p style="font-size: 18px">Tekst pisany dużą czcionką</p>
<p style="font-size: 12px">Tekst pisany małą czcionką</p>

Rezultat:

Tekst pisany dużą czcionką

Tekst pisany małą czcionką


Jak zmienić kolor czcionki w HTML?

Kolor czcionki możemy zmienić atrybutem color. Możemy wpisać go według angielskiej nazwy jak np. red, czy green oraz różnymi formatami kolorów takimi jak np. HEX, RGB, czy HSL.

Osobiście w przypadku czcionek polecam HEX, ponieważ zapisy są stosunkowo krótkie, a do dyspozycji mamy ponad 16 milionów rozmaitych kolorów.

Kolory HEX oraz w innych notacjach możecie znaleźć na rozmaitych stronach i w tzw. kolor pickerach. Możecie wykorzystać do tego chociażby stronę hexcol.com.

Przykład:

<p style="color: green">Zielony tekst</p>
<p style="color: #0e6096">Niebieski tekst z użyciem koloru HEX</p>

Rezultat:

Zielony tekst

Niebieski tekst z użyciem koloru HEX


Jak pogrubić czcionkę w HTML?

W tym przypadku nie musimy martwić się o CSS, ponieważ HTML posiada wbudowane tagi <b></b> oraz <strong></strong.

Przykład:

<b>Pogrubiony tekst</b>

Rezultat:

Pogrubiony tekst

Jak zrobić kursywę w HTML?

Podobnie jak w przypadku pogrubienia, kursywę również możemy wykonać z poziomu czystego HTML, tym razem za pomocą tagów <i></i>.

Przykład:

<i>Tekst pisany kursywą</i>

Rezultat:

Tekst pisany kursywą

Jak podkreślić tekst w HTML?

Do podkreślania w HTML służą znaczniki <u></u>.

Przykład:

<u>Podkreślony tekst</u>

Rezultat:

Podkreślony tekst