Moduł 2 - Zajęcia 4 - Tekst i czcionka

1.1 Dekoracja tekstu

Tekst jest główną treścią stron internetowych i istnieje wiele różnych właściwości CSS, które są używane na co dzień do nadawania mu dekoracji.

1.2 Właściwość text-decoration

Ustawia różne dekoracyjne podkreślenia i inne efekty tekstowe.

            text-decoration: none | underline | line-through | overline

Arkusz stylów z przeglądarki ustawia znaczenie większości elementów na none, czyli wyłączone. Ale na przykład linki mają domyślnie underline.

            <h1 class="title">Iste odit similique sit</h1>
            <p class="text">
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Obcaecati commodi,
              <span>veritatis nihil alias iste</span> odit similique sit eius optio veniam,
              impedit cumque fuga facere labore quo id necessitatibus quaerat rerum.
            </p>
            <a href="" class="link">Czytaj więcej...</a>

            .text > span {
              text-decoration: line-through;
            }

            .link {
              text-decoration: none;
            }

Przykład:

text-decoration: none underline-solid line-through-solid overline-solid underline-dotted underline-dashed underline-double underline-wavy

1.3 Właściwość text-transform

Kontroluje wielkość liter w tekście, na przykład możemy za pomocą tej właściwości zrobić wszystkie litery wielkie. W znacznikach tekst zawsze wpisujemy zgodnie z regułami języka. Następnie za pomocą funkcji text-transform, zostaje poprawiany do pożądanej formy ponieważ wszystkie zmiany wyglądu odbywają się za pomocą CSS.

            text-transform: none | uppercase | lowercase | capitalize

Przykład:

Text-Transform none Text-Transform uppercase Text-Transform lowercase Text-Transform capitalize

1.4 Właściwość text-align

Steruje wyrównaniem w poziomie zawartości tekstowej elementu.

            text-align: left | right | center | justify

Domyślnie tekst jest wyrównany do lewej (wartość left).

            <div>
              <h6 class="post-title">Lorem ipsum dolor sit amet</h6>
              <p>
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Obcaecati commodi, veritatis
                nihil alias iste odit similique sit eius optio veniam, impedit cumque fuga facere
                labore quo id necessitatibus quaerat rerum.
              </p>
              <p class="align-right">
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Obcaecati commodi,
                veritatis nihil alias iste odit similique sit eius optio veniam, impedit
                cumque fuga facere labore quo id necessitatibus quaerat rerum.
              </p>
              <p class="align-justify">
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Obcaecati commodi,
                veritatis nihil alias iste odit similique sit eius optio veniam, impedit
                cumque fuga facere labore quo id necessitatibus quaerat rerum.
              </p>
            </div>

Wycentrujemy tekst nagłówka i wyrównamy tekst akapitu do prawej i równomiernie.

            .post-title {
              text-align: center;
            }

            .align-right {
              text-align: right;
            }

            .align-justify {
              text-align: justify;
            }

Lorem ipsum dolor sit amet

Uwaga: Używanie wartości justify nie jest dobrym pomysłem. Chociaż tekst jest dociskany równomiernie do lewej i prawej krawędzi bloku, jego czytelność jest znacznie ograniczona. Dzieje się tak, ponieważ odstępy między słowami mają różną szerokość, co negatywnie wpływa na postrzeganie tekstu.

1.5 Właściwość text-indent

Ustawia wielkość wcięcia pierwszego wiersza bloku tekstu, na przykład akapitu. Nie wpływa na wszystkie inne wiersze z wyjątkiem pierwszej.

            text-indent: wartość | procent | inherit

Dowolne jednostki długości są akceptowane jako wartości, na przykład piksele (px). W przypadku ustawienia wartości w procentach wcięcie jest obliczane w zależności od szerokości bloku.

            <div>
              <h6>Lorem ipsum dolor sit amet</h6>
              <p class="post-text-px">
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Obcaecati commodi,
                veritatis nihil alias iste odit similique sit eius optio veniam, impedit
                cumque fuga facere labore quo id necessitatibus quaerat rerum.Obcaecati
                commodi, veritatis nihil alias iste odit similique sit eius optio veniam,
                impedit cumque fuga facere labore quo id necessitatibus quaerat rerum.
              </p>
              <p class="post-text-percent">
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Obcaecati commodi,
                veritatis nihil alias iste odit similique sit eius optio veniam, impedit
                cumque fuga facere labore quo id necessitatibus quaerat rerum.Obcaecati
                commodi, veritatis nihil alias iste odit similique sit eius optio veniam,
                impedit cumque fuga facere labore quo id necessitatibus quaerat rerum.
              </p>
            </div>

            .post-text-px {
              text-indent: 100px;
            }
            .post-text-percent {
              text-indent: 10%;
            }

Przykład:

Lorem ipsum dolor sit amet

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Obcaecati commodi, veritatis nihil alias iste odit similique sit eius optio veniam, impedit cumque fuga facere labore quo id necessitatibus quaerat rerum.Obcaecati commodi, veritatis nihil alias iste odit similique sit eius optio veniam, impedit cumque fuga facere labore quo id necessitatibus quaerat rerum.

1.6 Właściwość line-height

Ustawia odstępy między wierszami (interlinia, wysokość wiersza) tekstu. Domyślnie odstępy między wierszami zależą od rodzaju czcionki i jej rozmiaru i są określane automatycznie przez przeglądarkę.

            line-height: mnożnik | wartość | procent | normal | inherit

Wartość można określić w jednostkach bezwzględnych lub względnych oraz w mnożniku. Najlepiej ustawić wartość jako mnożnik, wtedy interlinia jest obliczana na podstawie aktualnego rozmiaru czcionki tekstu.

Na przykład, jeśli rozmiar czcionki w układzie to 16px a interlinia 24px, po prostu dzielimy 24 przez 16 i uzyskamy mnożnik 1.5. Użycie mnożnika zapewnia równomierne skalowanie odstępów między wierszami w przypadku zmiany rozmiaru tekstu.

Przykład:

.text {
font-size: 16px;
line-height: 1.5;
}

.text {
font-size: 16px;
line-height: 1;
}

.text {
font-size: 16px;
line-height: 2;
}

.text {
font-size: 16px;
line-height: 20px;
}

.text {
font-size: 16px;
line-height: 10px;
}

1.7 Właściwość letter-spacing

Określa odstępy między znakami. Domyślnie odległość między znakami jest ustalana na podstawie rodzaju i typu czcionki, jej rozmiaru oraz ustawień systemu operacyjnego.

            letter-spacing: wartość | normal | inherit

Czasami projektanci ustawiają niestandardową wartość odstępów między znakami i dlatego istnieje właściwość letter-spacing.

Przykład:

.letter-spacing {
letter-spacing: normal;
}

.letter-spacing {
letter-spacing: 10px;
}

.letter-spacing {
letter-spacing: 5px;
}

1.8 Właściwość word-spacing

Określa odstępy między wyrazami. Domyślnie odległość między słowami jest ustalana na podstawie typu i rodzaju czcionki, jej rozmiaru oraz ustawień systemu operacyjnego.

            word-spacing: wartość | normal | inherit

Przykład:

word-spacing: normal | Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas aspernatur nulla repellat, voluptatem voluptate iure deserunt, repudiandae adipisci a deleniti ad fuga dolore temporibus fugit, dolores iusto facere tempora. A!

word-spacing: 20px | Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas aspernatur nulla repellat, voluptatem voluptate iure deserunt, repudiandae adipisci a deleniti ad fuga dolore temporibus fugit, dolores iusto facere tempora. A!

word-spacing: 10px | Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas aspernatur nulla repellat, voluptatem voluptate iure deserunt, repudiandae adipisci a deleniti ad fuga dolore temporibus fugit, dolores iusto facere tempora. A!

1.9 Właściwość text-shadow

Steruje cieniem tekstu, a także ustawia jego parametry: kolor, przesunięcie i promień rozmycia.

            text-shadow: <przesunięcie wzdłuż osi x>, <przesunięcie wzdłuż osi y>, <promień rozmycia>, <kolor>

kolor - można określić w dowolnym formacie. Domyślnie kolor cienia jest taki sam jak kolor tekstu.
przesunięcie wzdłuż osi x - poziome przesunięcie cienia względem tekstu. Pozytywna wartość określa przesunięcie cienia w prawo, ujemna - w lewo.
przesunięcie wzdłuż osi y - pionowe przesunięcie cienia względem tekstu. Pozytywna wartość ustawia przesunięcie cienia w dół, ujemna - w górę.
promień rozmycia - im wyższa wartość, tym bardziej cień jest rozmyty i staje się jasniejszy. Domyślnie, jeśli nie jest ustawiony, będzie 0.

Zróbmy biały tekst z ciemnym cieniem. Aby to zrobić, ustawimy przesunięcie X i Y na 2px, promień rozmycia na 4px i czarny kolor cienia.

            .title {
              color: #ffffff;
              text-shadow: 2px 2px 4px #000000;
            }

1.10 Warstwowy efekt cienia

Można dodać wiele cieni do jednego elementu, oddzielając je przecinkami.

Kolejność wyświetlania jest następująca - pierwszy cień na liście jest umieszczony na samej górze, ostatni - na samym dole. Oznacza to, że im wcześniej cień zostanie określony, tym wyżej będzie się znajdował w warstwach i będzie wizualnie nakładał się na wszystkie kolejne.

Przykład:

            .text-shadow {
              color: #ffffff;
              text-shadow: 2px 2px 20px #ff0000, 5px 5px 5px #000000;
            }

1.11 Właściwość white-space

Domyślnie przeglądarka ignoruje więcej niż jedną spację i podział wiersza w znacznikach HTML. Właściwość white-space, podobnie jak znacznik <pre>, ale bardziej elastycznie, kontroluje formatowanie spacji i dzielenie wyrazów.

            white-space: normal | nowrap | pre | pre-wrap

Przykład:

white-space: normal | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Harum possimus rerum a fugiat eveniet pariatur amet ducimus officiis atque ipsam rem reiciendis eum alias minus, quae obcaecati repellendus. Recusandae, nisi.

white-space: nowrap | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Harum possimus rerum a fugiat eveniet pariatur amet ducimus officiis atque

white-space: pre | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Harum possimus rerum a fugiat eveniet pariatur amet ducimus officiis atque ipsam rem reiciendis eum alias minus, quae obcaecati repellendus. Recusandae, nisi.

white-space: pre-wrap | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Harum possimus rerum a fugiat eveniet pariatur amet ducimus officiis atque ipsam rem reiciendis eum alias minus, quae obcaecati repellendus. Recusandae, nisi.

2.1 Właściwości czcionki

2.2 Właściwość: font-size

Ustawia rozmiar czcionki elementu w jednostkach bezwzględnych lub względnych. Na razie ograniczmy się do jednostek bezwzględnych - px (piksele).

            <p class="text-2_2"></p>
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Obcaecati commodi,
              veritatis nihil alias iste odit similique sit eius optio veniam, impedit
              cumque fuga facere labore quo id necessitatibus quaerat rerum.
            </p>

Domyślny rozmiar czcionki dla akapitów, który jest ustawiony w arkuszu stylów przeglądarki, to 16px.

            .text {
              font-size: 20px;
            }

Przykład: Lorem, ipsum dolor sit amet consectetur adipisicing elit. Obcaecati commodi, veritatis nihil alias iste odit similique sit eius optio veniam, impedit cumque fuga facere labore quo id necessitatibus quaerat rerum.

2.3 Właściwość: font-weight

Kontroluje grubość (wagę) liter w czcionce. Wartość właściwości można określić jako zestaw zarezerwowanych słów lub liczb od 100 do 900 ze skokiem 100, który określa grubość glifu od cienkiego 100 do grubego 900.

font-weight: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

Słowa kluczowe są powiązane z liczbami, na przykład normal to 400, a bold to 700. Podczas programowania używane są tylko liczby, ze względu na możliwość ustawienia tej samej dokładnej wagi we wszystkich przeglądarkach.

            <h1 class="title">Iste odit similique sit</h1>
            <p class="text">
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Obcaecati commodi,
              veritatis nihil alias iste odit similique sit eius optio veniam, impedit
              cumque fuga facere labore quo id necessitatibus quaerat rerum.
            </p>

Domyślnie grubość czcionki w akapitach, która jest ustawiona w arkuszu stylów przeglądarki, to 400, a grubość nagłówków to 700.

            /* Zamienimy miejscami pogrubienie tekstu nagłówka i akapitu */
            .title {
              font-weight: 400;
            }

            .text {
              font-weight: 700;
            }

Iste odit similique sit

2.4 Właściwość: font-style

Ustawia styl tekstu, na przykład można ustawić kursywę.

font-style: normal | italic | oblique | initial | inherit

Ze wszystkich wartości używane są tylko dwie.

normal - wartość jest domyślna dla większości znaczników
italic - tekst pisany kursywą

            <h1 class="title">Iste odit similique sit</h1>
            <p class="text">
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Obcaecati commodi,
              veritatis nihil alias iste odit similique sit eius optio veniam, impedit
              cumque fuga facere labore quo id necessitatibus quaerat rerum.
            </p>

Zróbmy tekst nagłówka kursywą.

            .title {
              font-style: italic;
            }

Iste odit similique sit

2.5 Właściwość: font-family

Czcionka — to zbiór znaków typograficznych, cyfr i znaków specjalnych o określonym stylu do wpisywania tekstu.

Czcionki są podzielone na kilka głównych grup (rodzin): czcionki szeryfowe (serif), czcionki bezszeryfowe (sans-serif), czcionki o stałej szerokości (monospace), czcionki dekoracyjne i odręczne. MacOS, Linux i Windows zawierają zestaw standardowych czcionek z każdej rodziny. Domyślnie, jeśli nie określono innej czcionki, przeglądarka używa Times New Roman z rodziny szeryfowej (serif).

Można zobaczyć, jaką czcionką jest renderowany tekst elementu w narzędziach programistycznych na karcie Computed.

Właściwość font-family ustawia czcionkę tekstu elementu. Można podać dowolną liczbę czcionek oddzielonych przecinkami, które przeglądarka, w kolejności od lewej do prawej, spróbuje znaleźć w systemie użytkownika i zastosuje pierwszą znalezioną.

            body {
              font-family: 'Helvetica Neue', 'Roboto', 'Verdana', 'Tahoma', sans-serif;
            }

Rodzina czcionek jest zawsze wyświetlana na końcu listy, na wypadek gdyby żadna z wymienionych czcionek nie została znaleziona. Wtedy zastosowana zostanie standardowa czcionka z tej rodziny, która jest w systemie użytkownika.

3.1 Pseudoelementy tekstowe

3.2 Pseudoelement ::first-letter

Steruje stylem pierwszego znaku w tekście elementu, do którego jest dodawany. Do tego pseudoelementu można zastosować tylko właściwości czcionki, koloru, tła, a także geometrie elementu.

            element::first-letter {
            }

Na przykład można zaznaczyć pierwsze litery każdego akapitu wiersza.

            <pre>
              Nudno jest tu bez ciebie. Nudno do obłędu!
              Jestem jeszcze wraz z wiewiórką i pieskiem,
              Piszę, czytam i palę, wciąż mam oczy niebieskie,
              Lecz to wszystko tylko siłą rozpędu.
            </pre>

            <pre>
              Wciąż jeszcze świt jest szary, zmierzch niebiesko -złoty,
              Dzień przechodzi na jedną, noc na drugą stronę
              I róże zakwitają bez wielkiej ochoty:
              Bo tak są już przyzwyczajone.
            </pre>

            <pre>
              A jednak świat się skończył. Czy wy rozumiecie?
              Świata nie ma i ja go nie stworzę.
              Czas jest równy i cichy. Lecz czekajcie... może -
              Może ja jestem już na tamtym świecie?
            </pre>

Dodamy style dla pseudoelementu ::first-letter znacznika pre. Zmienimy czcionkę, rozmiar i kolor czcionki.

            .pre-3_2 {
              font-family: 'Arial', 'Helvetica', sans-serif;
              color: #2a2a2a;
              font-size: 16px;
            }

            .pre-3_2::first-letter {
              font-family: 'Tahoma', serif;
              font-size: 32px;
              color: #f44336;
            }

          Nudno jest tu bez ciebie. Nudno do obłędu!
          Jestem jeszcze wraz z wiewiórką i pieskiem,
          Piszę, czytam i palę, wciąż mam oczy niebieskie,
          Lecz to wszystko tylko siłą rozpędu.

          Wciąż jeszcze świt jest szary, zmierzch niebiesko -złoty,
          Dzień przechodzi na jedną, noc na drugą stronę
          I róże zakwitają bez wielkiej ochoty:
          Bo tak są już przyzwyczajone.

          A jednak świat się skończył. Czy wy rozumiecie?
          Świata nie ma i ja go nie stworzę.
          Czas jest równy i cichy. Lecz czekajcie... może -
          Może ja jestem już na tamtym świecie?

3.3 Pseudoelement ::selection

Steruje stylem zaznaczania tekstu elementu, nadpisując standardowe wartości z arkusza stylów przeglądarki. W projekcie można używać tylko właściwości color i background-color. Zaznacz część przykładowego tekstu za pomocą myszy.

            pre::selection {
              color: #ffffff;
              background-color: #3f51b5;
            }

          Nudno jest tu bez ciebie. Nudno do obłędu!
          Jestem jeszcze wraz z wiewiórką i pieskiem,
          Piszę, czytam i palę, wciąż mam oczy niebieskie,
          Lecz to wszystko tylko siłą rozpędu.

          Nudno jest tu bez ciebie. Nudno do obłędu!
          Jestem jeszcze wraz z wiewiórką i pieskiem,
          Piszę, czytam i palę, wciąż mam oczy niebieskie,
          Lecz to wszystko tylko siłą rozpędu.

4.1 Niestandardowe czcionki

Czcionka sprawia, że witryna jest jasna i zapadająca w pamięć. Miliony witryn z jedną czcionką „Times New Roman" prawdopodobnie byłyby zbyt nudne. Dlatego projektanci tworzą własne czcionki, a programiści mogą ich używać w projektach.

Interesująco: Czcionki są podzielone na płatne i bezpłatne. Należy zakupić płatną licencję na czcionkę, a używanie jej bez licencji jest obarczone naruszeniem praw autorskich. Istnieje wiele pięknych darmowych czcionek należących do domeny publicznej.

4.2 Serwis Google Fonts

Google Fonts jest to repozytorium ogromnej liczby darmowych czcionek. Wszystko, co trzeba zrobić, to znaleźć odpowiednią czcionkę, pobrać link do niej i umieścić ją w pliku HTML jako kolejny arkusz stylów.

Skopiuj i wklej następujący kod HTML do swojego pliku znaczników i otwórz stronę w przeglądarce. Tekst renderowany niestandardową czcionką nie różni się niczym innym niż wyglądem, więc do dekoracji możesz użyć dowolnej właściwości CSS.

            <html>
              <head>
                <link
                  href="https://fonts.googleapis.com/css2?family=Tangerine:wght@700&display=swap"
                  rel="stylesheet"
                />

                <style>
                  .title {
                    font-family: 'Tangerine', cursive;
                  }
                </style>
              </head>
              <body>
                <h1 class="title">Making the Web Beautiful!</h1>
              </body>
            </html>

Aby podłączyć niestandardową bezpłatną czcionkę z usługi Google Fonts, kliknij w link i przejdź do strony wyników wyszukiwania.

Możesz przewijać galerię czcionek i wyszukiwać tę, która Ci się podoba, lub, jeśli znasz nazwę czcionki, wprowadź ją w polu wyszukiwania i kliknij kartę czcionki.

Na stronie czcionki wybieramy żądaną grubość. Nie trzeba wybierać wszystkich dostępnych grubości, im więcej opcji, tym cięższy będzie plik czcionki i tym dłużej wczytuje się Twoja strona internetowa. To samo dotyczy liczby czcionek, zwykle ograniczają się do jednej, maksymalnie dwóch czcionek dla całej witryny.

Uwaga! Nie wszystkie czcionki obsługują pełny zakres grubości (od 100 do 900) i styl czcionki (standardowa lub kursywa). Projektant tworzy zestaw najpopularniejszych wartości. Jeśli czcionka nie obsługuje określonej wagi, przeglądarka wyrenderuje ją najbliższą dostępną grubością.

Potrzebujemy tylko wagi 700, ponieważ dołączamy czcionkę dla nagłówków.

Na karcie Embed skopiujemy znacznik <link>, który zawiera link do arkusza stylów czcionek i dodajemy go do nagłówka dokumentu HTML, przed pozostałymi stylami.

Teraz możesz użyć czcionki Tangerine w arkuszu stylów, określając ją we właściwości font-family.

4.3 Dyrektywa @font-face

Zobaczmy, co dokładnie połączyliśmy z dokumentem HTML w ostatniej sekcji.

Otwórz narzędzia programistyczne i przejdź do karty „Network".
Wybierz filtr „CSS", aby były wyświetlane tylko pliki stylów.
Kliknij plik z Google Fonts.
Wybierz kartę „Preview", która wyświetli zawartość pliku.

            /* latin */
            @font-face {
              font-family: 'Tangerine';
              font-style: normal;
              font-weight: 700;
              font-display: swap;
              src: local('Tangerine Bold'), local('Tangerine-Bold'),
                url(https://fonts.gstatic.com/s/tangerine/v12/Iurd6Y5j_oScZZow4VO5srNZi5FNym499g.woff2)
                  format('woff2');
              unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
                U+FEFF, U+FFFD;
            }

Tak więc Google Fonts zwróciło nam najpopularniejszy plik CSS, który zawiera dyrektywę @font-face - deklarację czcionki. Ta dyrektywa umożliwia określenie parametrów podłączonej czcionki.

font-family - lokalna nazwa do użycia w naszym kodzie CSS.
font-style - styl czcionki (standardowa lub kursywa itp.)
font-weight - waga podłączanej czcionki.
font-display - steruje wyświetlaniem tekstu podczas ładowania czcionki.
src - link do samego pliku czcionki i wyjaśnienie jej typu, zwykle woff albo woff2. W naszym przypadku plik czcionki znajduje się na serwerach Google, ale może to być również czcionka lokalna, która jest przechowywana w plikach projektu.
unicode-range - określa zestaw wymaganych znaków w czcionce z tablicy znaków Unicode. Nie ma potrzeby wczytywania wszystkich symboli, im mniej jest, tym szybciej ładuje się czcionka.

Pomocne: Wszystkie symbole znane ludzkości (języki, znaki matematyczne itp.) są zebrane i opisane w standardzie o nazwie Unicode, w którym każdy symbol ma swoją nazwę (na przykład „latin capital letter a") oraz kod (code point) — liczba od 0 do 10FFFF.