Stylowanie tekstu w CSS: czcionki, rozmiar, grubość, podkreślenie, wyrównanie
Plac zabaw do stylowania tekstu CSS
Tekst w CSS: czcionka, rozmiar, pogrubienie, podkreślenie | We.Inc
Jeden interaktywny plac zabaw dla tekstu CSS: krój pisma, rozmiar w px, rem lub clamp(), grubość, styl podkreślenia, wyrównanie, interlinia i odstępy, razem z klasami Tailwind.
Tekst w CSS stylujesz kilkoma właściwościami: font-family wybiera krój pisma, font-size ustala rozmiar (najlepiej w rem), font-weight: 700 pogrubia, text-decoration dodaje podkreślenie, a text-align: center wyśrodkowuje. line-height i letter-spacing kontrolują odstępy. Zmień dowolną z nich na placu zabaw poniżej i skopiuj CSS.
Właściwości, których użyjesz najczęściej
Cel
CSS
Tailwind
Pogrubienie
font-weight: 700
Kursywa
font-style: italic
Podkreślenie
text-decoration: underline
Wyśrodkowanie tekstu
text-align: center
Większy tekst
font-size: 1.25rem
Luźniejsze linie
line-height: 1.6
leading-relaxed (1.625)
Zamiast sześciu osobnych stron z dokumentacją ten jeden plac zabaw obejmuje razem krój, rozmiar, grubość, styl, szczegóły podkreślenia, wyrównanie, interlinię i odstępy między literami, generuje CSS i klasy Tailwind na bieżąco i dodaje sprawdzone przepisy na wyśrodkowanie tekstu, stosy czcionek i ładowanie fontów webowych.
Wpisz własne zdanie na placu zabaw albo zostaw przykładowy tekst.
Zmień ustawienia kroju, jednostki rozmiaru, grubości, dekoracji i odstępów. Podgląd i CSS aktualizują się natychmiast.
Skopiuj blok CSS albo klasy Tailwind dla tych samych ustawień.
Skorzystaj z przepisów poniżej na wyśrodkowanie, stosy czcionek i @font-face.
Tekst główny czyta się najlepiej przy około 16 do 18 pikselach, z interlinią od 1.5 do 1.7 i liniami mającymi mniej więcej od 60 do 75 znaków.
Ustawiaj rozmiary czcionek w rem, aby podążały za ustawieniem przeglądarki czytelnika. Używaj clamp() dla nagłówków, które mają rosnąć razem z ekranem.
Ładuj tylko te grubości czcionki, których używasz. Każda dodatkowa grubość fontu webowego to kolejny plik do pobrania.
Nie podkreślaj tekstu, który nie jest linkiem. Czytelnicy oczekują, że podkreślone słowa są klikalne.
Najczęściej zadawane pytania
Jak pogrubić tekst w CSS?
Użyj font-weight: bold albo liczby, na przykład 600 lub 700. Liczby od 100 do 900 wybierają spośród grubości dostępnych w danym kroju. Jeśli krój ma tylko grubość regularną, przeglądarka udaje pogrubienie, zagęszczając litery, co wygląda ciężej i mniej ostro niż prawdziwy plik pogrubiony.
Jak wyśrodkować tekst w pionie?
text-align wyśrodkowuje tylko w poziomie. Aby wyśrodkować w pionie wewnątrz pudełka, zrób z niego kontener flex lub grid: display: grid; place-items: center; wyśrodkowuje tekst w obu kierunkach w jednej linii. Dla pojedynczej linii w pasku o stałej wysokości działa też line-height równy wysokości paska.
Jak zmienić kolor lub grubość podkreślenia?
Użyj text-decoration-color, text-decoration-thickness i text-underline-offset. Na przykład text-decoration: underline; text-decoration-color: #4F98FB; text-decoration-thickness: 2px; text-underline-offset: 4px; daje grubsze niebieskie podkreślenie z odstępem pod literami.
Czy line-height powinien mieć jednostkę?
Zwykle nie. Wartość bez jednostki, taka jak 1.5, jest mnożona przez rozmiar czcionki każdego elementu, więc nagłówki i drobny druk wewnątrz bloku zachowują rozsądne odstępy. Stała wartość, taka jak 24px, jest dziedziczona bez zmian i może ścisnąć większy tekst.
Czym jest stos czcionek?
To lista czcionek oddzielonych przecinkami w font-family. Przeglądarka używa pierwszej dostępnej i przechodzi w dół listy, jeśli jej brakuje, kończąc na rodzinie ogólnej, takiej jak sans-serif lub serif, która zawsze istnieje.
Jednostki rozmiaru: px, rem i clamp()
Piksele dają dokładny rozmiar, który ignoruje preferowany rozmiar tekstu czytelnika. rem jest względny wobec rozmiaru czcionki elementu głównego, domyślnie 16px, więc 1.125rem to dla większości osób 18px, a rośnie u czytelników, którzy ustawili większą wartość domyślną.
clamp(min, preferred, max) służy do rozmiarów, które mają skalować się z oknem. clamp(1.75rem, 1.2rem + 2.5vw, 3rem) nigdy nie jest mniejszy niż 28px ani większy niż 48px i płynnie przechodzi pomiędzy. Zostaw część w rem w wartości środkowej, aby powiększenie przeglądarki i ustawienia tekstu nadal działały.
Czytelne ustawienia domyślne
Większość problemów z czytaniem wynika z trzech ustawień: zbyt małego tekstu, zbyt długich linii i zbyt ciasno upakowanych linii. max-width około 65ch dla akapitów, rozmiar czcionki co najmniej 1rem i interlinia bliska 1.6 rozwiązują większość z nich jeszcze przed jakimkolwiek stylowaniem.
Duże nagłówki potrzebują czegoś odwrotnego: ciaśniejszej interlinii, około 1.1 do 1.2, i często lekko ujemnego letter-spacing. Małe etykiety pisane wielkimi literami czyta się lepiej z niewielkim dodatnim letter-spacing.
Ładowanie fontów webowych bez spowalniania strony
Każdy font webowy to plik do pobrania, który może opóźnić tekst. font-display: swap od razu pokazuje czcionkę zastępczą i podmienia ją, gdy dotrze font webowy, więc czytelnicy nigdy nie patrzą na niewidoczny tekst. Hostowanie plików WOFF2 u siebie pozwala uniknąć połączenia z inną domeną.
Jeśli używasz Google Fonts, pobieraj w jednym linku tylko potrzebne rodziny i grubości oraz dodaj sugerowane wskazówki preconnect. Wybór czcionki zastępczej o podobnych proporcjach zmniejsza skok, gdy font zostanie podmieniony.
Wyśrodkowanie tekstu w poziomie i w pionie
W poziomie: text-align
text-align wyśrodkowuje linie wewnątrz bloku. Aby wyśrodkować sam blok, nadaj mu szerokość i margin-inline: auto.
W obu kierunkach: grid z place-items
Dwie linie CSS na kontenerze wyśrodkowują dowolną treść w obu kierunkach, niezależnie od jej rozmiaru.
Podkreślenia, które wyglądają na zaprojektowane
Kolor, grubość, przesunięcie i styl
Właściwości dekoracji zmieniają podkreślenie bez ruszania koloru tekstu. text-decoration-skip-ink sprawia, że linie nie przecinają dolnych wydłużeń liter.
Ładowanie czcionki przez @font-face lub Google Fonts
Czcionka hostowana u siebie przez @font-face
Wskaż w src swój plik WOFF2. Jeden blok na każdą grubość i styl, których faktycznie używasz.
Link do Google Fonts
Pobieraj tylko używane grubości. display=swap ustawia za Ciebie font-display.
Czytelne ustawienia na start
Mała, rozsądna baza dla tekstu
Rozmiar tekstu głównego, interlinia i szerokość wiersza ustawione raz; nagłówki ciaśniej. Dostosuj kolory i rozmiary do swojego projektu.
Odpowiedniki w Tailwind
CSS i odpowiadające mu klasy Tailwind (domyślny motyw)