CSS Font-egenskapen brukes til å kontrollere utseendet på tekster. Ved å bruke CSS-fontegenskapen kan du endre tekststørrelse, farge, stil og mer. Du har allerede studert hvordan du gjør tekst fet eller understreket. Her vil du også vite hvordan du endrer størrelsen på skriften din med prosentandel.
Dette er noen viktige fontattributter:
1) CSS-skriftfarge
CSS-skriftfarge er et frittstående attributt i CSS, selv om det ser ut til at det er en del av CSS-fonter. Den brukes til å endre fargen på teksten.
Det er tre forskjellige formater for å definere en farge:
- Med et fargenavn
- Etter heksadesimal verdi
- Av RGB
I eksemplet ovenfor har vi definert alle disse formatene.
java med swing
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 nå Produksjon:
<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-fontstørrelse-egenskapen brukes til å endre størrelsen på skriften.
Dette er de mulige verdiene som kan brukes til å angi skriftstørrelsen:
| Skriftstørrelse Verdi | Beskrivelse |
|---|---|
| xx-liten | brukes til å vise den ekstremt lille tekststørrelsen. |
| x-liten | brukes til å vise den ekstra lille tekststørrelsen. |
| liten | brukes til å vise liten tekststørrelse. |
| medium | brukes til å vise middels tekststørrelse. |
| stor | brukes til å vise stor tekststørrelse. |
| x-stor | brukes til å vise ekstra stor tekststørrelse. |
| xx-stor | brukes til å vise ekstremt stor tekststørrelse. |
| mindre | brukes til å vise relativt mindre tekststørrelse. |
| større | brukes til å vise forholdsvis større tekststørrelse. |
| størrelse i piksler eller % | brukes til å angi verdi i prosent eller piksler. |
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 nå
Produksjon:
Denne skriftstørrelsen er ekstremt liten.
Denne skriftstørrelsen er ekstra liten
Denne skriftstørrelsen er liten
Denne skriftstørrelsen er middels.
Denne skriftstørrelsen er stor.
Denne skriftstørrelsen er ekstra stor.
eksempel på java-understreng
Denne skriftstørrelsen er ekstremt stor.
Denne skriftstørrelsen er mindre.
Denne skriftstørrelsen er større.
Denne skriftstørrelsen er satt til 200 %.
Denne skriftstørrelsen er 20 piksler.
4) CSS-skriftstil
CSS Font style-egenskap definerer hvilken type font du vil vise. Det kan være kursivt, skrått eller normalt.
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 nå Produksjon:
<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-fontvariant
CSS-fontvariant-egenskapen angir hvordan du angir fontvariant av et element. Det kan være vanlige og small-caps.
satt 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 nå Produksjon:
<h3>This heading is shown in normal font.</h3> <p>This paragraph is shown in small font.</p>
6) CSS Font Vekt
CSS font weight-egenskap definerer vekten på skriften og spesifiserer hvor fet en font er. De mulige verdiene for skriftvekt kan være normal, fet, fetere, lysere eller tall (100, 200... opptil 900).
Denne skriften er fet.
Denne skriften er dristigere.
Denne skriften er lysere.
Denne skriften veier 100.
Denne skriften veier 200.
Denne skriften veier 300.
Denne skriften veier 400.
Denne skriften veier 500.
Denne skriften veier 600.
Denne skriften veier 700.
Denne skriften veier 800.
Denne skriften veier 900.
Test det nåProduksjon:
Denne skriften er fet.
reactjs kart
Denne skriften er dristigere.
Denne skriften er lysere.
Denne skriften veier 100.
Denne skriften veier 200.
Denne skriften veier 300.
Denne skriften veier 400.
Denne skriften veier 500.
Denne skriften veier 600.
Denne skriften veier 700.
Denne skriften veier 800.
maskinskriftsdato
Denne skriften veier 900.