Tekst i typografia

Tekst jest jednym z podstawowych elementów sieci.

Podczas tworzenia witryny nie musisz nadawać stylów tekstowi. HTML ma w zasadzie całkiem niezły domyślny styl.

Większość witryny będzie jednak prawdopodobnie stanowić tekst, dlatego warto dodać do niego stylizację, aby uatrakcyjnić go wizualnie. Zmieniając kilka podstawowych właściwości, możesz znacznie poprawić wygodę czytania.

W tym module zaczniemy od reguły @font-face, która umożliwia importowanie czcionek niestandardowych na strony internetowe. Dzięki temu masz dostęp do dokładnie takiej typografii, jakiej potrzebujesz, niezależnie od czcionek zainstalowanych przez użytkownika.

Następnie omówimy najważniejsze właściwości czcionek CSS, takie jak font-family, font-style, font-weightfont-size. Te podstawy stanowią punkt wyjścia do manipulowania tekstem w celu nadania mu odpowiedniego stylu i ułatwienia jego czytania.

Omówimy też właściwości dotyczące akapitów, takie jak text-indentword-spacing, a na koniec poruszymy zaawansowane tematy, takie jak zmienne czcionki i pseudoelementy, które jeszcze bardziej ułatwiają kontrolowanie typografii.

W kursie znajdziesz praktyczne przykłady i wskazówki, które pomogą Ci lepiej zrozumieć i zastosować omawiane techniki CSS.

Reguła @font-face

Reguła CSS @font-face jest kluczowym elementem projektowania stron internetowych, ponieważ pozwala określać i używać niestandardowych czcionek do wyświetlania tekstu. Zaletą @font-face jest jego wszechstronność: umożliwia pobieranie czcionek z dalszego serwera lub z czcionki zainstalowanej na urządzeniu użytkownika.

Składnia

@font-face {
  font-family: "Trickster";
  src:
    local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1),
    url("trickster-outline.otf") format("opentype"),
    url("trickster-outline.woff") format("woff")
}

Deskryptory

ascent-override
Dostosowuje dane dotyczące wzrostu, wpływając na przestrzeń powyżej linii bazowej.
descent-override
Dostosowuje wskaźnik spadku, wpływając na przestrzeń poniżej linii bazowej.
font-display
Określa sposób wyświetlania czcionki w zależności od stanu jej pobierania.
font-family
Nadaje czcionce nazwę używaną w właściwościach związanych z czcionkami.
font-stretch
Określa dopuszczalne skalowanie w poziomie, określone jako 1 wartość lub zakres.
font-style
Określa styl czcionki, obsługując zakresy kątów dla stylów ukośnych.
font-weight
Określa grubość czcionki lub zakres dostępnych grubości.
font-feature-settings
Umożliwia dostęp do funkcji czcionek OpenType.
font-variation-settings
Zapewnia precyzyjną kontrolę ustawień czcionek zmiennych.
line-gap-override
Zastępuje domyślną lukę wiersza czcionki.
size-adjust
Stosuje współczynnik skalowania do konspektu i danych czcionki.
src
Określa źródło czcionki – lokalne lub zdalne. Jest to wymagane w przypadku reguły @font-face. Połączenie url()local() w ramach src to powszechna strategia, która wykorzystuje lokalną czcionkę, jeśli jest dostępna, a w przeciwnym razie przechodzi do pliku czcionki zdalnej. Przeglądarki nadają priorytety zasobach na podstawie kolejności deklaracji, więc właściwość local() powinna zwykle poprzedzać url().
unicode-range
Ogranicza znaki, do których można używać tej czcionki.

Opis

@font-face pozwala projektantom uniknąć ograniczeń związanych z czcionkami „web-safe”, ponieważ umożliwia im używanie niestandardowej typografii. Funkcja local() umożliwia wyszukiwanie czcionek na urządzeniu użytkownika, co zapewnia płynne działanie bez konieczności łączenia z internetem.

Typy czcionek MIME

Format Typ MIME
TrueType font/ttf
OpenType font/otf
Web Open Font Format font/woff
Otwarty format czcionki internetowej 2 font/woff2

Różnica między @font-face a font-family

W CSS często mylone są ze sobą elementy @font-face i font-family, ale pełnią one różne funkcje.

Jak już wspomnieliśmy, @font-face to reguła służąca do definiowania czcionek niestandardowych, których chcesz używać w aplikacji internetowej. Informuje przeglądarkę, skąd pobrać czcionkę, jak ją wyświetlić podczas wczytywania (za pomocą właściwości font-display) i określa, który podzbiór znaków pobrać (za pomocą atrybutu unicode-range).

font-family jest natomiast właściwością CSS używaną w regule CSS do przypisywania konkretnej czcionki lub listy czcionek do elementu. Czcionki wymienione w sekcji font-family mogą być czcionkami web-safe, czcionkami systemowymi lub czcionkami niestandardowymi zdefiniowanymi za pomocą @font-face.

Podsumowując, @font-face deklaruje czcionkę i nadaje jej nazwę, a font-family stosuje tę zadeklarowaną czcionkę do elementów HTML.

Oto przykład użycia obu tych metod:

<table>
  <thead>
    <tr>
      <th><p><pre>
@font-face {
  font-family: "CustomFont";
  src: url("customfont.woff2") format("woff2");
}

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

W tym przykładzie @font-face definiuje „CustomFont” i informuje przeglądarkę, gdzie go znaleźć. Właściwość font-family stosuje ją następnie do elementu body, używając czcionki Arial jako zapasowej, jeśli czcionka „CustomFont” jest niedostępna.

Zmiana kroju pisma

Obsługa przeglądarek

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Źródło

Aby zmienić krój czcionki tekstu, użyj font-family.

Właściwość font-family akceptuje listę ciągów tekstowych oddzielonych przecinkami, odwołujących się do konkretnych lub uniwersalnych rodzin czcionek. Określone rodziny czcionek są podawane w cudzysłowie, np. „Helvetica”, „EB Garamond” czy „Times New Roman”. Ogólne rodziny czcionek to słowa kluczowe takie jak serif, sans-serif i monospace (pełną listę opcji znajdziesz w MDN). Przeglądarka wyświetli pierwszą dostępną czcionkę z podanej listy.

Jeśli używasz font-family, musisz podać co najmniej jedną uniwersalną rodzinę czcionek na wypadek, gdyby przeglądarka użytkownika nie miała preferowanych czcionek. Ogólnie domyślna rodzina czcionek zastępcza powinna być podobna do preferowanych przez Ciebie czcionek: font-family: "Helvetica" (bezszeryfowa rodzina), w której kreacja zastępcza powinna mieć wartość sans-serif.

Używaj kursywy i czcionek ukośnych

Obsługa przeglądarek

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Źródło

Użyj opcji font-style, aby określić, czy tekst ma być kursywą. font-style akceptuje jedno z tych słów kluczowych: normal, italicoblique.

Pogrubienie tekstu

Obsługa przeglądarek

  • Chrome: 2.
  • Krawędź: 12.
  • Firefox: 1.
  • Safari: 1.

Źródło

Użyj font-weight, aby ustawić pogrubienie tekstu. Ta właściwość akceptuje wartości słów kluczowych (normal, bold), wartości względne słów kluczowych (lighter, bolder) i wartości liczbowe (100 do 900).

Słowa kluczowe normalbold są równoważne odpowiednio wartościom liczbowym 400700.

Słowa kluczowe lighterbolder są obliczane względem elementu nadrzędnego. Aby zobaczyć praktyczny wykres pokazujący, jak określa się tę wartość, zapoznaj się z artykułem Znaczenie wag względnych na stronie MDN.

Zmiana rozmiaru tekstu

Obsługa przeglądarek

  • Chrome: 1.
  • Krawędź: 12.
  • Firefox: 1.
  • Safari: 1.

Źródło

Użyj font-size, aby kontrolować rozmiar elementów tekstowych. Ta właściwość akceptuje wartości długości, wartości procentowe i kilka wartości słów kluczowych.

Oprócz wartości długości i procentu element font-size akceptuje niektóre bezwzględne wartości słów kluczowych (xx-small, x-small, small, medium, large, x-large, xx-large) oraz kilka względnych wartości słów kluczowych (smaller, larger). Wartości względne są wartościami względnymi do elementu nadrzędnego font-size.

Zmieniaj odstępy między wierszami

Obsługa przeglądarek

  • Chrome: 1.
  • Krawędź: 12.
  • Firefox: 1.
  • Safari: 1.

Źródło

Użyj line-height, aby określić wysokość każdego wiersza w elemencie. W tej właściwości można podać liczbę, długość, procent lub słowo kluczowe normal. Zwykle zalecamy używanie liczby zamiast długości lub procentu, aby uniknąć problemów z dziedziczeniem.

Zmień odstęp między znakami.

Obsługa przeglądarek

  • Chrome: 1.
  • Krawędź: 12.
  • Firefox: 1.
  • Safari: 1.

Źródło

Użyj letter-spacing, by określić ilość poziomego odstępu między znakami w tekście. Ta usługa akceptuje wartości długości, takie jak em, px i rem.

Pamiętaj, że podana wartość zwiększa naturalną odległość między znakami. W tym pokazie spróbuj wybrać pojedynczą kopertę, aby zobaczyć rozmiar jej okienka i jak zmienia się on wraz z wartością letter-spacing.

zmienianie odstępów między słowami,

Obsługa przeglądarek

  • Chrome: 1.
  • Krawędź: 12.
  • Firefox: 1.
  • Safari: 1.

Źródło

Użyj parametru word-spacing, aby zwiększyć lub zmniejszyć odstęp między słowami w tekście. Ta usługa akceptuje wartości długości, takie jak em, px i rem. Pamiętaj, że podana długość to dodatkowa przestrzeń dodana do normalnej odległości. Oznacza to, że word-spacing: 0 jest równoważne z word-spacing: normal.

font skrót

Aby ustawić wiele właściwości związanych z czcionką jednocześnie, możesz użyć właściwości skrótu font. Lista możliwych właściwości to font-family, font-size, font-stretch, font-style, font-variant, font-weight i line-height.

Szczegółowe informacje o tym, jak tworzyć te usługi, znajdziesz w artykule MDN font.

Zmiana wielkości liter

Obsługa przeglądarek

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Źródło

Użyj text-transform, by zmienić wielkość liter w tekście bez konieczności zmiany kodu HTML. Ta właściwość akceptuje te wartości słów kluczowych: uppercase, lowercase i capitalize.

Dodawanie podkreśleń, linii nad tekstem i linii przez tekst

Obsługa przeglądarek

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Źródło

Aby dodać wiersze do tekstu, użyj text-decoration. Najczęściej używane są podkreślenia, ale można też dodawać linie nad tekstem lub w środku tekstu.

Właściwość text-decoration to skrót do bardziej szczegółowych właściwości opisanych poniżej.

Usługa text-decoration-line akceptuje słowa kluczowe underline, overlineline-through. Możesz też określić wiele słów kluczowych dla wielu wierszy.

Właściwość text-decoration-color określa kolor wszystkich dekoracji z text-decoration-line.

Właściwość text-decoration-style akceptuje słowa kluczowe solid, double, dotted, dashedwavy.

Właściwość text-decoration-thickness akceptuje dowolne wartości długości i ustala szerokość obrysu wszystkich ozdób z text-decoration-line.

Właściwość text-decoration to skrótowy opis wszystkich powyższych właściwości.

Wstawianie wcięcia w tekście

Obsługa przeglądarek

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Źródło

Użyj text-indent, aby dodać wcięcie do bloków tekstu. Ta właściwość przyjmuje długość (np. 10px, 2em) lub procent szerokości bloku.

Zarządzanie treściami, które wystają poza ekran lub są ukryte

Obsługa przeglądarek

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 7.
  • Safari: 1.3.

Źródło

Użyj atrybutu text-overflow, aby określić sposób wyświetlania ukrytych treści. Dostępne są 2 opcje: clip (domyślna), która obcina tekst w miejscu przepełnienia, oraz ellipsis, która wyświetla wielokropek (…) w miejscu przepełnienia.

kontrolować puste miejsca;

Obsługa przeglądarek

  • Chrome: 1.
  • Krawędź: 12.
  • Firefox: 1.
  • Safari: 1.

Źródło

Właściwość white-space służy do określania sposobu obsługi odstępów w elemencie. Więcej informacji znajdziesz w artykule white-space na stronie MDN.

Pole white-space: pre może być przydatne do renderowania grafiki ASCII lub bloków kodu ze starannie wciętymi wcięciami.

Zarządzanie sposobem dzielenia słów

Obsługa przeglądarek

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 15.
  • Safari: 3.

Źródło

Użyj word-break, aby określić, w jaki sposób słowa powinny być „uszkodzone”, jeśli przekraczają linię. Domyślnie przeglądarka nie dzieli słów. Użycie wartości słowa kluczowego break-all dla atrybutu word-break spowoduje, że przeglądarka będzie w razie potrzeby rozdzielać poszczególne słowa na pojedyncze znaki.

Zmiana wyrównania tekstu

Obsługa przeglądarek

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Źródło

Aby określić wyrównanie poziome tekstu w elemencie bloku lub komórki tabeli, użyj atrybutu text-align. Ta właściwość akceptuje wartości słów kluczowych left, right, start, end, center, justify i match-parent.

Wartości leftright wyrównują tekst odpowiednio do lewej i prawej strony bloku.

Użyj elementów startend, aby wskazać położenie początku i końca wiersza tekstu w bieżącym trybie pisania. Dlatego start jest mapowane na left w języku angielskim i na right w języku arabskim, który jest zapisywany od prawej do lewej (RTL). Są to wyrównania logiczne. Więcej informacji znajdziesz w module Właściwości logiczne.

Użyj klawisza center, aby wyrównać tekst do środka bryły.

Wartość justify porządkuje tekst i automatycznie zmienia odstępy między słowami, tak aby tekst był wyrównany do lewej i prawej krawędzi bloku.

Zmiana kierunku tekstu

Obsługa przeglądarek

  • Chrome: 2.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Źródło

Użyj direction, aby ustawić kierunek tekstu: ltr (domyślnie – od lewej do prawej) lub rtl (od prawej do lewej). Niektóre języki, takie jak arabski, hebrajski czy perski, są pisane od prawej do lewej, dlatego należy użyć direction: rtl. W przypadku języka angielskiego i innych języków z zapisem od lewej do prawej użyj direction: ltr.

Zmiana przepływu tekstu

Obsługa przeglądarek

  • Chrome: 48.
  • Edge: 12.
  • Firefox: 41.
  • Safari: 10.1.

Źródło

Aby zmienić sposób płynięcia i układ tekstu, użyj writing-mode. Wartość domyślna to horizontal-tb, ale możesz też ustawić writing-mode na vertical-lr lub vertical-rl, jeśli chcesz, aby tekst był wyświetlany poziomo.

Zmiana orientacji tekstu

Obsługa przeglądarek

  • Chrome: 48.
  • Edge: 79.
  • Firefox: 41.
  • Safari: 14.

Źródło

Użyj text-orientation, aby określić orientację znaków w tekście. Prawidłowe wartości tej właściwości to mixed i upright. Ta właściwość jest istotna tylko wtedy, gdy ustawienie writing-mode ma wartość inną niż horizontal-tb.

Dodawanie cienia do tekstu

Obsługa przeglądarek

  • Chrome: 2.
  • Edge: 12.
  • Firefox: 3,5.
  • Safari: 1.1

Źródło

Aby dodać cień do tekstu, użyj text-shadow. Ta usługa wymaga 3 długości (x-offset, y-offsetblur-radius) oraz koloru.

Aby dowiedzieć się więcej, zapoznaj się z sekcją text-shadow w module dotyczącym cieni.

Czcionki zmiennych

Zazwyczaj „zwykłe” czcionki wymagają importowania różnych plików dla różnych wersji kroju pisma, takich jak pogrubienie, kursywa czy kondensacja. Fonty zmienne to fonty, które mogą zawierać wiele różnych wariantów kroju pisma w jednym pliku.

Roboto Flex w losowych kombinacjach szerokości i grubości

Więcej informacji znajdziesz w naszym artykule o czcionkach zmiennych.

Elementy pseudo

pseudoelementy ::first-letter::first-line

Obsługa przeglądarek

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Źródło

Elementy pseudo-elementów ::first-letter::first-line odnoszą się odpowiednio do pierwszej litery i pierwszej linii elementu tekstowego.

Element pseudo ::selection

Obsługa przeglądarek

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 62.
  • Safari: 1.1.

Źródło

Aby zmienić wygląd tekstu wybranego przez użytkownika, użyj pseudoelementu ::selection.

Gdy używasz tego pseudoelementu, możesz używać tylko niektórych właściwości CSS: color, background-color, text-decoration, text-shadow, stroke-color, fill-color, stroke-width.

font-variant

Obsługa przeglądarek

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Źródło

Właściwość font-variant to skrót do wielu właściwości CSS, które umożliwiają wybór wariantów czcionki, takich jak small-capsslashed-zero. Właściwości CSS, które zawiera ten skrót, to font-variant-alternates, font-variant-caps, font-variant-east-asian, font-variant-ligatures i font-variant-numeric. Aby uzyskać więcej informacji o każdej usłudze, kliknij linki.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o typografii w internecie

Które z tych słów kluczowych można stosować jako ogólne słowo kluczowe font-family?

sans-serif
italic
sci-fi
monospace
helvetica
serif

Która instrukcja służy do zamiany pierwszej litery każdego słowa na wielką literę? np. This is a sentence.This Is A Sentence.

font-variant: capitalize;
text-capitalize: true;
font-style: capitals;
text-transform: capitalize;
text-case: capitalize;

Prawda lub fałsz: użyj text-orientation, aby wyrównać tekst do lewej, prawej lub środka.

Fałsz
Prawda

Której właściwości CSS można użyć do zmiany odstępów między wierszami tekstu?

line-spacing
line-height
baseline-distance
leading

Zasoby