Skrifttype-relaterede CSS-egenskaber

Articles

Denne artikel forklarer skrifttype-relaterede CSS-egenskaber.

Du kan lære om anvendelserne og hvordan man skriver egenskaber som font-style og font-family.

YouTube Video

Oprettelse af HTML til forhåndsvisning

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>

Typografi (Skrifttype-relaterede)

`font-size` egenskab

 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 er en CSS-egenskab, der bruges til at angive størrelsen på teksten inden for et element. Den bruges til at justere den visuelle vigtighed af teksten og forbedre læsbarheden. font-size kan specificeres ved hjælp af forskellige enheder og metoder.

Hovedmetoder til at angive værdier

Absolutte værdier(px, pt)

Hvis du vil bruge en fast størrelse, der er uafhængig af browseren eller enheden, skal du angive skrifttypestørrelser i absolutte enheder som pixels eller punkter.

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

px: Pixels er den mest almindelige enhed. Angiv størrelsen i trin på 1 pixel.

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

pt: Punkter er enheder, der almindeligvis bruges til tryk. 1 punkt er 1/72 af en tomme.

Relative værdier(em, rem, %)

Du kan også angive relative skrifttypestørrelser baseret på en overordnet eller rodtlements skrifttypestørrelse. Dette er velegnet til responsivt design.

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

em: em er en relativ enhed baseret på skrifttypestørrelsen på det overordnede element. Hvis det overordnede elements font-size er 16px, svarer 1em til 16px.

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

rem: rem er en relativ enhed baseret på skriftstørrelsen af roden (normalt <html> elementet).

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

%: % er angivet som en procentdel i forhold til skriftstørrelsen af det overordnede element.

Nøgleord

Du kan også bruge nøgleord til nemt at angive brugervenlige størrelser.

 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: Disse nøgleord definerer grundlæggende skriftstørrelser, der varierer afhængigt af browseren, men som er lette at bruge.

Relative nøgleord

Du kan angive relative skriftstørrelser ved hjælp af nøgleord i forhold til det overordnede element eller størrelsen på den omgivende tekst.

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

larger: larger gør skriftstørrelsen større end det overordnede elements skriftstørrelse.

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

smaller: smaller gør skriftstørrelsen mindre end det overordnede elements skriftstørrelse.

Almindelige anvendelsestilfælde

I responsivt design bruges em og rem ofte til at angive fleksible skriftstørrelser baseret på størrelsen af de overordnede eller rodenheder.
I fast design eller præcist design er det almindeligt at bruge px til at fastsætte størrelsen.

Eksempler på justering af skriftstørrelse

 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}

Konklusion

font-size er en vigtig egenskab til at justere den visuelle betydning og læsbarheden af tekst. Det er vigtigt at bruge enheder og nøgleord korrekt i henhold til designmålet eller for et fleksibelt responsivt design.

`font-family`-egenskaben

 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}

font-family-egenskaben kan primært angive følgende to typer værdier:.

Specifikke skriftnavne: Angiv navnet på en bestemt skrifttype. Angiv skrifttyper, der er installeret på systemet eller tilgængelige som webskrifttyper.
- Eksempel:
  - Arial
  - Verdana
  - Times New Roman
  - Courier New
  - Georgia
Generisk skrifttypefamilie: Angiv en gruppe fallback-skrifttyper, der skal bruges, når en specifik skrifttype ikke er tilgængelig.
- Eksempel:
  - serif: Serif (f.eks. Times New Roman, Georgia)
  - sans-serif: Sans-serif (f.eks. Arial, Verdana)
  - monospace: Monospace (f.eks. Courier New, Lucida Console)
  - cursive: Cursive (f.eks. Comic Sans MS)
  - fantasy: Fantasy (f.eks. Papyrus, Impact)

Sådan specificerer du `font-family`

Når du specificerer flere skrifttyper, anbefales det at adskille skrifttypenavne med kommaer og angive en generisk skrifttype som en fallback til sidst.

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

I dette tilfælde, hvis Times New Roman ikke er tilgængelig, bruges Georgia, og hvis ingen af dem er tilgængelige, bruges en serif skrifttype.

Egenskaben `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 er en CSS-egenskab, der bruges til at specificere tekstens tykkelse. Det spiller en vigtig rolle i tekstens visuelle vægt og stil og bruges til at ændre skrifttypen. font-weight kan specificeres ved hjælp af tal eller nøgleord for at angive en række tykkelser fra tynd til fed.

Hovedværdier for `font-weight`

Nøgleord

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

normal repræsenterer standard skriftvægt. Det svarer typisk til 400.

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

bold repræsenterer fed tekst. Det svarer typisk til 700.

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

bolder repræsenterer tekst, der er mere fed end sit forældreelement.

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

lighter repræsenterer tekst, der er lettere end sit forældreelement.

Numeriske værdier

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

font-weight kan også specificeres som et tal, der spænder fra 100 til 900. Mindre tal resulterer i tyndere tekst, og større tal resulterer i federe tekst. Normalt understøtter skrifttypefamilier en række specifikke tykkelser, men ikke alle tal er tilgængelige for alle skrifttyper.

100: Tynd
200: Ekstra let
300: Let
400: Normal
500: Mellem
600: Semi-fed
700: Fed
800: Ekstra Fed
900: Sort

Eksempler på, hvordan man bruger `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}

Praktisk Anvendelse

Standardtekst bruger normalt 400 (normal).
Til overskrifter eller fremhævede dele er det almindeligt at bruge 700 (fed).
Afhængigt af designet kan mellemvægte som 500 eller 600 også bruges for at undgå overbetoning.

Sammendrag

font-weight er en egenskab, der angiver tykkelsen af tekst, ved hjælp af nøgleord som normal eller fed, eller tal fra 100 til 900.
lighter og bolder justerer relativt til parent-elementets tykkelse.
Det er vigtigt at vælge en passende font-weight baseret på design og læsbarhed.

`font-style`-egenskaben

 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 er en CSS-egenskab, der bruges til at angive stilen af tegn, især til at anvende kursiv eller normal stil. Denne egenskab bruges ofte til tekstfremhævning og design, især i titler og citater.

Hovedværdier for `font-style`

`normal`

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

normal er standardtegnstil (normalt opretstående tegn).

`italic`

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

italic gør teksten kursiv (skrå). Denne stil kan anvendes, hvis skrifttypen understøtter kursiv.

`oblique`

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

oblique gør teksten skrå. I modsætning til italic, kan teksten kunstigt skråstilles, hvis skrifttypen ikke har en kursiv version.

`oblique <angle>`

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

Angiv en vinkel med oblique for at skråstille teksten med den angivne vinkel. Denne specifikation bruges til yderligere tilpasning af oblique. I øjeblikket understøtter de fleste browsere ikke vinkelangivelse, men nogle gør.

Anvendelse af `font-style`

italic bruges ofte til fremhævning, citater og bogtitler.
oblique bruges ofte, når en skrifttype ikke inkluderer en kursiv stil, som en måde at hælde teksten kunstigt på.
normal bruges, når man vender tilbage til en normal tekststil.

Sammendrag

font-style bruges til at kontrollere tekstens hældning med tre hovedværdier: normal, italic og oblique.
Inden for design bruges kursiv ofte til at fremhæve tekst, og hvis skrifttypen ikke understøtter det, kan oblique bruges til at hælde teksten.

`color`-egenskab

 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}

color-egenskaben er en grundlæggende egenskab i CSS til at angive farven på tekst. Den bruges til at ændre tekstfarven på HTML-elementer og kan angive farver i forskellige formater.

Forklaring:

color-red-klassen angiver tekstfarven som rød ved hjælp af et nøgleord.
- Du kan angive farvenavne som red, blue, green, der er defineret i CSS.
color-hex-klassen angiver farver ved hjælp af hexadecimale farvekoder.
- Du kan angive det med 3 cifre som #F00. I dette tilfælde er #F00 den samme farve som #FF0000.
color-rgb-klassen angiver farver ved hjælp af RGB-formatet.
- RGB: Angiver de røde, grønne og blå komponenter inden for et område fra 0 til 255.
color-rgba-klassen bruger RGBA-formatet til at tilføje gennemsigtighed.
color-hsl-klassen angiver farver ved hjælp af HSL-formatet.
- Farver kan angives med nuance, mætning og lysstyrke. Nuance angives fra 0 til 360 grader, og mætning og lysstyrke angives fra 0% til 100%.
color-hsla-klassen bruger HSLA-formatet til at tilføje gennemsigtighed.

Du kan følge med i ovenstående artikel ved hjælp af Visual Studio Code på vores YouTube-kanal. Husk også at tjekke YouTube-kanalen.

YouTube Video

CSS `@` Regler Tekst-relaterede CSS-egenskaber

Skrifttype-relaterede CSS-egenskaber

YouTube Video

Oprettelse af HTML til forhåndsvisning

Typografi (Skrifttype-relaterede)

font-size egenskab

Hovedmetoder til at angive værdier

Absolutte værdier(px, pt)

Relative værdier(em, rem, %)

Nøgleord

Relative nøgleord

Almindelige anvendelsestilfælde

Eksempler på justering af skriftstørrelse

Konklusion

font-family-egenskaben

Sådan specificerer du font-family

Egenskaben font-weight

Hovedværdier for font-weight

Nøgleord

Numeriske værdier

Eksempler på, hvordan man bruger font-weight

Praktisk Anvendelse

Sammendrag

font-style-egenskaben

Hovedværdier for font-style

normal

italic

oblique

oblique <angle>

Anvendelse af font-style

Sammendrag

color-egenskab

Forklaring:

YouTube Video

`font-size` egenskab

`font-family`-egenskaben

Sådan specificerer du `font-family`

Egenskaben `font-weight`

Hovedværdier for `font-weight`

Eksempler på, hvordan man bruger `font-weight`

`font-style`-egenskaben

Hovedværdier for `font-style`

`normal`

`italic`

`oblique`

`oblique <angle>`

Anvendelse af `font-style`

`color`-egenskab