Czcionki

Dostępny

2.1 Właściwość font-family

Czcionki mają kluczowe znaczenie w web designie, wpływając na czytelność i atrakcyjność wizualną tekstu. Rodziny czcionek określają ogólny styl i cechy czcionek, które można użyć na stronach internetowych. W CSS czcionki zazwyczaj dzielą się na trzy główne rodziny: serif, sans-serif i monospace. Przyjrzyjmy się każdej z nich bliżej.

Właściwość font-family

Właściwość font-family używana jest do określenia rodziny czcionek. Można podać kilka czcionek, oddzielając je przecinkami, aby przeglądarka mogła użyć następnej czcionki z listy, jeśli pierwsza jest niedostępna.

Przykład użycia kilku czcionek

font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

Przykład użycia:

CSS
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
HTML
<body>
  <p>Ten tekst wyświetlany jest z użyciem czcionek Helvetica Neue, Helvetica lub Arial.</p>
</body>

2.2 Rodzina czcionek serif

Czcionki z szeryfami (serif) charakteryzują się małymi liniami lub kreskami dodanymi do końców liter i symboli. Te czcionki nadają tekstowi bardziej tradycyjny i formalny wygląd.

Przykłady czcionek serif:

  • Times New Roman
  • Georgia
  • Garamond
  • Baskerville

Przykład użycia:

CSS
body {
  font-family: 'Times New Roman', serif;
}
HTML
<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph using a serif font.</p>
</body>

2.3 Rodzina czcionek sans-serif

Czcionki bez szeryfów (sans-serif) nie mają małych linii na końcach liter i symboli. Te czcionki wyglądają bardziej nowocześnie i minimalistycznie, i często są używane w web designie ze względu na ich dobrą czytelność na ekranach.

Przykłady czcionek sans-serif:

  • Arial
  • Helvetica
  • Verdana
  • Open Sans
CSS
body {
  font-family: 'Arial', sans-serif;
}
HTML
<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph using a sans-serif font.</p>
</body>

2.4 Rodzina czcionek monospace

Czcionki monospace (monospace) mają taką samą szerokość dla wszystkich znaków. Takie czcionki często są używane do wyświetlania kodu, dokumentacji technicznej i tabel, gdzie ważne jest, aby znaki były wyrównane pionowo.

Przykłady czcionek monospace:

  • Courier New
  • Consolas
  • Monaco
  • Lucida Console

Przykład użycia:

CSS
body {
  font-family: 'Courier New', monospace;
}
HTML
<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph using a monospace font.</p>
  <pre>
    function helloWorld() {
      console.log("Hello, world!");
    }
  </pre>
</body>

Dla poprawy odbioru i różnorodności stylistycznej na stronach często używa się kombinacji różnych rodzin czcionek. Na przykład, nagłówki mogą być stylizowane za pomocą czcionek serif, a główny tekst — za pomocą czcionek sans-serif. A kod zawsze monospace.

1
Zadanie
Frontend SELF PL,  poziom 14lekcja 1
Niedostępne
Rodzina czcionek
Rodzina czcionek
1
Zadanie
Frontend SELF PL,  poziom 14lekcja 1
Niedostępne
Czcionki ze stałą szerokością
Czcionki ze stałą szerokością
Komentarze
  • Popularne
  • Najnowsze
  • Najstarsze
Musisz się zalogować, aby dodać komentarz
Ta strona nie ma jeszcze żadnych komentarzy