Dziękujemy za zainteresowanie konferencją Google I/O. Oglądanie treści na żądanie.

Ta strona została przetłumaczona przez Cloud Translation API.

Tekst i typografia

Podcast CSS – 036: Text &Typeography

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-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 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() i 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

Tekst i typografia

Podcast CSS – 036: Text &Typeography

Reguła @font-face

Składnia

Deskryptory

Opis

Typy czcionek MIME

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

Zmiana kroju pisma

Używaj kursywy i czcionek ukośnych

Pogrubienie tekstu

Zmiana rozmiaru tekstu

Zmieniaj odstępy między wierszami

Zmień odstęp między znakami.

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

font skrót

Zmiana wielkości liter

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

Wstawianie wcięcia w tekście

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

kontrolować puste miejsca;

Zarządzanie sposobem dzielenia słów

Zmiana wyrównania tekstu

Zmiana kierunku tekstu

Zmiana przepływu tekstu

Zmiana orientacji tekstu

Dodawanie cienia do tekstu

Czcionki zmiennych

Elementy pseudo

pseudoelementy ::first-letter i ::first-line

Element pseudo ::selection

font-variant

Sprawdź swoją wiedzę

Zasoby

Reguła `@font-face`

`font` skrót

pseudoelementy `::first-letter` i `::first-line`

Element pseudo `::selection`