Lekcje >> Podstawy HTML 5
Polimax

Drukarnia w Warszawie realizująca druk wizytówek, plakatów jak również fotoksiążki, fotoobrazy i fotokalendarze - z wysyłką na terenie całego kraju.

Właściwości czcionki

Jednym z najważniejszych możliwości CSS jest możliwość formatowania czcionek stosowanych na stronie. W wielu ćwiczeniach definiowaliśmy już właściwości czcionki , teraz zbierzemy te cząstowe wiadomości, uzupełniając je o rzeczy jeszcze nieznane.

Kolor czcionki color

Został omówiony podczas realizacji tematu Właściwości koloru i tła.

Rodzaj czcionki font-family

Przykład definiowania font-family:Helvetica,'Trebuchet MS',Verdana,sans-serif;. Należy wziąć pod uwagę fakt, że użytkownik może nie posiadać w swoim komputerze wskazanej przez nas czcionki, dlatego wymieniamy po przecinkach klika czcionek, zaczynając od najbardziej przez nas pożądanej. Zwróć uwagę, że nazwa składająca się z kilku wyrazów objęta jest znakami apostrofu. Na końcu listy czcionek, dobrze jest wymienić rodzinę ogólną czcionki, w przykładzie podano sans-serif, a więc czcionka bezszeryfowa. Jeżeli system operacyjny użytkownika nie posiada żadnej z czcionek, to wskazanie rodziny czcionek spowoduje wybór dostępnej czcionki z tej rodziny, w przeciwnym przypadku, będzie wzięta domyślna czcionka danej przeglądarki. Warto wiedzieć, że istnieje sposób, pozwalający używać na stronie WWW dowolne czcionki, bez obawy o niepoprawne wyświetlanie. Możliwe jest umieszczenie na serwerze specjalnego pliku z czcionkami, z którego korzysta przeglądarka, podczas wyświetlania strony. Mówimy wtedy o czcionce osadzonej. Możemy również korzystać z czcionek udostępnianych w specjalnych serwisach, np. aby skorzystać z dowolnej czcionki, dostępnej w katalogu Google Web Fonts, nie trzeba nawet umieszczać na swoim serwerze żadnych plików. Tych zagadnień nie będziemy jednak opisywać, ponieważ omawiamy podstawy.
Rodziny ogólne czcionek:

  • serif - czcionka szeryfowa (końcówki znaków posiadają "ozdobniki"), np.: 'Times New Roman', Georgia, Garamond, Bodoni;
  • sans-serif - czcionka bezszeryfowa (końcówki znaków są proste), np.: Arial, Verdana, 'Trebuchet MS', Helvetica, Univers, Futura;
  • monospace - czcionka o stałej szerokości znaków - monotypiczna (wygląda, jak pisana na maszynie), np.: Courier, 'Courier New';
  • cursive - czcionka mająca pewne cechy pochyłej (wygląda, jak pisana ręcznie);
  • fantasy - czcionka fantazyjna (dekoracyjna).

Zastosowanie różnych rodzajów czcionki - ćwiczenie 3_2_8_1

Napiszemy trzy akapity tekstu. Należy zastosować style lokalne.

<body>
  <p style="font-family:Georgia,Garamond,Bodoni,'Times New Roman',serif;" >
    Pierwszy akapit tekstu napisany czcionką szeryfową
  </p>
  <p style="font-family:Helvetica,Arial,Verdana,sans-serif;" >
    Drugi akapit tekstu napisany czcionką bezszeryfową
  </p>
  <p style="font-family:Courier,'Courier New',monospace;">
    Trzeci akapit tekstu napisany czcionką monotypiczną
  </p>
  <p style="font-family:cursive;">
    Czwarty akapit tekstu napisany czcionką o cechach czcionki pochyłej
  </p>
  <p style="font-family:fantasy;">
    Piąty akapit tekstu napisany czcionką dekoracyjną
  </p>
</body>

W dwóch ostatnich przypadkach, raczej nie spodziewajmy się czegoś ciekawego.

Rozmiar czcionki font-size

Możemy stosować jednostki długości względne i bezwzględne, które zostały już omówione. Mimo wielu możliwości stosuj się do dwóch zasad:

  • Ponieważ na ekranie monitora wszystkie elementy są wyświetlane zawsze przy użyciu pikseli, a więc każda jednostka ostatecznie i tak musi być w ten sposób przeliczona - wynika stąd prosty wniosek: najlepszym rozwiązaniem dla czcionki pokazywanej na ekranie jest określanie rozmiaru czcionki w pikselach, np. font-size:16px;.
  • Większość edytorów tekstu podaje rozmiary w punktach pt, a nie w pikselach. Drukarka zawsze zna dokładne wymiary arkusza papieru, a więc może zapewnić prawidłowy wydruk tekstu. Wniosek - najlepszym rozwiązaniem dla czcionki przeznaczonej do wydruku, jest określanie rozmiaru czcionki w punktach, np. font-size:16pt;.

Można również stosować imienne wartości absolutne:

  • xx-small - najmniejsza,
  • x-small - mniejsza,
  • small - mała,
  • medium - średnia,
  • large - duża,
  • x-large - większa,
  • xx-large - największa,

a także imienne wartości względne:

  • smaller - mniejsza od bieżącej,
  • larger - większa od bieżącej.

Zastosowanie czcionki o różnej wielkości - ćwiczenie 3_2_8_2

Napiszemy kilka akapitów tekstu. Należy zastosować style lokalne.

<body style="font-family:Arial,sans-serif; font-size:16px;">
  <p style="font-size:20px;">
    Pierwszy akapit tekstu, rozmiar czcionki - 20px
  </p>
  <p style="font-size:20pt;">
    Drugi akapit tekstu, rozmiar czcionki - 20pt
  </p>
  <p style="font-size:xx-small;">
    Trzeci akapit tekstu, rozmiar czcionki - xx-small
  </p>
  <p style="font-size:x-small;">
    Czwarty akapit tekstu, rozmiar czcionki - x-small
  </p>
  <p style="font-size:small;">
    Piąty akapit tekstu, rozmiar czcionki - small
  </p>
  <p style="font-size:large;">
    Szósty akapit tekstu, rozmiar czcionki - large
  </p>
  <p style="font-size:x-large;">
    Siódmy akapit tekstu, rozmiar czcionki - x-large
  </p>
  <p style="font-size:xx-large;">
    Ósmy akapit tekstu, rozmiar czcionki - xx-large
  </p>
  <p >
    Dziewiąty akapit tekstu, rozmiar czcionki zdefiniowany dla body
  </p>
  <p style="font-size:smaller;">
    Dziesiąty akapit tekstu, rozmiar czcionki - smaller
  </p>
  <p style="font-size:larger;">
    Jedensty akapit tekstu, rozmiar czcionki - larger
  </p>
</body>

Styl czcionki font-style

Mamy następujące style:

  • normal - czcionka normalna, podstawowa,
  • italic - czcionka pochylona, jeżeli niedostępna, automatycznie wybierany jest styl oblique,
  • oblique - również czcionka pochylona, przy czym o ile italic jest osobnym krojem, to w tym wypadku czcionka może zostać utworzona przez pochylenie zwykłej czcionki.

Zastosowanie czcionki o różnym stylu - ćwiczenie 3_2_8_3

Napiszemy trzy akapity tekstu. Należy zastosować style lokalne.

<body style="font-family:Arial,sans-serif; font-size:16px;">
  <p style="font-style:normal;">
    Pierwszy akapit tekstu, styl czcionki - normal
  </p>
  <p style="font-style:italic;">
    Pierwszy akapit tekstu, styl czcionki - italic
  </p>
  <p style="font-style:oblique;">
    Pierwszy akapit tekstu, styl czcionki - oblique
  </p>
</body>

Waga czcionki font-weight

Mamy następujące wagi:

  1. Wartości absolutne
    • normal - czcionka normalna, podstawowa;
    • bold - czcionka pogrubiona;
    • 100, 200, 300, 400 (odpowiednik normal), 500, 600, 700 (odpowiednik bold), 800, 900 - każdy następny numer wskazuje wagę czcionki przynajmniej tak samo wytłuszczonej jak dla poprzedniej wartości w sekwencji. Niektóre rodziny czcionek mogą nie posiadać wszystkich dziewięciu stopni wytłuszczenia. Wiele posiada tylko wartości normal i bold;
  2. Wartości względne
    • lighter - czcionka mniej wytłuszczona od odziedziczonej lub przypisanej do znacznika (np. typowo znaczniki <b>...</b> oraz <strong>...</strong> mają przypisaną domyślną wagę bold);
    • bolder - czcionka bardziej wytłuszczona.

Waga czcionki - ćwiczenie 3_2_8_4

Napiszemy kilka akapitów tekstu, pokazując różne wagi czcionki.

<body style="font-family:Arial,sans-serif; font-size:16px;">
  <p style="font-weight:normal;">
    waga normal (400)
  </p>
  <p style="font-weight:bold;">
    waga bold (700)
  </p>
  <p style="font-weight:100;">
    waga 100
  </p>
  <p style="font-weight:200;">
    waga 200
  </p>
  <p style="font-weight:300;">
    waga 300
  </p>
  <p style="font-weight:400;">
    waga 400 (normal)
  </p>
  <p style="font-weight:500;">
    waga 500
  </p>
  <p style="font-weight:600;">
    waga 600
  </p>
  <p style="font-weight:700;">
    waga 700 (bold)
  </p>
  <p style="font-weight:800;">
    waga 800
  </p>
  <p style="font-weight:900;">
    waga 900
  </p>
  <p style="font-weight:600;">
    <span style="font-weight:lighter;">
      waga lighter w stosunku do wartości 600
    </span>
  </p>
  <p style="font-weight:500;">
    <span style="font-weight:bolder;">
      waga bolder w stosunku do wartości 500
    </span>
  </p>
</body>

Wariant czcionki font-variant

  • normal - czcionka normalna (podstawowa),
  • small-caps - kapitaliki (tekst napisany wielkimi literami, lecz czcionką o wielkości małych liter).

Wariant czcionki - ćwiczenie 3_2_8_5

<body style="font-family:Arial,sans-serif; font-size:16px;">
  <p style="font-variant:normal;">
    wariant normal
  </p>
  <p style="font-variant:normal;">
    WARIANT NORMAL PISANY DUŻYMI LITERAMI 
  </p>
  <p style="font-variant:small-caps;">
    wariant small-caps
  </p>
</body>