Czcionki

CSS umożliwia określanie czcionek dla elementów HTML poprzez użycie właściwości font-family. Można wybrać czcionkę z dostępnej listy czcionek systemowych lub zdefiniować własną czcionkę przez ładowanie pliku czcionki za pomocą @font-face.

Nazwa czcionki	Przykład
Arial	Szybki brązowy lis przeskakuje nad leniwym psem
Times New Roman	Szybki brązowy lis przeskakuje nad leniwym psem
Verdana	Szybki brązowy lis przeskakuje nad leniwym psem
Helvetica	Szybki brązowy lis przeskakuje nad leniwym psem
fantasy	Szybki brązowy lis przeskakuje nad leniwym psem
Gabriola	Szybki brązowy lis przeskakuje nad leniwym psem
Symbol	Szybki brązowy lis przeskakuje nad leniwym psem
Consolas	Szybki brązowy lis przeskakuje nad leniwym psem

Font-Style

font-style Ustawienie rozmiaru w pikselach:

font-style Ustawienie rozmiaru w procentach:

										
h1 {
  font-style: normal;
}
------------------------------------------------

p {
  font-style: italic;
}

Font-Size

font-size Ustawienie rozmiaru w pikselach:

font-size Ustawienie rozmiaru w procentach:

										
h1 {
  font-size: 36px;
}
------------------------------------------------

p {
  font-size: 1.5em;
}

Font-Weight

font-weight Ustawienie rozmiaru w pikselach:

font-weight Ustawienie rozmiaru w procentach:

										
h1 {
  font-weight: bold;
}
------------------------------------------------

p {
  font-weight: 400;
}

Przykład użycia własnej czcionki przez ładowanie pliku czcionki za pomocą @font-face

								
@font-face {
  font-family: "MyFont";
  src: url(myfont.ttf) format("truetype");
}


p {
  font-family: "MyFont", sans-serif;
  font-size: 20px;
}

Wyjaśnienie

W powyższym przykładzie elementy <label> i <input> są użyte do tworzenia prostego formularza, w którym użytkownik może wprowadzić swoje imię i adres e-mail. Elementy <label> są używane do opisania pól formularza, a elementy <input> są używane do pobierania danych od użytkownika.

Important

Ważne jest, aby upewnić się, że plik czcionki jest dostępny w lokalizacji, którą podałeś w deklaracji src. Można również dodać więcej niż jeden format pliku czcionki w celu zapewnienia, że działają one we wszystkich przeglądarkach.