Udostępnij za pośrednictwem

  • Artykuł

          

Encyklopedia: Jak formatować fonty w CSS - Kurs HTML i CSS  Udostępnij na: Facebook

Autor: Jakub Mytko

Opublikowano: 2011-10-17

Często spotykanym problemem przy umieszczaniu treści na stronie internetowej jest formatowanie fontów. Najważniejszą czynnością jest wybór odpowiedniego kroju pisma. Dokonuje się tego używając atrybutu font-family. Jako jego wartość wpisuje się nazwę rodzaju fontu, który ma być wykorzystany na stronie. W przypadku, gdyby użytkownik nie posiadał wszystkich rodzajów fontów, najczęściej umieszcza się kilka nazw fontów oddzielonych przecinkami, zaczynając od tej najbardziej pożądanej. Na końcu listy warto umieścić ogólną rodzinę kroju pisma. Jeżeli nazwa fontu jest wieloczłonowa, np. "Times New Roman", powinno się ją umieścić w cudzysłowie. Zaleca się stosowanie standardowych krojów pisma, jednakże istnieje możliwość użycia niestandardowych, o których można przeczytać w encyklopedii Jak używać niestandardowych fontów.

Przykład użycia:

font-family: Tahoma, Arial, "Times New Roman", sans-serif;

Pozostałe atrybuty:

  • font-size – wielkość fontu może być podana w px, pt, em i procentach, więcej na ten temat można przeczytać w encyklopedii Jak określić wielkość w CSS,
  • font-style – przyjmuje wartości normal (krój normalny), italic (kursywa), oblique (pochylony),
  • font-weight – pogrubienie, przyjmuje wartości normal, lighter, bold, bolder oraz wartości numeryczne od 100-900, gdzie 400 oznacza normal,
  • text-decoration – przyjmuje wartości none (domyślnie, brak dekoracji), underline (podkreślenie), overline (nadkreślenie), line-through (przekreślenie),
  • color – kolor, więcej na ten temat można przeczytać w encyklopedii Jak określać kolory w CSS.

Przykład

<html>
    <head>
    <title>Jak formatować fonty w CSS</title>
    <style type="text/css">
        #tekst {
            font-family: Tahoma, Arial, "Times New Roman", sans-serif;
            font-size: 30px;
            font-style: italic;
            font-weight: bold;
            text-decoration: underline;
            color: blue; }
    </style>
    </head>
    <body>
        <p id="tekst">Przykład formatowania fontu.</p>
    </body>
</html>

Efekt działania przykładowego kodu przedstawiony został na Rys. 1.

Rys. 1. Efekt formatowania fontu.

Sprawdź

Praktyczne przykłady

Zobacz, jak praktycznie wykorzystać formatowanie fontów w samouczku: