Ostatnio edytowany:

font

Autor: Virtual Patriot

Opis właściwości font

Za pomocą właściwości font możemy określić kilka różnych cech czcionki tekstu interesującego nas elementu HTML.

Dodatkowe techniczne informacje o właściwości font

przeznaczenie

element HTML każdego typu

pozycja

dowolna

dziedziczenie

tak

wartość initial

normal normal normal medium /normal (dla składnika family taka jak w ustawieniach przeglądarki internetowej)

wyjątki initial

brak

animowanie

tak samo jak dla poszczególnej właściwości CSS, której wartość tworzy poszczególny składnik grupy wartości właściwości font

Interpretacja właściwości font

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak

Opis wartości właściwości font

grupa wartości

Opis

Za pomocą właściwości font oraz z góry zdefiniowanej grupy wartości możemy określić kilka różnych cech czcionki tekstu interesującego nas elementu HTML.

/* OBIE REGUŁY CSS SĄ SOBIE RÓWNOZNACZNE */

/* REGUŁA - 1 */
div {
  font:italic small-caps bold 24px /36px Arial, Verdana, sans-serif;
}

/* REGUŁA - 2 */
div {
  font-style:italic;
  font-variant:small-caps;
  font-weight:bold;
  font-size:24px;
  line-height:36px;
  font-family:Arial, Verdana, sans-serif;
}

Składniki grupy wartości właściwości font

Ważne

podana przez nas grupa wartości właściwości font nie może zawierać wartości globalnych

Przykładowe zapisy

20px serif

italic 20px serif

italic small-caps 20px serif

italic small-caps 20px /30px serif

italic small-caps 20px /30px 'Times New Roman', serif

style

Składnik style nie jest wymaganym składnikiem grupy wartości właściwości font. Składnik style określa wartość właściwości font-style, czyli dodatkowy styl czcionki tekstu interesującego nas elementu HTML.

Wartość domyślna

normal

variant

Składnik variant nie jest wymaganym składnikiem grupy wartości właściwości font. Składnik variant określa wartość właściwości font-variant, czyli dodatkowy wariant czcionki tekstu interesującego nas elementu HTML.

Wartość domyślna

normal

weight

Składnik weight nie jest wymaganym składnikiem grupy wartości właściwości font. Składnik weight określa wartość właściwości font-weight, czyli grubość czcionki tekstu interesującego nas elementu HTML.

Wartość domyślna

normal

size

Składnik size jest wymaganym składnikiem grupy wartości właściwości font. Składnik size określa wartość właściwości font-size, czyli rozmiar czcionki tekstu interesującego nas elementu HTML.

Wartość domyślna

medium

/line-height

Składnik line-height nie jest wymaganym składnikiem grupy wartości właściwości font. Składnik line-height określa wartość właściwości line-height, czyli rozmiar wysokości wierszy interesującego nas elementu HTML.

Sposób podawania

przed wartością składnika line-height należy umieścić znak /

Wartość domyślna

normal

family

Składnik family jest wymaganym składnikiem grupy wartości właściwości font. Składnik family określa wartość właściwości font-family, czyli rodzaj czcionki tekstu interesującego nas elementu HTML.

Wartość domyślna

taka jak w ustawieniach przeglądarki internetowej

Przykład

  font:italic small-caps bold 24px /30px Arial, Verdana, sans-serif;
cechy czcionki tekstu tego elementu "div" zostały zmienione (czcionka tekstu jest pochylona, małe litery tekstu zostały zamienione na duże litery o małym rozmiarze, czcionka tekstu jest pogrubiona, rozmiar czcionki tekstu wynosi 24 piksele, rozmiar wysokości wierszy wynosi 30 pikseli, ponadto czcionka tekstu jest rodzaju "Arial"), ponieważ do tego elementu "div" została dodana właściwość "font" wraz z następującą grupą wartości: "italic small-caps bold 24px /30px Arial, Verdana, sans-serif"

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        font:italic small-caps bold 24px /30px Arial, Verdana, sans-serif;
        padding:1em;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    <div>
      cechy czcionki tekstu tego elementu "div" zostały zmienione (czcionka tekstu jest pochylona, małe litery tekstu zostały zamienione na duże litery o małym rozmiarze, czcionka tekstu jest pogrubiona, rozmiar czcionki tekstu wynosi 24 piksele, rozmiar wysokości wierszy wynosi 30 pikseli, ponadto czcionka tekstu jest rodzaju "Arial"), ponieważ do tego elementu "div" została dodana właściwość "font" wraz z następującą grupą wartości: "italic small-caps bold 24px /30px Arial, Verdana, sans-serif"
    </div>

  </body>
</html>