CSS Font -ominaisuutta käytetään ohjaamaan tekstin ulkoasua. CSS-fonttiominaisuuden avulla voit muuttaa tekstin kokoa, väriä, tyyliä ja paljon muuta. Olet jo opiskellut tekstin lihavointia tai alleviivausta. Täällä tiedät myös kuinka muuttaa fontin kokoa prosentteina.
Nämä ovat tärkeitä fonttimääritteitä:
1) CSS-fontin väri
CSS-fontin väri on CSS:n erillinen attribuutti, vaikka näyttää siltä, että se on osa CSS-fontteja. Sitä käytetään tekstin värin vaihtamiseen.
Värin määrittämiseen on kolme eri muotoa:
- Värin nimellä
- Heksadesimaaliarvon mukaan
- RGB:ltä
Yllä olevassa esimerkissä olemme määrittäneet kaikki nämä muodot.
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> Testaa nyt Lähtö:
<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-fonttikoko
CSS font size -ominaisuutta käytetään fontin koon muuttamiseen.
Nämä ovat mahdollisia arvoja, joita voidaan käyttää fontin koon asettamiseen:
| Fonttikoon arvo | Kuvaus |
|---|---|
| xx-pieni | käytetään erittäin pienen tekstikoon näyttämiseen. |
| x-pieni | käytetään näyttämään erittäin pieni tekstikoko. |
| pieni | käytetään näyttämään pienen tekstikoon. |
| keskikokoinen | käytetään keskikokoisen tekstin näyttämiseen. |
| suuri | käytetään suuren tekstikoon näyttämiseen. |
| x iso | käytetään erittäin suuren tekstikoon näyttämiseen. |
| xx iso | käytetään erittäin suuren tekstikoon näyttämiseen. |
| pienempi | käytetään suhteellisen pienemmän tekstikoon näyttämiseen. |
| suurempi | käytetään näyttämään suhteellisesti suurempia tekstikokoja. |
| koko pikseleinä tai % | käytetään arvon asettamiseen prosentteina tai pikseleinä. |
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>Testaa nyt
Lähtö:
Tämä fonttikoko on erittäin pieni.
Tämä fonttikoko on erittäin pieni
Panda-sarjan ominaisuuksia
Tämä kirjasinkoko on pieni
Tämä fonttikoko on keskikokoinen.
Tämä fonttikoko on suuri.
Tämä fonttikoko on erittäin suuri.
Tämä fonttikoko on erittäin suuri.
Tämä fonttikoko on pienempi.
Tämä fonttikoko on suurempi.
Tämä fonttikoko on asetettu 200 %:iin.
Tämä fonttikoko on 20 pikseliä.
4) CSS-fonttityyli
CSS Font style -ominaisuus määrittää, minkä tyyppisen fontin haluat näyttää. Se voi olla kursivoitu, vino tai normaali.
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> Testaa nyt Lähtö:
<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-fonttiversio
CSS-fonttivarianttiominaisuus määrittää, kuinka elementin fonttivariantti asetetaan. Se voi olla tavallinen ja pienikokoinen.
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> Testaa nyt Lähtö:
<h3>This heading is shown in normal font.</h3> <p>This paragraph is shown in small font.</p>
6) CSS-fontin paino
CSS-fontin paino-ominaisuus määrittää fontin painon ja määrittää, kuinka lihavoitu fontti on. Mahdolliset fontin painon arvot voivat olla normaali, lihavoitu, lihavoitu, vaaleampi tai numero (100, 200..... jopa 900).
Tämä fontti on lihavoitu.
Tämä fontti on lihavoitumpi.
Tämä fontti on vaaleampi.
Tämän fontin paino on 100.
Tämän fontin paino on 200.
Tämän fontin paino on 300.
Tämän fontin paino on 400.
Tämän fontin paino on 500.
Tämän fontin paino on 600.
Tämän fontin paino on 700.
Tämän fontin paino on 800.
Tämän fontin paino on 900.
Testaa nytLähtö:
Tämä fontti on lihavoitu.
Tämä fontti on lihavoitumpi.
Tämä fontti on vaaleampi.
Tämän fontin paino on 100.
Tämän fontin paino on 200.
Tämän fontin paino on 300.
Tämän fontin paino on 400.
Tämän fontin paino on 500.
Tämän fontin paino on 600.
Tämän fontin paino on 700.
Tämän fontin paino on 800.
Tämän fontin paino on 900.