Skriftrelaterte CSS-egenskaper

Articles

Denne artikkelen forklarer skriftrelaterte CSS-egenskaper.

Du kan lære om bruksområdene og hvordan du skriver egenskaper som font-style og font-family.

YouTube Video

Opprette HTML for 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 (Skriftrelatert)

`font-size`-egenskapen

 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-egenskap som brukes til å angi størrelsen på tekst i et element. Den brukes for å justere tekstens visuelle betydning og forbedre lesbarheten. font-size kan angis ved hjelp av forskjellige enheter og metoder.

Hovedmåter for å angi verdier

Absolutte verdier(px, pt)

Hvis du vil bruke en fast størrelse som er uavhengig av nettleser eller enhet, angir du skriftstørrelser i absolutte enheter som piksler eller punkter.

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

px: Piksler er den vanligste enheten. Angi størrelsen i trinn på 1 piksel.

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

pt: Punkter er enheter som ofte brukes i trykking. 1 punkt er 1/72 av en tomme.

Relative verdier(em, rem, %)

Du kan også angi relative skriftstørrelser basert på skriftstørrelsen til et foreldre- eller rootelement. Dette er egnet for responsivt design.

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

em: em er en relativ enhet basert på skriftstørrelsen til foreldre-elementet. Hvis foreldre-elementets font-size er 16px, tilsvarer 1em 16px.

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

rem: rem er en relativ enhet basert på skriftstørrelsen til rootelementet (vanligvis <html>-elementet).

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

%: % angis som en prosentandel relativt til skriftstørrelsen til det overordnede elementet.

Nøkkelord

Du kan også bruke nøkkelord for enkelt å spesifisere brukervennlige 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økkelordene definerer grunnleggende skriftstørrelser som varierer etter nettleser, men som er enkle å bruke.

Relative nøkkelord

Du kan angi relative skriftstørrelser ved hjelp av nøkkelord i forhold til det overordnede elementet eller størrelsen på den omkringliggende teksten.

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

larger: larger gjør skriftstørrelsen større enn det overordnede elementets skriftstørrelse.

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

smaller: smaller gjør skriftstørrelsen mindre enn det overordnede elementets skriftstørrelse.

Vanlige bruksområder

I responsivt design brukes ofte em og rem for å angi fleksible skriftstørrelser basert på størrelsen til de overordnede eller rootelementene.
I fast design eller presist design er det vanlig å bruke px for å låse størrelsen.

Eksempler på justering av skriftstørrelser

 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}

Konklusjon

font-size er en viktig egenskap for å justere den visuelle betydningen og lesbarheten til tekst. Det er viktig å bruke enheter og nøkkelord på riktig måte i henhold til designformålet eller for et fleksibelt responsivt design.

`font-family`-egenskapen

 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-egenskapen kan hovedsakelig spesifisere følgende to typer verdier:.

Spesifikke fontnavn: Angi navnet på en bestemt skrift. Angi skrifttyper som er installert på systemet eller tilgjengelige som webfonter.
- Eksempel:
  - Arial
  - Verdana
  - Times New Roman
  - Courier New
  - Georgia
Generisk skriftfamilie: Angi en gruppe fallback-skrifter som skal brukes når en spesifikk skrift ikke er tilgjengelig.
- 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)

Hvordan spesifisere `font-family`

Når du spesifiserer flere fonter, anbefales det å skille fontnavn med komma og oppgi en generell font som en reserve til slutt.

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

I dette tilfellet, hvis Times New Roman ikke er tilgjengelig, brukes Georgia, og hvis ingen av dem er tilgjengelige, brukes en serif-font.

`font-weight`-egenskapen

 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-egenskap som brukes til å spesifisere tekstens tykkelse. Den spiller en viktig rolle i tekstens visuelle fremheving og stil, og brukes til å endre skrifttypestilen. font-weight kan angis ved hjelp av tall eller nøkkelord for å indikere et spekter av tykkelser fra tynn til fet.

Hovedverdier for `font-weight`

Nøkkelord

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

normal representerer standard skriftvekt. Det tilsvarer vanligvis 400.

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

bold representerer fet tekst. Det tilsvarer vanligvis 700.

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

bolder representerer tekst som er fetere enn dets overordnede element.

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

lighter representerer tekst som er lettere enn dets overordnede element.

Numeriske verdier

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

font-weight kan også angis som et tall, fra 100 til 900. Mindre tall gir tynnere tekst, og større tall gir fetere tekst. Vanligvis støtter fontfamilier et spekter av spesifikke tykkelser, men ikke alle tall er tilgjengelige for alle fonter.

100: Tynn
200: Ekstra lett
300: Lett
400: Normal
500: Medium
600: Semi fet
700: Fet
800: Ekstra Fet
900: Svart

Eksempler på hvordan man bruker `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 bruk

Standardtekst bruker vanligvis 400 (normal).
For overskrifter eller fremhevede deler er det vanlig å bruke 700 (bold).
Avhengig av design, kan mellomvekter som 500 eller 600 også brukes for å unngå overbetoning.

Sammendrag

font-weight er en egenskap som spesifiserer tykkelsen på tekst, ved bruk av nøkkelord som normal eller bold, eller tall fra 100 til 900.
lighter og bolder justerer seg relativt til tykkelsen på overordnet element.
Å velge en passende font-weight basert på design og lesbarhet er viktig.

`font-style`-egenskapen

 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-egenskap brukt for å spesifisere karakterstil, spesielt for å bruke kursiv eller vanlig stil. Denne egenskapen brukes ofte for å fremheve tekst og design, spesielt i overskrifter og sitater.

Hovedverdier for `font-style`

`normal`

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

normal er standard karakterstil (vanligvis stående tegn).

`italic`

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

italic gjør teksten kursiv (skråstilt). Denne stilen kan brukes hvis skriftfamilien støtter kursiv.

`oblique`

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

oblique gjør teksten skråstilt. I motsetning til italic, kan dette kunstig skråstille teksten hvis fonten ikke har en kursiv versjon.

`oblique <angle>`

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

Spesifiser en vinkel med oblique for å skråstille teksten med den angitte vinkelen. Denne spesifikasjonen er for å ytterligere tilpasse oblique. For øyeblikket støtter de fleste nettlesere ikke spesifikasjon av vinkler, men noen gjør det.

Bruk av `font-style`

italic brukes ofte for fremheving, sitater og boktitler.
oblique brukes ofte når en font ikke inkluderer en kursiv stil, som en metode for å skråstille teksten kunstig.
normal brukes for å gå tilbake til en normal tekststil.

Sammendrag

font-style brukes for å kontrollere tekstens helling, med tre hovedverdier: normal, italic og oblique.
Innen design brukes kursiv ofte for å fremheve tekst, og hvis fonten ikke støtter det, kan oblique brukes for å skråstille teksten.

`color`-egenskapen

 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-egenskapen er en grunnleggende egenskap i CSS for å spesifisere tekstens farge. Den brukes til å endre tekstfargen i HTML-elementer og kan spesifisere farger i ulike formater.

Forklaring:

color-red-klassen spesifiserer tekstfargen som rød ved bruk av et nøkkelord.
- Du kan spesifisere fargenavn som red, blue, green som er definert i CSS.
color-hex-klassen spesifiserer farger ved hjelp av heksadesimale fargekoder.
- Du kan spesifisere med 3 sifre som #F00. I dette tilfellet er #F00 samme farge som #FF0000.
color-rgb-klassen spesifiserer farger ved hjelp av RGB-formatet.
- RGB: Spesifiserer de røde, grønne og blå komponentene innenfor et område fra 0 til 255.
color-rgba-klassen bruker RGBA-formatet for å legge til gjennomsiktighet.
color-hsl-klassen spesifiserer farger ved hjelp av HSL-formatet.
- Farger kan spesifiseres med nyanse, metning og lyshet. Nyanse spesifiseres fra 0 til 360 grader, og metning og lyshet spesifiseres fra 0% til 100%.
color-hsla-klassen bruker HSLA-formatet for å legge til gjennomsiktighet.

Du kan følge med på artikkelen ovenfor ved å bruke Visual Studio Code på vår YouTube-kanal. Vennligst sjekk ut YouTube-kanalen.

YouTube Video

CSS-`@`-regler Tekstrelaterte CSS-egenskaper

Skriftrelaterte CSS-egenskaper

YouTube Video

Opprette HTML for forhåndsvisning

Typografi (Skriftrelatert)

font-size-egenskapen

Hovedmåter for å angi verdier

Absolutte verdier(px, pt)

Relative verdier(em, rem, %)

Nøkkelord

Relative nøkkelord

Vanlige bruksområder

Eksempler på justering av skriftstørrelser

Konklusjon

font-family-egenskapen

Hvordan spesifisere font-family

font-weight-egenskapen

Hovedverdier for font-weight

Nøkkelord

Numeriske verdier

Eksempler på hvordan man bruker font-weight

Praktisk bruk

Sammendrag

font-style-egenskapen

Hovedverdier for font-style

normal

italic

oblique

oblique <angle>

Bruk av font-style

Sammendrag

color-egenskapen

Forklaring:

YouTube Video

`font-size`-egenskapen

`font-family`-egenskapen

Hvordan spesifisere `font-family`

`font-weight`-egenskapen

Hovedverdier for `font-weight`

Eksempler på hvordan man bruker `font-weight`

`font-style`-egenskapen

Hovedverdier for `font-style`

`normal`

`italic`

`oblique`

`oblique <angle>`

Bruk av `font-style`

`color`-egenskapen