CSS Font-egenskab bruges til at styre udseendet af tekster. Ved at bruge CSS-fontegenskaben kan du ændre tekststørrelse, farve, stil og mere. Du har allerede studeret, hvordan man gør tekst fed eller understreget. Her vil du også vide, hvordan du ændrer størrelsen på din skrifttype ved hjælp af procent.
Dette er nogle vigtige skrifttypeattributter:
1) CSS-skriftfarve
CSS-skriftfarve er en selvstændig egenskab i CSS, selvom det ser ud til, at det er en del af CSS-skrifttyper. Det bruges til at ændre farven på teksten.
Der er tre forskellige formater til at definere en farve:
- Med et farvenavn
- Efter hexadecimal værdi
- Af RGB
I ovenstående eksempel har vi defineret alle disse formater.
streng understreng java
body { font-size: 100%; } h1 { color: red; } h2 { color: #9000A1; } p { color:rgb(0, 220, 98); } } <h2>This heading is shown in serif.</h2> <p>This paragraph is written in monospace.</p> Test det nu Produktion:
<h2>This heading is shown in sans-serif.</h2> <h3>This heading is shown in serif.</h3> <p>This paragraph is written in monospace.</p>
3) CSS-skriftstørrelse
CSS-skriftstørrelsesegenskab bruges til at ændre skriftstørrelsen.
Disse er de mulige værdier, der kan bruges til at indstille skriftstørrelsen:
| Skriftstørrelsesværdi | Beskrivelse |
|---|---|
| xx-lille | bruges til at vise den ekstremt lille tekststørrelse. |
| x-lille | bruges til at vise den ekstra lille tekststørrelse. |
| lille | bruges til at vise lille tekststørrelse. |
| medium | bruges til at vise mellem tekststørrelse. |
| stor | bruges til at vise stor tekststørrelse. |
| x-stor | bruges til at vise ekstra stor tekststørrelse. |
| xx-stor | bruges til at vise ekstremt stor tekststørrelse. |
| mindre | bruges til at vise en forholdsvis mindre tekststørrelse. |
| større | bruges til at vise en forholdsvis større tekststørrelse. |
| størrelse i pixels eller % | bruges til at indstille værdien i procent eller i pixels. |
Practice CSS font-size property <p> This font size is extremely small.</p> <p> This font size is extra small</p> <p> This font size is small</p> <p> This font size is medium. </p> <p> This font size is large. </p> <p> This font size is extra large. </p> <p> This font size is extremely large. </p> <p> This font size is smaller. </p> <p> This font size is larger. </p> <p> This font size is set on 200%. </p> <p> This font size is 20 pixels. </p>Test det nu
Produktion:
Denne skriftstørrelse er ekstremt lille.
Denne skriftstørrelse er ekstra lille
Denne skriftstørrelse er lille
Denne skriftstørrelse er medium.
Denne skriftstørrelse er stor.
Denne skriftstørrelse er ekstra stor.
eksempel på java-understreng
Denne skriftstørrelse er ekstremt stor.
Denne skriftstørrelse er mindre.
Denne skriftstørrelse er større.
Denne skriftstørrelse er indstillet til 200%.
Denne skriftstørrelse er 20 pixels.
4) CSS-skrifttypestil
CSS Font style egenskab definerer hvilken type skrifttype du vil vise. Den kan være kursiv, skrå eller normal.
body { font-size: 100%; } h2 { font-style: italic; } h3 { font-style: oblique; } h4 { font-style: normal; } } <h2>This heading is shown in italic font.</h2> <h3>This heading is shown in oblique font.</h3> <h4>This heading is shown in normal font.</h4> Test det nu Produktion:
<h2>This heading is shown in italic font.</h2> <h3>This heading is shown in oblique font.</h3> <h4>This heading is shown in normal font.</h4>
5) CSS-skrifttypevariant
CSS font variant egenskab angiver, hvordan man indstiller font variant af et element. Det kan være normalt og small-caps.
sat i java
p { font-variant: small-caps; } h3 { font-variant: normal; } <h3>This heading is shown in normal font.</h3> <p>This paragraph is shown in small font.</p> Test det nu Produktion:
<h3>This heading is shown in normal font.</h3> <p>This paragraph is shown in small font.</p>
6) CSS-skrifttypevægt
CSS-skrifttypevægtegenskaben definerer skrifttypens vægt og angiver, hvor fed en skrifttype er. De mulige værdier for skriftvægt kan være normal, fed, dristigere, lysere eller tal (100, 200..... op til 900).
Denne skrifttype er fed.
Denne skrifttype er mere fed.
Denne skrifttype er lysere.
Denne skrifttype vejer 100.
Denne skrifttype vejer 200.
Denne skrifttype vejer 300.
Denne skrifttype vejer 400.
Denne skrifttype vejer 500.
Denne skrifttype vejer 600.
Denne skrifttype vejer 700.
Denne skrifttype vejer 800.
Denne skrifttype vejer 900.
Test det nuProduktion:
Denne skrifttype er fed.
reactjs kort
Denne skrifttype er mere fed.
Denne skrifttype er lysere.
Denne skrifttype vejer 100.
Denne skrifttype vejer 200.
Denne skrifttype vejer 300.
Denne skrifttype vejer 400.
Denne skrifttype vejer 500.
Denne skrifttype vejer 600.
Denne skrifttype vejer 700.
Denne skrifttype vejer 800.
hvordan man kører et script i linux
Denne skrifttype vejer 900.