The CSS Podcast - 036: Text & Typography
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. Wystarczy zmienić kilka podstawowych właściwości, aby znacznie poprawić wrażenia użytkowników podczas 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 w CSS, takie jak font-family
, font-style
, font-weight
i font-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-indent
i word-spacing
, a na koniec zaawansowane tematy, takie jak czcionki zmienne 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 at-rule w CSS @font-face
jest bardzo przydatna w projektowaniu stron internetowych, ponieważ umożliwia określanie i używanie czcionek niestandardowych 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, który wpływa 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
- Nazwa czcionki do użycia w właściwościach związanych z czcionką.
font-stretch
- Ustawia akceptowalne skalowanie poziome, określone jako pojedyncza wartość lub zakres.
font-style
- Określa styl czcionki, obsługując zakresy kątów dla stylów pochyłych.
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ślny odstęp między wierszami czcionki.
size-adjust
- Stosuje współczynnik skalowania do konturów i danych czcionki.
src
- Określa źródło czcionki (lokalne lub zdalne). Jest to wymagane w przypadku reguły
@font-face
. Połączenieurl()
ilocal()
w ramachsrc
to powszechna strategia, która wykorzystuje czcionkę lokalną (jeśli jest dostępna), a w przeciwnym razie przechodzi do pliku czcionki zdalnej. Przeglądarki przypisują priorytet zasobom na podstawie kolejności ich deklaracji, więclocal()
powinna zwykle poprzedzaćurl()
. unicode-range
- Ogranicza znaki, do których można używać tej czcionki.
Opis
@font-face
zwalniają projektantów z obowiązku stosowania czcionek „web-safe”, umożliwiając im korzystanie z 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 MIME czcionek
Format | Typ MIME |
---|---|
TrueType | font/ttf |
OpenType | font/otf |
Web Open Font Format | font/woff |
Web Open Font Format 2 | font/woff2 |
Różnica między @font-face a font-family
W CSS często myli się @font-face
i font-family
, ale mają one różne przeznaczenie.
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
).
Z kolei font-family
to właściwość CSS używana w regułach CSS do przypisywania elementowi określonej czcionki lub listy czcionek. 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ę 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
Aby zmienić czcionkę tekstu, kliknij 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. Zazwyczaj substytucyjna ogólna rodzina czcionek powinna być podobna do preferowanych czcionek: jeśli używasz font-family: "Helvetica"
(rodzina czcionek bezszeryfowego), substytucyjna rodzina czcionek powinna być sans-serif
.
Używanie czcionek pochyłych i ukośnych
Użyj opcji font-style
, aby określić, czy tekst ma być kursywą. font-style
akceptuje jedno z tych słów kluczowych: normal
, italic
i oblique
.
Pogrubienie tekstu
Użyj font-weight
, aby ustawić „wytłuszczenie” 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 normal
i bold
są równoważne odpowiednio wartościom liczbowym 400
i 700
.
Słowa kluczowe lighter
i bolder
są obliczane względem elementu nadrzędnego. Więcej informacji o tym, jak określa się tę wartość, znajdziesz w artykule O znaczeniu względnych wag na stronie MDN.
Zmiana rozmiaru tekstu
Użyj font-size
, aby kontrolować rozmiar elementów tekstowych. Ta właściwość akceptuje wartości długości, procenty 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
.
Zmień odstęp między wierszami
Użyj atrybutu line-height
, aby określić wysokość poszczególnych linii 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.
Użyj znaku letter-spacing
, aby kontrolować poziomy odstęp 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 wybierz pojedynczą kopertę, aby zobaczyć rozmiar jej okienka i sposób, w jaki zmienia się on w zależności od letter-spacing
.
Zmienianie odstępów między słowami
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: font-family
, font-size
, font-stretch
, font-style
, font-variant
, font-weight
i line-height
.
Szczegółowe informacje o tym, jak zamówić te usługi, znajdziesz w artykule font
w witrynie MDN.
Zmiana wielkości liter
Użyj tagu text-transform
, aby 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
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
, overline
i line-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
, dashed
i wavy
.
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ót do wszystkich wymienionych powyżej właściwości.
Dodawanie wcięcia do tekstu
Aby wstawić wcięcie do bloków tekstu, użyj text-indent
. 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
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.
Kontrolowanie pustych przestrzeni
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.
white-space: pre
może być przydatna do renderowania grafik ASCII lub starannie wcisniętej bloki kodu.
Zarządzanie sposobem dzielenia słów
Użyj opcji word-break
, aby zmienić sposób „łamania” słów, gdy wystają poza wiersz. Domyślnie przeglądarka nie dzieli słów. Użycie wartości słowa kluczowego break-all
zamiast word-break
spowoduje, że w razie potrzeby przeglądarka będzie dzielić słowa na poszczególne znaki.
Zmiana wyrównania tekstu
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 left
i right
odpowiednio wyrównują tekst do lewej i prawej strony bloku.
Użyj elementów start
i end
, 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.
Aby wyrównać tekst do środka bloku, użyj center
.
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
Użyj opcji direction
, aby ustawić kierunek tekstu: ltr
(od lewej do prawej, domyślnie) 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
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
Użyj znaku 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ść ma znaczenie tylko wtedy, gdy element writing-mode
ma wartość inną niż horizontal-tb
.
Dodawanie cienia do tekstu
Aby dodać cień do tekstu, użyj text-shadow
. Ta usługa wymaga 3 długości (x-offset
, y-offset
i blur-radius
) oraz koloru.
Aby dowiedzieć się więcej, zapoznaj się z sekcją text-shadow
w module dotyczącym cieni.
czcionki zmienne,
„Normalne” czcionki wymagają zwykle importowania różnych plików dla różnych wersji kroju pisma, np. pogrubionych, kursywnych lub skompresowanych. Fonty zmienne to fonty, które mogą zawierać wiele różnych wariantów kroju pisma w jednym pliku.
Więcej informacji znajdziesz w tym artykule o czcionkach zmiennych.
Elementy pseudo
pseudoelementy ::first-letter
i ::first-line
Elementy pseudo-elementów ::first-letter
i ::first-line
kierują się odpowiednio na pierwszą literę i pierwszą linię elementu tekstowego.
Element pseudo ::selection
Aby zmienić wygląd tekstu wybranego przez użytkownika, użyj pseudoelementu ::selection
.
Podczas korzystania z tego pseudoelementu można używać tylko określonych właściwości CSS: color
, background-color
, text-decoration
, text-shadow
, stroke-color
, fill-color
, stroke-width
.
font-variant
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-caps
i slashed-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
?
serif
monospace
sci-fi
helvetica
sans-serif
italic
Która instrukcja służy do zamiany pierwszej litery każdego słowa na wielką?This is a sentence.
This Is A Sentence.
text-transform: capitalize;
font-style: capitals;
font-variant: capitalize;
text-capitalize: true;
text-case: capitalize;
Prawda lub fałsz: użyj text-orientation
, aby wyrównać tekst do lewej, prawej lub środka.
Której właściwości CSS można użyć, aby zmienić odstęp między wierszami tekstu?
baseline-distance
leading
line-spacing
line-height
Zasoby
- W artykule Sprawdzone metody dotyczące czcionek znajdziesz informacje o importowaniu i renderowaniu czcionek oraz inne sprawdzone metody używania czcionek w internecie.
- MDN – styl tekstu i czcionki.