Podcast o CSS – 036: tekst i typografia
Tekst to jeden z podstawowych elementów internetu.
Tworząc stronę internetową, nie musisz dostosowywać stylu tekstu. W rzeczywistości HTML ma dość rozsądny styl domyślny.
Jednak tekst będzie prawdopodobnie zajmować większość strony, dlatego warto go urozmaicić, dodając do niego elementy stylu. Zmieniając kilka podstawowych właściwości, możesz znacznie poprawić komfort czytania.
W tym module przyjrzymy się najpierw kilku podstawowym właściwościom czcionek CSS, takim jak font-family, font-style, font-weight i font-size. Następnie omówimy właściwości, które mają wpływ na akapity tekstu, np. text-indent i word-spacing. Na zakończenie modułu dowiesz się więcej o bardziej zaawansowanych tematach, takich jak zmienne czcionki i pseudoelementy.
Zmiana kroju czcionki
Użyj font-family, aby zmienić krój czcionki tekstu.
Właściwość font-family akceptuje oddzieloną przecinkami listę ciągów tekstowych odnoszących się do konkretnych lub ogólnych rodzin czcionek. Konkretne rodziny czcionek są ujęte w cudzysłowy ciągi znaków, takie jak „H trafiające do klientów”, „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 pierwszy dostępny krój czcionki z listy.
Podczas korzystania z font-family należy określić co najmniej 1 ogólną rodzinę czcionek na wypadek, gdyby w przeglądarce użytkownika nie były dostępne preferowane czcionki. Ogólnie rzecz biorąc, zastępcza rodzina czcionek powinna być podobna do preferowanych czcionek: jeśli używasz czcionki font-family: "Helvetica" (rodzina czcionek bezszeryfowych), wartość zastępcza powinna mieć postać sans-serif.
Używanie kursywy i czcionek ukośnych
Aby określić, czy tekst ma być pisany kursywą, użyj font-style. font-style akceptuje jedno z tych słów kluczowych: normal, italic i oblique.
Pogrubienie tekstu
Użyj font-weight, aby ustawić pogrubienie tekstu. Ta właściwość akceptuje wartości słów kluczowych (normal, bold), względne wartości słów kluczowych (lighter, bolder) oraz wartości liczbowe (od 100 do 900).
Słowa kluczowe normal i bold są odpowiednikami liczbowymi 400 i 700.
Słowa kluczowe lighter i bolder są obliczane względem elementu nadrzędnego. Przydatny wykres ilustrujący sposób określania tej wartości znajduje się w sekcji Znaczenie ciężarów względnych w MDN.
Zmiana rozmiaru tekstu
Aby kontrolować rozmiar elementów tekstowych, użyj font-size. Ta właściwość akceptuje wartości długości, wartości procentowe i kilka wartości słów kluczowych.
Oprócz długości i wartości procentowych font-size akceptuje też 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ą względne wobec font-size elementu nadrzędnego.
Zmienianie odstępów między wierszami
Użyj line-height, aby określić wysokość każdego wiersza w elemencie. Ta właściwość może zawierać liczbę, długość, wartość procentową lub słowo kluczowe normal. Ogólnie zalecamy użycie liczby zamiast długości lub wartości procentowej, aby uniknąć problemów z dziedziczeniem.
Zmienianie odstępów między znakami
Użyj letter-spacing, aby określić ilość odstępu w poziomie między znakami w tekście. Ta właściwość akceptuje wartości długości, takie jak em, px i rem.
Pamiętaj, że podana wartość zwiększa ilość naturalnej przestrzeni między znakami. W poniższej wersji demonstracyjnej zaznacz pojedynczą literę, aby zobaczyć rozmiar jej pola letterbox i jak zmienia się on po wpisaniu letter-spacing.
Zmienianie odstępów między słowami
Za pomocą word-spacing możesz zwiększać lub zmniejszać odstęp między poszczególnymi słowami w tekście. Ta właściwość akceptuje wartości długości, takie jak em, px i rem. Pamiętaj, że podana przez Ciebie długość obejmuje dodatkowe odstępy, a nie tylko normalne odstępy. Oznacza to, że word-spacing: 0 jest odpowiednikiem funkcji word-spacing: normal.
font – skrót
Możesz użyć skróconej właściwości font, by ustawić wiele właściwości związanych z czcionkami naraz. Lista możliwych właściwości to font-family, font-size, font-stretch, font-style, font-variant, font-weight i line-height.
Aby dowiedzieć się, jak zamawiać te usługi, zapoznaj się z artykułem font w MDN.
Zmiana wielkości liter w tekście
Aby zmienić wielkość liter w tekście bez konieczności zmiany kodu HTML, użyj text-transform. Ta właściwość akceptuje te wartości słów kluczowych: uppercase, lowercase i capitalize.
Dodawanie do tekstu podkreśleń, linii tekstu i przekreśleń
Użyj text-decoration, aby dodać wiersze do tekstu. Najczęściej używa się podkreśleń, ale możesz też dodać wiersze nad tekstem lub bezpośrednio przez niego.
Właściwość text-decoration to skrót odnoszący się do bardziej szczegółowych właściwości opisanych poniżej.
Właściwość text-decoration-line akceptuje słowa kluczowe underline, overline i line-through. Możesz też podać wiele słów kluczowych w wielu wierszach.
Właściwość text-decoration-color określa kolor wszystkich dekoracji od 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 ustawia szerokość kreski wszystkich dekoracji od text-decoration-line.
Właściwość text-decoration to skrót odnoszący się do wszystkich powyższych właściwości.
Dodawanie wcięcia do tekstu
Użyj text-indent, aby dodać wcięcie do bloków tekstu. Ta właściwość przyjmuje długość (np. 10px, 2em) lub wartość procentową szerokości bloku zawierającego.
Radzenie sobie z treściami, które przepełniają się lub są ukryte
Aby określić sposób wyświetlania ukrytej treści, użyj wartości text-overflow. Dostępne są 2 opcje: clip (domyślna), która obcina tekst w miejscu przepełnienia, i ellipsis, która wyświetla wielokropek (...) w miejscu przepełnienia.
Sterowanie odstępem
Właściwość white-space określa sposób obsługi odstępów w elemencie. Więcej informacji znajdziesz w artykule white-space na stronie MDN.
white-space: pre może być przydatny do renderowania grafiki ASCII lub bloków kodu z odpowiednimi wcięciami.
Kontrolowanie podziału słów
Użyj word-break, aby zmienić sposób usuwania słów, które wykraczają poza granicę. Domyślnie przeglądarka nie dzieli słów. Użycie wartości słowa kluczowego break-all w przypadku word-break spowoduje, że w razie potrzeby przeglądarka będzie przerywać poszczególne słowa w poszczególnych znakach.
Zmiana wyrównania tekstu
text-align pozwala określić wyrównanie tekstu w poziomie w elemencie bloku lub komórki tabeli. Ta właściwość akceptuje wartości słów kluczowych left, right, start, end, center, justify i match-parent.
Wartości left i right wyrównują tekst do lewej i prawej strony bloku.
Użyj start i end, aby określić lokalizację początku i końca wiersza tekstu w bieżącym trybie pisania. Dlatego zapis start jest mapowany na język left w języku angielskim i na język right w alfabecie arabskim pisany od prawej do lewej (RTL). Są to dopasowania logiczne – więcej informacji znajdziesz w module właściwości logicznych.
Użyj center, aby wyrównać tekst do środka bryły.
Wartość justify porządkuje tekst i automatycznie zmienia odstępy między słowami, aby tekst był wyrównany względem lewej i prawej krawędzi bryły.
Zmiana kierunku tekstu
Użyj direction, aby ustawić kierunek tekstu: ltr (od lewej do prawej, domyślny) lub rtl (od prawej do lewej). Niektóre języki, np. arabski, hebrajski czy perski, są pisane od prawej do lewej, więc należy używać direction: rtl. W przypadku angielskiego i pozostałych języków pisanych od lewej do prawej użyj direction: ltr.
Zmień przepływ tekstu
Użyj writing-mode, aby zmienić sposób przepływu i układu tekstu. Wartość domyślna to horizontal-tb, ale w przypadku tekstu, który chcesz wyświetlać w poziomie, możesz też ustawić writing-mode na vertical-lr lub vertical-rl.
Zmiana orientacji tekstu
Użyj text-orientation, aby określić orientację znaków w tekście. Prawidłowe wartości dla tej właściwości to mixed i upright. Ta właściwość jest stosowana tylko wtedy, gdy dla parametru writing-mode jest ustawiona wartość inna niż horizontal-tb.
Dodawanie cienia do tekstu
Użyj text-shadow, aby dodać cień do tekstu. Ta właściwość wymaga 3 długości (x-offset, y-offset i blur-radius) oraz koloru.
Więcej informacji znajdziesz w sekcji text-shadow w module o cieniu.
Zmienne czcionki
Zwykle „zwykłe” czcionki wymagają importowania różnych plików z różnymi wersjami kroju pisma, np. pogrubieniem, kursywą lub skondensowaniem. Czcionki zmienne to czcionki, które mogą zawierać wiele różnych wariantów kroju czcionki w jednym pliku.
Aby dowiedzieć się więcej, zapoznaj się z naszym artykułem o zmiennych czcionkach.
Pseudoelementy
Pseudoelementy ::first-letter i ::first-line
Pseudoelementy ::first-letter i ::first-line są kierowane odpowiednio na pierwszą literę i pierwszy wiersz elementu tekstowego.
Pseudoelement ::selection
Aby zmienić wygląd tekstu wybranego przez użytkownika, użyj pseudoelementu ::selection.
Podczas korzystania z tego pseudoelementu można stosować tylko określone 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 właściwości szeregu właściwości CSS umożliwiających wybór wariantów czcionek, takich jak small-caps i slashed-zero. Właściwości CSS, które obejmuje ten skrót, to font-variant-alternates, font-variant-caps, font-variant-east-asian, font-variant-ligatures i font-variant-numeric. Aby dowiedzieć się więcej o korzystaniu z poszczególnych usług, kliknij linki.
Sprawdź swoją wiedzę
Sprawdź swoją wiedzę o typografii w internecie
Które z tych słów kluczowych może być ogólną opcją font-family zastępczej?
serifmonospaceitalicitalic to prawidłowe słowo kluczowe dla font-style, a nie font-family.sci-fifantasy jest jednak prawidłową ogólną wartością zastępczą dla elementu font-family.sans-serifhelvetica"Helvetica" nie jest ogólnym słowem kluczowym, ale odnosi się do konkretnej rodziny czcionek.Które stwierdzenie pozwala zmienić pierwszą literę każdego słowa na wielkie litery? np. This is a sentence. ➡ This Is A Sentence.
text-capitalize: true;text-case: capitalize;text-transform: capitalize;font-style: capitals;font-variant: capitalize;Prawda czy fałsz: za pomocą text-orientation możesz wyrównać tekst do lewej, prawej lub do środka.
text-orientation zmienia obrót liter w wierszu.text-orientation zmienia obrót liter w wierszu. Użyj text-align, aby wyrównać tekst do lewej, do prawej lub do środka (i innych).Której właściwości CSS można użyć do zmiany odstępu między wierszami tekstu?
line-spacingleadingbaseline-distanceline-heightZasoby
- Sprawdzone metody dotyczące czcionek zawierają omówienie importowania i renderowania czcionek oraz innych sprawdzonych metod korzystania z czcionek w internecie.
- Podstawowe style tekstu i czcionek w MDN.