Właściwości czcionek

4.1 Właściwość font-style

CSS oferuje wiele właściwości do zarządzania czcionkami i ich wyświetlaniem na stronach internetowych. Właściwości font-style, font-variant i font-stretch pozwalają dostosować styl tekstu, jego wyświetlanie i szerokość. Przyjrzyjmy się każdej z tych właściwości.

Właściwość font-style określa styl tekstu. Jest używana do ustawienia pochylonego kroju (kursywy) lub zwykłego stylu tekstu.

Wartości:

• normal: zwykły styl tekstu (domyślnie)
• italic: pochylony tekst (kursywa)
• oblique: pochylony tekst, podobny do italic, ale różni się sposobem pochylenia

Przykład użycia:

    
      .normal {
        font-style: normal;
      }

      .italic {
        font-style: italic;
      }

      .oblique {
        font-style: oblique;
      }
    
  

    
      <body>
        <p class="normal">To jest zwykły tekst.</p>
        <p class="italic">To jest pochylony tekst (kursywa).</p>
        <p class="oblique">To jest pochylony tekst (oblique).</p>
      </body>
    
  

4.2 Właściwość font-variant

Właściwość font-variant kontroluje wyświetlanie tekstu w małych kapitalikach. Pozwala zmienić czcionkę tak, aby wszystkie litery stały się kapitalikami, ale z mniejszym rozmiarem dla liter pierwotnie małych.

Wartości:

• normal: zwykły tekst (domyślnie)
• small-caps: tekst w małych kapitalikach

Przykład użycia:

    
      .normal {
        font-variant: normal;
      }

      .small-caps {
        font-variant: small-caps;
      }
    
  

    
      <body>
        <p class="normal">To jest zwykły tekst.</p>
        <p class="small-caps">To jest tekst w małych kapitalikach.</p>
      </body>
    
  

Dodatkowe wartości (CSS Fonts Level 4)

CSS Fonts Level 4 dodaje dodatkowe wartości dla właściwości font-variant, takie jak all-small-caps, petite-caps, all-petite-caps, unicase i titling-caps. Jednakże nie są one obsługiwane we wszystkich przeglądarkach.

4.3 Właściwość font-stretch

Właściwość font-stretch kontroluje stopień ściskania lub rozciągania czcionki. Zmienia szerokość czcionki, nie wpływając na wysokość, i jest używana do wyboru odpowiedniego wariantu czcionki, jeśli jest dostępny.

Wartości:

• normal: zwykła szerokość czcionki (domyślnie)
• ultra-condensed: maksymalnie skondensowana czcionka
• extra-condensed: bardzo skondensowana czcionka
• condensed: skondensowana czcionka
• semi-condensed: umiarkowanie skondensowana czcionka
• semi-expanded: umiarkowanie rozszerzona czcionka
• expanded: rozszerzona czcionka
• extra-expanded: bardzo rozszerzona czcionka
• ultra-expanded: maksymalnie rozszerzona czcionka

Przykład użycia:

    
      .normal {
        font-stretch: normal;
      }

      .condensed {
        font-stretch: condensed;
      }

      .expanded {
        font-stretch: expanded;
      }
    
  

    
      <body>
        <p class="normal">To jest tekst o normalnej szerokości czcionki.</p>
        <p class="condensed">To jest tekst o skondensowanej szerokości czcionki.</p>
        <p class="expanded">To jest tekst o rozszerzonej szerokości czcionki.</p>
      </body>
    
  

1

Zadanie

Frontend SELF PL, poziom 14, lekcja 3

Niedostępne

Styl tekstu

Styl tekstu

Otwórz

1

Zadanie

Frontend SELF PL, poziom 14, lekcja 3

Niedostępne

Rozciąganie czcionki

Rozciąganie czcionki

Otwórz