Jak zmienić czcionkę w HTML?

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:

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:

Jak podkreślić tekst w HTML?

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

Przykład:

<u>Podkreślony tekst</u>

Rezultat: