Właściwości CSS związane z czcionkami

Articles

Ten artykuł wyjaśnia właściwości CSS związane z czcionkami.

Możesz dowiedzieć się o sposobach użycia i jak pisać właściwości takie jak font-style i font-family.

YouTube Video

Tworzenie HTML do podglądu

css-font.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-font.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>Font-Related CSS Properties Example</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Typography (Font-Related)</h2>
 20        </header>
 21        <article>
 22            <h3>font-size</h3>
 23            <section>
 24                <h4>Absolute Values</h4>
 25                <header><h4>font-size: 16px</h4></header>
 26                <section class="sample-view">
 27                    <p class="font-size-px">Font size: 16px</p>
 28                </section>
 29                <header><h4>font-size: 12pt</h4></header>
 30                <section class="sample-view">
 31                    <p class="font-size-pt">Font size: 12pt</p>
 32                </section>
 33            </section>
 34            <section>
 35                <h4>Relative Values</h4>
 36                <header><h4>font-size: 1.2em</h4></header>
 37                <section class="sample-view">
 38                    <p class="font-size-em">Font size: 1.2em</p>
 39                </section>
 40                <header><h4>font-size: 1.5rem</h4></header>
 41                <section class="sample-view">
 42                    <p class="font-size-rem">Font size: 1.5rem</p>
 43                </section>
 44                <header><h4>font-size: 150%</h4></header>
 45                <section class="sample-view">
 46                    <p class="font-size-percent">Font size: 150%</p>
 47                </section>
 48            </section>
 49            <section>
 50                <h4>Keywords</h4>
 51                <header><h4>font-size: small</h4></header>
 52                <section class="sample-view">
 53                    <p class="font-size-small">Font size: small</p>
 54                </section>
 55                <header><h4>font-size: medium%</h4></header>
 56                <section class="sample-view">
 57                    <p class="font-size-medium">Font size: medium (default)</p>
 58                </section>
 59                <header><h4>font-size: large</h4></header>
 60                <section class="sample-view">
 61                    <p class="font-size-large">Font size: large</p>
 62                </section>
 63                <header><h4>font-size: x-large</h4></header>
 64                <section class="sample-view">
 65                    <p class="font-size-x-large">Font size: x-large</p>
 66                </section>
 67            </section>
 68            <section>
 69                <h4>Relative Keywords</h4>
 70                <header><h4>font-size: smaller</h4></header>
 71                <section class="sample-view">
 72                    <p class="font-size-smaller">Font size: smaller</p>
 73                </section>
 74                <header><h4>font-size: larger</h4></header>
 75                <section class="sample-view">
 76                    <p class="font-size-larger">Font size: larger</p>
 77                </section>
 78            </section>
 79        </article>
 80        <article>
 81            <h3>font-family</h3>
 82            <section>
 83                <h4>Specific Font Names</h4>
 84                <header><h4>font-family: Arial, sans-serif</h4></header>
 85                <section class="sample-view">
 86                    <p class="font-family-arial">Font Family Arial</p>
 87                </section>
 88                <header><h4>font-family: Verdana, sans-serif</h4></header>
 89                <section class="sample-view">
 90                    <p class="font-family-verdana">Font Family Verdana</p>
 91                </section>
 92                <header><h4>font-family: "Times New Roman", serif</h4></header>
 93                <section class="sample-view">
 94                    <p class="font-family-times">Font Family Times New Roman</p>
 95                </section>
 96                <header><h4>font-family: "Courier New", monospace</h4></header>
 97                <section class="sample-view">
 98                    <p class="font-family-courier">Font Family Courier New</p>
 99                </section>
100                <header><h4>font-family: Georgia, serif</h4></header>
101                <section class="sample-view">
102                    <p class="font-family-georgia">Font Family Georgia</p>
103                </section>
104            </section>
105            <section>
106                <h4>Generic Font Families</h4>
107                <header><h4>font-family: serif</h4></header>
108                <section class="sample-view">
109                    <p class="font-family-serif">Font Family Serif</p>
110                </section>
111                <header><h4>font-family: sans-serif</h4></header>
112                <section class="sample-view">
113                    <p class="font-family-sans-serif">Font Family Sans-Serif</p>
114                </section>
115                <header><h4>font-family: monospace</h4></header>
116                <section class="sample-view">
117                    <p class="font-family-monospace">Font Family Monospace</p>
118                </section>
119                <header><h4>font-family: cursive</h4></header>
120                <section class="sample-view">
121                    <p class="font-family-cursive">Font Family Cursive</p>
122                </section>
123                <header><h4>font-family: fantasy</h4></header>
124                <section class="sample-view">
125                    <p class="font-family-fantasy">Font Family Fantasy</p>
126                </section>
127            </section>
128        </article>
129        <article>
130            <h3>font-weight</h3>
131            <section>
132                <h4>Keyword Values</h4>
133                <header><h4>font-weight: normal</h4></header>
134                <section class="sample-view">
135                    <p class="font-weight-normal">Font weight: normal</p>
136                </section>
137                <header><h4>font-weight: bold</h4></header>
138                <section class="sample-view">
139                    <p class="font-weight-bold">Font weight: bold</p>
140                </section>
141                <header><h4>font-weight: bolder</h4></header>
142                <section class="sample-view">
143                    <p class="font-weight-bolder">Font weight: bolder</p>
144                </section>
145                <header><h4>font-weight: lighter</h4></header>
146                <section class="sample-view">
147                    <p class="font-weight-lighter">Font weight: lighter</p>
148                </section>
149            </section>
150            <section>
151                <h4>Numeric Values</h4>
152                <header><h4>font-weight: 100</h4></header>
153                <section class="sample-view">
154                    <p class="font-weight-100">Font weight: 100 (Thin)</p>
155                </section>
156                <header><h4>font-weight: 200</h4></header>
157                <section class="sample-view">
158                    <p class="font-weight-200">Font weight: 200 (Extra Light)</p>
159                </section>
160                <header><h4>font-weight: 300</h4></header>
161                <section class="sample-view">
162                    <p class="font-weight-300">Font weight: 300 (Light)</p>
163                </section>
164                <header><h4>font-weight: 400</h4></header>
165                <section class="sample-view">
166                    <p class="font-weight-400">Font weight: 400 (Normal)</p>
167                </section>
168                <header><h4>font-weight: 500</h4></header>
169                <section class="sample-view">
170                    <p class="font-weight-500">Font weight: 500 (Medium)</p>
171                </section>
172                <header><h4>font-weight: 600</h4></header>
173                <section class="sample-view">
174                    <p class="font-weight-600">Font weight: 600 (Semi Bold)</p>
175                </section>
176                <header><h4>font-weight: 700</h4></header>
177                <section class="sample-view">
178                    <p class="font-weight-700">Font weight: 700 (Bold)</p>
179                </section>
180                <header><h4>font-weight: 800</h4></header>
181                <section class="sample-view">
182                    <p class="font-weight-800">Font weight: 800 (Extra Bold)</p>
183                </section>
184                <header><h4>font-weight: 900</h4></header>
185                <section class="sample-view">
186                    <p class="font-weight-900">Font weight: 900 (Black)</p>
187                </section>
188            </section>
189        </article>
190        <article>
191            <h3>font-style</h3>
192            <section>
193                <h4>Keyword Values</h4>
194                <header><h4>font-style: normal</h4></header>
195                <section class="sample-view">
196                    <p class="font-style-normal">This is normal font style.</p>
197                </section>
198                <header><h4>font-style: italic</h4></header>
199                <section class="sample-view">
200                    <p class="font-style-italic">This is italic font style.</p>
201                </section>
202                <header><h4>font-style: oblique</h4></header>
203                <section class="sample-view">
204                    <p class="font-style-oblique">This is oblique font style.</p>
205                </section>
206                <header><h4>font-style: oblique 20deg</h4></header>
207                <section class="sample-view">
208                    <p class="font-style-oblique-20deg">This is an oblique font style with a 20-degree angle.</p>
209                </section>
210            </section>
211        </article>
212        <article>
213            <h3>color</h3>
214            <section>
215                <h4>Color Property Examples</h4>
216                <header><h4>color: red</h4></header>
217                <section class="sample-view">
218                    <p class="color-red">This text is red using a keyword.</p>
219                </section>
220                <header><h4>color: #FF5733</h4></header>
221                <section class="sample-view">
222                    <p class="color-hex">This text is displayed with a hex color code (#FF5733).</p>
223                </section>
224                <header><h4>color: rgb(255, 87, 51)</h4></header>
225                <section class="sample-view">
226                    <p class="color-rgb">This text is displayed using RGB (rgb(255, 87, 51)).</p>
227                </section>
228                <header><h4>color: rgba(255, 87, 51, 0.7)</h4></header>
229                <section class="sample-view">
230                    <p class="color-rgba">This text is displayed using RGBA with transparency (rgba(255, 87, 51, 0.7)).</p>
231                </section>
232                <header><h4>color: hsl(14, 100%, 60%)</h4></header>
233                <section class="sample-view">
234                    <p class="color-hsl">This text is displayed using HSL (hsl(14, 100%, 60%)).</p>
235                </section>
236                <header><h4>color: hsla(14, 100%, 60%, 0.7)</h4></header>
237                <section class="sample-view">
238                    <p class="color-hsla">This text is displayed using HSLA with transparency (hsla(14, 100%, 60%, 0.7)).</p>
239                </section>
240            </section>
241        </article>
242    </main>
243</body>
244</html>

Typografia (związana z czcionkami)

Właściwość `font-size`

 1/* Absolute Values */
 2.font-size-px {
 3    font-size: 16px;
 4}
 5
 6.font-size-pt {
 7    font-size: 12pt;
 8}
 9
10/* Relative Values */
11.font-size-em {
12    font-size: 1.2em; /* 120% of the parent font size */
13}
14
15.font-size-rem {
16    font-size: 1.5rem; /* 150% of the root element's font size */
17}
18
19.font-size-percent {
20    font-size: 150%; /* 150% of the parent font size */
21}
22
23/* Keywords */
24.font-size-medium {
25    font-size: small;
26}
27
28.font-size-medium {
29    font-size: medium;
30}
31
32.font-size-large {
33    font-size: large;
34}
35
36.font-size-x-large {
37    font-size: x-large;
38}
39
40/* Relative Keywords */
41.font-size-larger {
42    font-size: larger;
43}
44
45.font-size-smaller {
46    font-size: smaller;
47}

font-size to właściwość CSS używana do określenia rozmiaru tekstu w elemencie. Służy do dostosowania wizualnej ważności tekstu i poprawy czytelności. font-size można określić za pomocą różnych jednostek i metod.

Główne sposoby określania wartości

Wartości absolutne(px, pt)

Jeśli chcesz użyć stałego rozmiaru niezależnego od przeglądarki lub urządzenia, określ rozmiary czcionek w jednostkach absolutnych, takich jak piksele lub punkty.

1p {
2    font-size: 16px;
3}

px: Piksele są najczęściej używaną jednostką. Określ rozmiar w przyrostach o 1 piksel.

1p {
2    font-size: 12pt;
3}

pt: Punkty to jednostki powszechnie używane w drukarstwie. 1 punkt to 1/72 cala.

Wartości względne(em, rem, %)

Możesz również określić względne rozmiary czcionek na podstawie rozmiaru czcionki elementu nadrzędnego lub korzeniowego. To jest odpowiednie dla projektowania responsywnego.

1p {
2    font-size: 1.2em; /* 120% of the parent element's font size */
3}

em: em to jednostka względna oparta na rozmiarze czcionki elementu nadrzędnego. Jeśli font-size elementu nadrzędnego wynosi 16px, to 1em równa się 16px.

1p {
2    font-size: 1.5rem; /* 150% of the root element's font size */
3}

rem: rem to jednostka względna oparta na rozmiarze czcionki głównego elementu (zazwyczaj elementu <html>).

1p {
2    font-size: 150%; /* 150% of the parent element's font size */
3}

%: % jest określony jako procent w odniesieniu do rozmiaru czcionki elementu nadrzędnego.

Słowa kluczowe

Możesz również używać słów kluczowych, aby łatwo określić rozmiary przyjazne dla użytkownika.

 1p.xx-small {
 2    font-size: xx-small;
 3}
 4p.x-small {
 5    font-size: x-small;
 6}
 7p.small {
 8    font-size: small;
 9}
10p.medium {
11    font-size: medium;
12}
13p.large {
14    font-size: large;
15}
16p.x-large {
17    font-size: x-large;
18}
19p.xx-large {
20    font-size: xx-large;
21}

xx-small, x-small, small, medium, large, x-large, xx-large: Te słowa kluczowe definiują podstawowe rozmiary czcionek, które różnią się w zależności od przeglądarki, ale są łatwe w użyciu.

Słowa kluczowe względne

Możesz określić względne rozmiary czcionek, używając słów kluczowych w odniesieniu do elementu nadrzędnego lub rozmiaru otaczającego tekstu.

1p {
2    font-size: larger;
3}

larger: larger zwiększa rozmiar czcionki w porównaniu do elementu nadrzędnego.

1p {
2    font-size: smaller;
3}

smaller: smaller zmniejsza rozmiar czcionki w porównaniu do elementu nadrzędnego.

Przykłady powszechnego użycia

W projektowaniu responsywnym em i rem są często używane do określania elastycznych rozmiarów czcionek w oparciu o rozmiar elementów nadrzędnych lub głównych.
W projektowaniu stałym lub precyzyjnym często używa się px, aby ustalić rozmiar.

Przykłady dostosowywania rozmiaru czcionki

 1h1 {
 2    font-size: 2.5rem; /* 2.5 times the size of the root element's font size */
 3}
 4
 5p {
 6    font-size: 16px; /* Fixed size */
 7}
 8
 9.small-text {
10    font-size: smaller; /* Smaller than the parent element's size */
11}

Wnioski

font-size to ważna właściwość do dostosowywania wizualnej wagi i czytelności tekstu. Ważne jest odpowiednie używanie jednostek i słów kluczowych zgodnie z celem projektu lub dla elastycznego projektu responsywnego.

Właściwość `font-family`

 1/* Specific Font Names */
 2.font-family-arial {
 3    font-family: Arial, sans-serif;
 4}
 5
 6.font-family-verdana {
 7    font-family: Verdana, sans-serif;
 8}
 9
10.font-family-times {
11    font-family: "Times New Roman", serif;
12}
13
14.font-family-courier {
15    font-family: "Courier New", monospace;
16}
17
18.font-family-georgia {
19    font-family: Georgia, serif;
20}
21
22/* Generic Font Families */
23.font-family-serif {
24    font-family: serif;
25}
26
27.font-family-sans-serif {
28    font-family: sans-serif;
29}
30
31.font-family-monospace {
32    font-family: monospace;
33}
34
35.font-family-cursive {
36    font-family: cursive;
37}
38
39.font-family-fantasy {
40    font-family: fantasy;
41}

Właściwość font-family może zasadniczo określać następujące dwa rodzaje wartości:.

Nazwy określonych czcionek: Określenie nazwy konkretnej czcionki. Określenie czcionek zainstalowanych w systemie lub dostępnych jako czcionki internetowe.
- Przykład:
  - Arial
  - Verdana
  - Times New Roman
  - Courier New
  - Georgia
Ogólna rodzina czcionek: Określenie grupy czcionek rezerwowych do użycia, gdy określona czcionka jest niedostępna.
- Przykład:
  - serif: Serif (np. Times New Roman, Georgia)
  - sans-serif: Sans-serif (np. Arial, Verdana)
  - monospace: Monospace (np. Courier New, Lucida Console)
  - cursive: Cursive (np. Comic Sans MS)
  - fantasy: Fantasy (np. Papirus, Impact)

Jak określić właściwość `font-family`

Podając wiele nazw czcionek, zaleca się oddzielenie ich przecinkami i umieszczenie ogólnej czcionki jako zapasowej na końcu.

1p {
2    font-family: "Times New Roman", Georgia, serif;
3}

W tym przypadku, jeśli Times New Roman jest niedostępny, używana jest Georgia, a jeśli żadna z nich nie jest dostępna, używana jest czcionka z grupy serif.

Właściwość `font-weight`

 1/* Keyword Values */
 2.font-weight-normal {
 3    font-weight: normal; /* Standard thickness (usually 400) */
 4}
 5
 6.font-weight-bold {
 7    font-weight: bold; /* Bold (usually 700) */
 8}
 9
10.font-weight-bolder {
11    font-weight: bolder; /* Bolder than the parent element */
12}
13
14.font-weight-lighter {
15    font-weight: lighter; /* Lighter than the parent element */
16}
17
18/* Numeric Values */
19.font-weight-100 {
20    font-weight: 100; /* Thin (Thin) */
21}
22
23.font-weight-200 {
24    font-weight: 200; /* Extra Light */
25}
26
27.font-weight-300 {
28    font-weight: 300; /* Light */
29}
30
31.font-weight-400 {
32    font-weight: 400; /* Normal */
33}
34
35.font-weight-500 {
36    font-weight: 500; /* Medium */
37}
38
39.font-weight-600 {
40    font-weight: 600; /* Semi Bold */
41}
42
43.font-weight-700 {
44    font-weight: 700; /* Bold */
45}
46
47.font-weight-800 {
48    font-weight: 800; /* Extra Bold */
49}
50
51.font-weight-900 {
52    font-weight: 900; /* Black */
53}

font-weight to właściwość CSS służąca do określania grubości tekstu. Odegra ważną rolę w wizualnym podkreśleniu i stylu tekstu oraz służy do zmiany stylu czcionki. font-weight można określić za pomocą liczb lub słów kluczowych, aby wskazać zakres grubości od cienkiego do pogrubionego.

Główne wartości dla `font-weight`

Słowa kluczowe

1p {
2    font-weight: normal; /* Default thickness */
3}

normal oznacza standardową grubość czcionki. Zwykle odpowiada wartości 400.

1p {
2    font-weight: bold; /* Bold */
3}

bold oznacza pogrubiony tekst. Zwykle odpowiada wartości 700.

1p {
2    font-weight: bolder; /* Bolder than the parent element's font-weight */
3}

bolder oznacza tekst bardziej pogrubiony niż element rodzic.

1p {
2    font-weight: lighter; /* Lighter than the parent element's font-weight */
3}

lighter oznacza tekst lżejszy niż element rodzic.

Wartości liczbowe

1p {
2    font-weight: 300; /* Light text */
3}
4
5h1 {
6    font-weight: 700; /* Bold text */
7}

font-weight można również określić jako liczbę z zakresu od 100 do 900. Mniejsze liczby oznaczają cieńszy tekst, a większe liczby oznaczają bardziej pogrubiony tekst. Zwykle rodziny czcionek obsługują określony zakres grubości, ale nie wszystkie liczby są dostępne dla wszystkich czcionek.

100: Cienka
200: Bardzo cienka
300: Lekka
400: Normalna
500: Średnia
600: Półpogrubiona
700: Pogrubiona
800: Ekstra Pogrubione
900: Czarny

Przykłady użycia `font-weight`

 1h1 {
 2    font-weight: 900; /* Black (Extra Bold) */
 3}
 4
 5p.normal {
 6    font-weight: normal; /* Standard thickness */
 7}
 8
 9p.bold {
10    font-weight: bold; /* Bold */
11}
12
13p.lighter {
14    font-weight: lighter; /* Lighter than the parent element */
15}
16
17p.custom-weight {
18    font-weight: 500; /* Medium */
19}

Praktyczne zastosowanie

Standardowy tekst zazwyczaj używa 400 (normalny).
Dla nagłówków lub podkreślonych części często używa się 700 (pogrubiony).
W zależności od projektu można również używać pośrednich wag takich jak 500 czy 600, aby uniknąć zbyt mocnego podkreślenia.

Podsumowanie

font-weight to właściwość określająca grubość tekstu, używając słów kluczowych takich jak normalny lub pogrubiony, lub liczb od 100 do 900.
lighter i bolder dostosowują się względnie do grubości elementu nadrzędnego.
Wybór odpowiedniego font-weight w oparciu o projekt i czytelność jest istotny.

Właściwość `font-style`

 1/* Font style examples */
 2.font-style-normal {
 3    font-style: normal; /* Normal font style */
 4}
 5
 6.font-style-italic {
 7    font-style: italic; /* Italic */
 8}
 9
10.font-style-oblique {
11    font-style: oblique; /* Slanted text */
12}
13
14.font-style-oblique-20deg {
15    font-style: oblique 20deg; /* Slanted text with a 20-degree angle */
16}

font-style to właściwość CSS używana do określenia stylu znaków, szczególnie do stosowania stylów kursywy lub zwykłego tekstu. Właściwość ta jest często używana do podkreślenia tekstu i projektów, szczególnie w tytułach i cytatach.

Główne wartości `font-style`

`normal`

1p {
2    font-style: normal;
3}

normalny to standardowy styl znaków (normalnie pionowe litery).

`italic`

1p {
2    font-style: italic;
3}

italic sprawia, że tekst staje się kursywą (pochylony). Styl ten można zastosować, jeśli rodzina czcionek obsługuje kursywę.

`oblique`

1p {
2    font-style: oblique;
3}

oblique powoduje, że tekst jest pochylony. W przeciwieństwie do italic, jeśli czcionka nie ma wersji kursywy, to oblique może sztucznie pochylać tekst.

`oblique <angle>`

1p {
2    font-style: oblique 20deg;
3}

Określ kąt za pomocą oblique, aby pochylić tekst pod określonym kątem. Specyfikacja ta służy do dalszego dostosowywania stylu oblique. Obecnie większość przeglądarek nie obsługuje określania kąta, ale niektóre to robią.

Zastosowanie `font-style`

italic jest często używany do podkreślenia, cytatów i tytułów książek.
oblique jest często używane, gdy czcionka nie zawiera stylu kursywy, jako sposób na sztuczne pochylenie tekstu.
normal jest używane, gdy powracamy do normalnego stylu tekstu.

Podsumowanie

font-style służy do kontrolowania pochylenia tekstu, z trzema głównymi wartościami: normal, italic i oblique.
W projektowaniu kursywa jest często używana do wyróżniania tekstu, a jeśli czcionka jej nie obsługuje, można użyć oblique, aby pochylić tekst.

Właściwość `color`

 1/* Color examples */
 2.color-red {
 3    color: red;
 4}
 5
 6.color-hex {
 7    color: #FF5733;
 8}
 9
10.color-rgb {
11    color: rgb(255, 87, 51);
12}
13
14.color-rgba {
15    color: rgba(255, 87, 51, 0.7);
16}
17
18.color-hsl {
19    color: hsl(14, 100%, 60%);
20}
21
22.color-hsla {
23    color: hsla(14, 100%, 60%, 0.7);
24}

Właściwość color jest podstawową właściwością w CSS, służącą do określania koloru tekstu. Jest używana do zmiany koloru tekstu elementów HTML i może określać kolory w różnych formatach.

Wyjaśnienie:

Klasa color-red określa kolor tekstu jako czerwony za pomocą słowa kluczowego.
- Można określić nazwy kolorów, takie jak red, blue, green, które są zdefiniowane w CSS.
Klasa color-hex określa kolory za pomocą szesnastkowych kodów kolorów.
- Można użyć 3 cyfr, takich jak #F00. W tym przypadku #F00 to ten sam kolor co #FF0000.
Klasa color-rgb określa kolory za pomocą formatu RGB.
- RGB: Określa składowe czerwonego, zielonego i niebieskiego w zakresie od 0 do 255.
Klasa color-rgba używa formatu RGBA do dodania przezroczystości.
Klasa color-hsl określa kolory za pomocą formatu HSL.
- Kolory można określić za pomocą odcienia, nasycenia i jasności. Odcień określa się w zakresie od 0 do 360 stopni, a nasycenie i jasność w zakresie od 0% do 100%.
Klasa color-hsla używa formatu HSLA do dodania przezroczystości.

Możesz śledzić ten artykuł, korzystając z Visual Studio Code na naszym kanale YouTube. Proszę również sprawdzić nasz kanał YouTube.

YouTube Video

Reguły CSS `@`Właściwości CSS związane z tekstem

Właściwości CSS związane z czcionkami

YouTube Video

Tworzenie HTML do podglądu

Typografia (związana z czcionkami)

Właściwość font-size

Główne sposoby określania wartości

Wartości absolutne(px, pt)

Wartości względne(em, rem, %)

Słowa kluczowe

Słowa kluczowe względne

Przykłady powszechnego użycia

Przykłady dostosowywania rozmiaru czcionki

Wnioski

Właściwość font-family

Jak określić właściwość font-family

Właściwość font-weight

Główne wartości dla font-weight

Słowa kluczowe

Wartości liczbowe

Przykłady użycia font-weight

Praktyczne zastosowanie

Podsumowanie

Właściwość font-style

Główne wartości font-style

normal

italic

oblique

oblique <angle>

Zastosowanie font-style

Podsumowanie

Właściwość color

Wyjaśnienie:

YouTube Video

Właściwość `font-size`

Właściwość `font-family`

Jak określić właściwość `font-family`

Właściwość `font-weight`

Główne wartości dla `font-weight`

Przykłady użycia `font-weight`

Właściwość `font-style`

Główne wartości `font-style`

`normal`

`italic`

`oblique`

`oblique <angle>`

Zastosowanie `font-style`

Właściwość `color`