Ostatnio edytowany:

font-size

Autor: Virtual Patriot

Opis właściwości font-size

Za pomocą właściwości font-size możemy określić rozmiar czcionki tekstu interesującego nas elementu HTML.

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

przeznaczenie
  • element HTML każdego typu
dziedziczenie
  • tak
wartość initial
wyjątki initial
animowanie
  • tak

Interpretacja właściwości font-size

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak

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

rozmiar

Opis

Za pomocą właściwości font-size oraz dowolnej nieujemnej liczby wraz z wybraną jednostką absolutną lub jednostką relatywną lub za pomocą procentów możemy określić rozmiar czcionki tekstu interesującego nas elementu HTML.

Wartości procentowe

wartości procentowe liczone są względem aktualnego rozmiaru czcionki tekstu elementu rodzica

Przykład

rozmiar czcionki tekstu tego elementu "div" wynosi 24 piksele, ponieważ do tego elementu "div" została dodana właściwość "font-size" wraz z wartością "24px"

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-size:24px;
        padding:1em;
        background-color:#AFF;
      }
    </style>
  </head>

  <body>

    <div>
      rozmiar czcionki tekstu tego elementu "div" wynosi 24 piksele, ponieważ do tego elementu "div" została dodana właściwość "font-size" wraz z wartością "24px"
    </div>

  </body>
</html>

rozmiar absolutny

Opis

Za pomocą właściwości font-size oraz jednej z dodatkowych wartości reprezentującej rozmiar absolutny możemy określić rozmiar czcionki tekstu interesującego nas elementu HTML.

Dodatkowe wartości właściwości font-size reprezentujące poszczególne rozmiary absolutne

xx-small

Wartość xx-small właściwości font-size oznacza, że czcionka tekstu interesującego nas elementu HTML powinna posiadać rozmiar bardzo bardzo mały.

x-small

Wartość x-small właściwości font-size oznacza, że czcionka tekstu interesującego nas elementu HTML powinna posiadać rozmiar bardzo mały.

small

Wartość small właściwości font-size oznacza, że czcionka tekstu interesującego nas elementu HTML powinna posiadać rozmiar mały.

medium

Wartość medium właściwości font-size oznacza, że czcionka tekstu interesującego nas elementu HTML powinna posiadać rozmiar średni.

large

Wartość large właściwości font-size oznacza, że czcionka tekstu interesującego nas elementu HTML powinna posiadać rozmiar duży.

x-large

Wartość x-large właściwości font-size oznacza, że czcionka tekstu interesującego nas elementu HTML powinna posiadać rozmiar bardzo duży.

xx-large

Wartość xx-large właściwości font-size oznacza, że czcionka tekstu interesującego nas elementu HTML powinna posiadać rozmiar bardzo bardzo duży.

Przykład

rozmiar czcionki tekstu tego elementu "div" jest bardzo duży, ponieważ do tego elementu "div" została dodana właściwość "font-size" wraz z wartością "x-large"

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-size:x-large;
        padding:1em;
        background-color:#AFF;
      }
    </style>
  </head>

  <body>

    <div>
      rozmiar czcionki tekstu tego elementu "div" jest bardzo duży, ponieważ do tego elementu "div" została dodana właściwość "font-size" wraz z wartością "x-large"
    </div>

  </body>
</html>

rozmiar relatywny

Opis

Za pomocą właściwości font-size oraz jednej z dodatkowych wartości reprezentującej rozmiar relatywny możemy określić rozmiar czcionki tekstu interesującego nas elementu HTML.

Dodatkowe wartości właściwości font-size reprezentujące poszczególne rozmiary relatywne

smaller

Wartość smaller właściwości font-size oznacza, że czcionka tekstu interesującego nas elementu HTML powinna posiadać rozmiar mniejszy od rozmiaru dziedziczonego od elementu rodzica.

larger

Wartość larger właściwości font-size oznacza, że czcionka tekstu interesującego nas elementu HTML powinna posiadać rozmiar większy od rozmiaru dziedziczonego od elementu rodzica.

Przykład

czcionka tekstu tego elementu "div" posiada rozmiar mniejszy od rozmiaru dziedziczonego od elementu "body", ponieważ do tego elementu "div" została dodana właściwość "font-size" wraz z wartością "smaller"

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-size:smaller;
        padding:1em;
        background-color:#AFF;
      }
    </style>
  </head>

  <body>

    <div>
      czcionka tekstu tego elementu "div" posiada rozmiar mniejszy od rozmiaru dziedziczonego od elementu "body", ponieważ do tego elementu "div" została dodana właściwość "font-size" wraz z wartością "smaller"
    </div>

  </body>
</html>