CSS - czcionki

W tym rozdziale dowiesz się, jak ustawić czcionki treści, dostępne w elemencie HTML. Możesz ustawić następujące właściwości czcionki elementu -

Plik font-family właściwość służy do zmiany kroju czcionki.
Plik font-style właściwość służy do ustawiania czcionki jako kursywy lub ukośnej.
Plik font-variant służy do tworzenia efektu małych liter.
Plik font-weight właściwość służy do zwiększania lub zmniejszania pogrubienia lub jasności czcionki.
Plik font-size właściwość służy do zwiększania lub zmniejszania rozmiaru czcionki.
Plik font właściwość jest używana jako skrót do określenia szeregu innych właściwości czcionki.

Ustaw rodzinę czcionek

Poniżej znajduje się przykład, który pokazuje, jak ustawić rodzinę czcionek elementu. Możliwą wartością może być dowolna nazwa rodziny czcionek.

<html>
   <head>
   </head>

   <body>
      <p style = "font-family:georgia,garamond,serif;">
         This text is rendered in either georgia, garamond, or the 
         default serif font depending on which font  you have at your system.
      </p>
   </body>
</html>

To da następujący wynik -

Ustaw styl czcionki

Poniżej znajduje się przykład, który pokazuje, jak ustawić styl czcionki elementu. Możliwe wartości to normalne, kursywa i ukośne .

<html>
   <head>
   </head>

   <body>
      <p style = "font-style:italic;">
         This text will be rendered in italic style
      </p>
   </body>
</html>

To da następujący wynik -

Ustaw wariant czcionki

Poniższy przykład ilustruje sposób ustawiania wariantu czcionki elementu. Możliwe wartości to normalne i kapitaliki .

<html>
   <head>
   </head>

   <body>
      <p style = "font-variant:small-caps;">
         This text will be rendered as small caps
      </p>
   </body>
</html>

To da następujący wynik -

Ustaw grubość czcionki

Poniższy przykład ilustruje sposób ustawiania grubości czcionki elementu. Właściwość font-weight zapewnia funkcjonalność określania pogrubienia czcionki. Możliwe wartości to normalne, pogrubione, pogrubione, jaśniejsze, 100, 200, 300, 400, 500, 600, 700, 800, 900 .

<html>
   <head>
   </head>

   <body>
      <p style = "font-weight:bold;">
         This font is bold.
      </p>
      
      <p style = "font-weight:bolder;">
         This font is bolder.
      </p>
      
      <p style = "font-weight:500;">
         This font is 500 weight.
      </p>
   </body>
</html>

To da następujący wynik -

Ustaw rozmiar czcionki

Poniższy przykład ilustruje, jak ustawić rozmiar czcionki elementu. Właściwość font-size służy do kontrolowania rozmiaru czcionek. Możliwe wartości to xx-small, x-small, small, medium, large, x-large, xx-large, mniejszy, większy, rozmiar w pikselach lub w% .

<html>
   <head>
   </head>

   <body>
      <p style = "font-size:20px;">
         This font size is 20 pixels
      </p>
      
      <p style = "font-size:small;">
         This font size is small
      </p>
      
      <p style = "font-size:large;">
         This font size is large
      </p>
   </body>
</html>

To da następujący wynik -

Ustaw Dopasuj rozmiar czcionki

Poniższy przykład ilustruje sposób ustawiania dopasowania rozmiaru czcionki elementu. Ta właściwość umożliwia dostosowanie wysokości x, aby czcionki były bardziej czytelne. Możliwą wartością może być dowolna liczba.

<html>
   <head>
   </head>

   <body>
      <p style = "font-size-adjust:0.61;">
         This text is using a font-size-adjust value.
      </p>
   </body>
</html>

To da następujący wynik -

Ustaw rozciągnięcie czcionki

Poniższy przykład ilustruje sposób ustawiania rozciągnięcia czcionki elementu. Ta właściwość zależy od tego, czy komputer użytkownika ma rozszerzoną lub skondensowaną wersję używanej czcionki.

Możliwe wartości to normalne, szersze, węższe, ultra-skondensowane, ekstra-skondensowane, skondensowane, częściowo skondensowane, częściowo rozszerzone, rozszerzone, ekstra-rozszerzone, ultra-rozszerzone .

<html>
   <head>
   </head>

   <body>
      <p style = "font-stretch:ultra-expanded;">
         If this doesn't appear to work, it is likely that your computer 
         doesn't have a <br>condensed or expanded version of the font being used.
      </p>
   </body>
</html>

To da następujący wynik -

Skrótowa własność

Możesz użyć właściwości czcionki, aby ustawić wszystkie właściwości czcionki jednocześnie. Na przykład -

<html>
   <head>
   </head>

   <body>
      <p style = "font:italic small-caps bold 15px georgia;">
         Applying all the properties on the text at once.
      </p>
   </body>
</html>

To da następujący wynik -