iprogramista.pl
  • HTML 5
  • CSS 3
  • Javascript
  • SQL
  • Kolory
    • Kolory HTML - konwerter
    • Kolory HTML - odcienie
  • Narzędzia
    • Edytor HTML
    • Licznik znaków
    • Sprawdź IP
    • Lorem Ipsum generator
    • Enkoder Base64
    • Dekoder Base64
    • Guid generator
    • Kalkulator dni
    • Ile do wakacji
  • Plug-ins
    • Przelewy 24 SDK (C#)
    • BS5 Intro Tour
  • Co to jest CSS
  • Jaka jest składnia języka CSS?
  • Co to są selektory CSS?
  • Kolor tekstu i tła w CSS
  • Obramowanie CSS
  • Marginesy CSS
  • Padding / margines wewnętrzny
  • Height/Width
  • Box Model
  • CSS Outline
  • Tekst / czcionka
  • Czionki (font)
  • Wygląd linku
  • Stylizacja list
  • Style tabel HTML
  • CSS Display - wyświetlania elementów
  • CSS pozycjonowanie elementów
  • CSS Overflow
  • CSS float - elementy pływające

Czionki (font) kurs CSS 3

Poprzednia Następna
Czcionki

W CSS właściwość font definiuje rodzaj czcionki, grubość i styl tekstu.

W arkuszach stylów, można wyróżnić następujące typy czcionek

  • szeryfowe (ang. serif) - jest to czcionka, która posiada małe ozdobniki na końcu każdego znaku
  • bezszeryfowe (ang. sans-serif) - jest to prosta czcionka bez ozdobników
  • czcionki o stałej szerokości znaków (ang. monospace) - czcionka w której każdy znak jest tej samej szerokości. Może ona być zarówno szeryfowa jak i bezszeryfowa.
Czcionka bezszeryfowa
Czcionka szeryfowa
Przyjęło się, ze czcionki bezszeryfowe są łatwiejsze do odczytania na ekranach kompóterów. Choć nie musi to być regóła, która dotyczy każdej strony internetowej.

Rodzaj czcionki (font family)

W CSS możemy podzielić czcionki na

  • czcionki generyczne - czyli grupy czcionek, takie jak sans-serif, serif, czy monospace
  • "rodzina czcionki" - czyli konkretny krój pisma, taki jak Arial lub Times

Rodzaj czcionki można ustawić za pomocą font-family. Dobrym zwyczajem jest podawanie kilku krojów czcionki, wtedy jeżeli przeglądarka w jakimś systemie operacyjnym nie zna danego kroju pisma, to zastąpi go następnym.

Podczas ustawiania krojów, zacznij od czcionki, która najbardziej przypadła Ci do gustu, a definicję zakończ typem generycznym. Dzięki takiemu podejściu, będziesz miał pewność że czcionka szeryfowa nie zostanie zastąpiona bezszeryfową lub odwrotnie, w razie jej niedostępności na danym urządzeniu.

Poniżej znajduje się przykład, dokładnie pokazujący jak należy definować rodzaje czcionki. Jeżeli czcionka składa się z więcej niż jedneko członu, to należy umieścić jej nazwę w cudzysłowiach. Dodatkowe typy czcionek, można podawać po przecinku.

xxxxxxxxxx
 
1
<!DOCTYPE html>
2
<html>
3
<head>
4
    <style>
5
        .serif {
6
            font-family: "Times New Roman", serif;
7
        }
8
​
9
        .sansserif {
10
            font-family: Arial, sans-serif;
11
        }
12
​
13
        .monospace {
14
            font-family: Courier, "Lucida Console", monospace;
15
        }
16
    </style>
17
</head>
18
<body>
19
​
20
    <h1>CSS font-family</h1>
21
    <p class="serif">Ten paragraf wykorzystuje czcionkę Times New Roman</p>
22
    <p class="sansserif">Ten paragraf wykorzystuje czcionkę Arial</p>
23
    <p class="monospace">Ten paragraf wykorzystuje czcionkę Courier. W CSS ma ona zdefiniowana alternatywną  czcionkę Lucida Cosole oraz typ generyczny monospace.</p>
24
​
25
</body>
26
</html>
27
​
Przetestuj

Styl czcionky (font style)

Do ustawiania stylu czcionki służy font-style. Może ona przyjąć wartości:

  • normal - czcionka bez dodatkowego stylu
  • italic - czcionka pisana kursywą
xxxxxxxxxx
 
1
<!DOCTYPE html>
2
<html>
3
<head>
4
    <style>
5
        p.normal {
6
            font-style: normal;
7
        }
8
​
9
        p.italic {
10
            font-style: italic;
11
        }
12
    </style>
13
</head>
14
<body>
15
​
16
    <p class="normal">Paragraf ze stylem normalnym.</p>
17
    <p class="italic">Paragraf pisany kursywą.</p>
18
</body>
19
</html>
20
​
Przetestuj

Pogrubienie (font weight)

Aby uzyskać pogrubienie, należy wykorzystać właściwość font-weight.

xxxxxxxxxx
 
1
<!DOCTYPE html>
2
<html>
3
<head>
4
    <style>
5
        p.normal {
6
            font-weight: normal;
7
        }
8
​
9
        p.bold {
10
            font-weight: bold;
11
        }
12
    </style>
13
</head>
14
<body>
15
    <p class="normal">Czcionka normalna.</p>
16
    <p class="bold">Czcionka pogrubiona.</p>
17
</body>
18
</html>
19
​
Przetestuj

Wariant czcionki (font variant)

Za pomocą właściwości font-variant, można uzyskać ciekawy efekt. Wszystkie małe litery, zostaną przekonwertowane na wielkie litery, jednak o mniejszym rozmiarze czcionki.

xxxxxxxxxx
 
1
<!DOCTYPE html>
2
<html>
3
<head>
4
    <style>
5
        p.normal {
6
            font-variant: normal;
7
        }
8
​
9
        p.small-caps {
10
            font-variant: small-caps;
11
        }
12
    </style>
13
</head>
14
<body>
15
    <p class="normal">Czcionka normalna.</p>
16
    <p class="small-caps">Czcionka ze zmienioną właściwością font-variant</p>
17
</body>
18
</html>
19
​
Przetestuj

Rozmiar czcionki (font size)

Do zmiany rozmiaru czcionki słóży właściwość font-size:

xxxxxxxxxx
 
1
<!DOCTYPE html>
2
<html>
3
<head>
4
    <style>
5
​
6
        p.medium {
7
            font-size: 24px;
8
        }
9
​
10
        p.big {
11
            font-size: 48px;
12
        }
13
    </style>
14
</head>
15
<body>
16
    <p>Czcionka normalna.</p>
17
    <p class="medium">Czcionka o rozmiarze 24px</p>
18
    <p class="big">Czcionka o rozmiarze 48px</p>
19
</body>
20
</html>
21
​
Przetestuj

CSS font

Aby ustawić powyższe właściwości czcionki, możemy też skorzystać ze skróconej formy zapisu, jaką umożliwia właściwość font.

Kolejność w jakiej należy dokonać zapisu to:

  • font-style
  • font-variant
  • font-weight
  • font-size/line-height
  • font-family

Wykorzystując formę skróconą, musisz podać font-size oraz font-family. Podanie pozostałych parametrów jest opcjonalne.

xxxxxxxxxx
 
1
<!DOCTYPE html>
2
<html>
3
<head>
4
    <style>
5
        .custom {
6
            font: 20px Arial, sans-serif;
7
        }
8
    </style>
9
</head>
10
<body>
11
​
12
    <h1>Nagłówek</h1>
13
    <p>Paragraf</p>
14
    <p class="custom">Paragraf ze zmienionymi stylami CSS.</p>
15
</body>
16
</html>
17
​
Przetestuj
Poprzednia Następna

Kursy programistyczne

Oferujemy darmowe kursy programowania od podstaw.


Lista kursów

HTML 5

CSS 3

Javascript

SQL


Kontakt

info@iprogramista.pl


©2019-©2025 Copyright: iprogramista.pl