Typsnittrelaterade CSS-egenskaper

Articles

Den här artikeln förklarar typsnittrelaterade CSS-egenskaper.

Du kan lära dig om användningsområden och hur man skriver egenskaper som font-style och font-family.

YouTube Video

Skapa HTML för förhandsgranskning

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 (Typsnittrelaterat)

`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 är en CSS-egenskap som används för att ange storleken på text inom ett element. Den används för att justera textens visuella betydelse och förbättra läsbarheten. font-size kan anges med olika enheter och metoder.

Huvudsakliga sätt att specificera värden

Absoluta värden(px, pt)

Om du vill använda en fast storlek som är oberoende av webbläsaren eller enheten, specificera teckenstorlekar i absoluta enheter som pixlar eller punkter.

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

px: Pixlar är den vanligaste enheten. Specificera storleken i steg om 1 pixel.

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

pt: Punkter är enheter som vanligtvis används vid tryck. 1 punkt är 1/72 tum.

Relativa värden(em, rem, %)

Du kan också specificera relativa teckenstorlekar baserat på storleken på ett överordnat eller rot-element. Detta är lämpligt för responsiv design.

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

em: em är en relativ enhet baserad på teckenstorleken för det överordnade elementet. Om det överordnade elementets font-size är 16px, så motsvarar 1em 16px.

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

rem: rem är en relativ enhet baserad på teckensnittsstorleken för rot-elementet (vanligtvis <html>-elementet).

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

%: % anges som en procentandel i förhållande till teckensnittsstorleken för föräldraelementet.

Nyckelord

Du kan också använda nyckelord för att enkelt ange användarvänliga storlekar.

 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: Dessa nyckelord definierar grundläggande teckensnittsstorlekar som kan variera beroende på webbläsare men är enkla att använda.

Relativa nyckelord

Du kan ange relativa teckensnittsstorlekar med hjälp av nyckelord i förhållande till föräldraelementet eller den omgivande textstorleken.

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

larger: larger gör teckensnittsstorleken större än den för föräldraelementet.

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

smaller: smaller gör teckensnittsstorleken mindre än den för föräldraelementet.

Vanliga exempel på användning

I responsiv design används ofta em och rem för att ange flexibla teckensnittsstorlekar baserade på storleken på föräldra- eller rotelement.
I fast design eller exakt design är det vanligt att använda px för att fixa storleken.

Exempel på justering av teckensnittsstorlek

 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}

Slutsats

font-size är en viktig egenskap för att justera textens visuella framtoning och läsbarhet. Det är viktigt att använda enheter och nyckelord på lämpligt sätt beroende på designsyftet eller för flexibel responsiv 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 i huvudsak ange följande två typer av värden:.

Specifika teckensnittsnamn: Ange namnet på ett specifikt teckensnitt. Ange teckensnitt som är installerade i systemet eller tillgängliga som webbsnitt.
- Exempel:
  - Arial
  - Verdana
  - Times New Roman
  - Courier New
  - Georgia
Generisk teckensnittsgrupp: Ange en grupp av reservteckensnitt som ska användas när ett specifikt teckensnitt inte är tillgängligt.
- Exempel:
  - serif: Serif (t.ex., Times New Roman, Georgia)
  - sans-serif: Sans-serif (t.ex., Arial, Verdana)
  - monospace: Monospace (t.ex., Courier New, Lucida Console)
  - cursive: Cursive (t.ex., Comic Sans MS)
  - fantasy: Fantasi (t.ex. Papyrus, Impact)

Hur man specificerar `font-family`

När du specificerar flera typsnitt rekommenderas det att separera typsnittens namn med kommatecken och ange ett generiskt typsnitt som reservalternativ sist.

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

I detta fall, om Times New Roman inte är tillgängligt, används Georgia, och om inget av dem är tillgängligt används ett serif-typsnitt.

Egenskapen `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 är en CSS-egenskap som används för att specificera textens tjocklek. Den spelar en viktig roll för textens visuella betoning och stil och används för att ändra typsnittsstil. font-weight kan specificeras med hjälp av siffror eller nyckelord för att indikera ett intervall av tjocklekar från tunn till fet.

Huvudvärden för `font-weight`

Nyckelord

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

normal representerar standardteckensnittets vikt. Det motsvarar vanligtvis 400.

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

bold representerar fetstil. Det motsvarar vanligtvis 700.

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

bolder representerar text som är fetare än dess föräldraelement.

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

lighter representerar text som är lättare än dess föräldraelement.

Numeriska värden

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

font-weight kan också specificeras som ett nummer i intervallet från 100 till 900. Lägre nummer ger tunnare text, och högre nummer ger fetare text. Vanligtvis stöder typsnittsfamiljer ett visst intervall av tjocklekar, men inte alla nummer är tillgängliga för alla typsnitt.

100: Tunn
200: Extra tunn
300: Ljus
400: Normal
500: Medium
600: Halvfet
700: Fet
800: Extra Fet
900: Svart

Exempel på hur man använder `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 användning

Standardtext använder vanligtvis 400 (normal).
För rubriker eller betonade delar är det vanligt att använda 700 (bold).
Beroende på designen kan mellanvikter som 500 eller 600 också användas för att undvika överbetoning.

Sammanfattning

font-weight är en egenskap som specificerar textens tjocklek, med hjälp av nyckelord som normal eller bold, eller siffror från 100 till 900.
lighter och bolder justerar sig relativt till föräldraelementets tjocklek.
Att välja en lämplig font-weight är viktigt för både design och läsbarhet.

Egenskapen `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 är en CSS-egenskap som används för att specificera teckenstil, särskilt för att tillämpa kursiv eller normal stil. Den här egenskapen används ofta för att betona text och design, särskilt i titlar och citat.

Huvudvärden för `font-style`

`normal`

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

normal är standardteckenstilen (normalt stående tecken).

`italic`

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

italic gör texten kursiv (lutande). Denna stil kan tillämpas om teckensnittet stöder kursiv stil.

`oblique`

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

oblique gör texten lutande. Till skillnad från italic kan texten lutas artificiellt om teckensnittet inte har en kursiv version.

`oblique <angle>`

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

Ange en vinkel med oblique för att luta texten med den angivna vinkeln. Denna specifikation är för att ytterligare anpassa oblique. För närvarande stöder de flesta webbläsare inte vinkelspecifikation, men vissa gör det.

Användning av `font-style`

italic används ofta för betoning, citat och boktitlar.
oblique används ofta när ett typsnitt inte inkluderar en kursiv stil, som ett sätt att luta texten artificiellt.
normal används när man återgår till en normal textstil.

Sammanfattning

font-style används för att styra lutningen på texten, med tre huvudsakliga värden: normal, italic och oblique.
Inom design används kursiv stil ofta för att framhäva text, och om typsnittet inte stödjer det kan oblique användas för att luta texten.

`color`-egenskap

 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 är en grundläggande egenskap i CSS för att ange färgen på text. Den används för att ändra textfärgen på HTML-element och kan specificera färger i olika format.

Förklaring:

Klassen color-red anger textfärgen som röd genom att använda ett nyckelord.
- Du kan ange färgnamn som red, blue, green som är definierade i CSS.
Klassen color-hex anger färger med hjälp av hexadecimala färgkoder.
- Du kan ange det med 3 siffror som #F00. I detta fall är #F00 samma färg som #FF0000.
Klassen color-rgb anger färger med hjälp av RGB-formatet.
- RGB: Anger de röda, gröna och blå komponenterna inom ett intervall från 0 till 255.
Klassen color-rgba använder RGBA-format för att lägga till transparens.
Klassen color-hsl anger färger med hjälp av HSL-formatet.
- Färger kan anges med nyans (hue), mättnad (saturation) och ljusstyrka (lightness). Nyans (hue) anges från 0 till 360 grader och mättnad samt ljusstyrka anges från 0% till 100%.
Klassen color-hsla använder HSLA-formatet för att lägga till transparens.

Du kan följa med i artikeln ovan med hjälp av Visual Studio Code på vår YouTube-kanal. Vänligen kolla även in YouTube-kanalen.

YouTube Video

CSS `@`-regler Textrelaterade CSS-egenskaper

Typsnittrelaterade CSS-egenskaper

YouTube Video

Skapa HTML för förhandsgranskning

Typografi (Typsnittrelaterat)

font-size-egenskapen

Huvudsakliga sätt att specificera värden

Absoluta värden(px, pt)

Relativa värden(em, rem, %)

Nyckelord

Relativa nyckelord

Vanliga exempel på användning

Exempel på justering av teckensnittsstorlek

Slutsats

font-family-egenskapen

Hur man specificerar font-family

Egenskapen font-weight

Huvudvärden för font-weight

Nyckelord

Numeriska värden

Exempel på hur man använder font-weight

Praktisk användning

Sammanfattning

Egenskapen font-style

Huvudvärden för font-style

normal

italic

oblique

oblique <angle>

Användning av font-style

Sammanfattning

color-egenskap

Förklaring:

YouTube Video

`font-size`-egenskapen

`font-family`-egenskapen

Hur man specificerar `font-family`

Egenskapen `font-weight`

Huvudvärden för `font-weight`

Exempel på hur man använder `font-weight`

Egenskapen `font-style`

Huvudvärden för `font-style`

`normal`

`italic`

`oblique`

`oblique <angle>`

Användning av `font-style`

`color`-egenskap