Web-kehityksen Perusteet

CSS Fontit

Helppo
20 min

CSS-fonttien käyttö mahdollistaa tekstin ulkoasun muokkaamisen verkkosivuilla. Tämä voi sisältää fontin nimen, koon, tyylin ja värin määrittämisen. Alla on muutamia esimerkkejä CSS-fonttien käytöstä:

Fontin nimen määrittäminen

Voit määrittää fontin nimen CSS:ssä käyttämällä font-family -ominaisuutta. Esimerkiksi, jos haluat käyttää Arial fonttia, voit kirjoittaa seuraavan säännön:

body {
  font-family: Arial, sans-serif;
}

Tämä sääntö asettaa Arial-fontin tekstille, joka näkyy body-elementissä.


Fontin koon määrittäminen

Voit määrittää fontin koon CSS:ssä käyttämällä font-size -ominaisuutta. Esimerkiksi, jos haluat asettaa fontin koon 14 pikseliksi, voit kirjoittaa seuraavan säännön:

h1 {
  font-size: 14px;
}

Fontin tyylin määrittäminen

Voit määrittää fontin tyylin CSS:ssä käyttämällä font-style -ominaisuutta. Esimerkiksi, jos haluat asettaa fontin kursivoiduksi, voit kirjoittaa seuraavan säännön:

em {
  font-style: italic;
}

Fontin värin määrittäminen

Voit määrittää fontin värin CSS:ssä käyttämällä color -ominaisuutta. Esimerkiksi, jos haluat asettaa tekstin värin siniseksi, voit kirjoittaa seuraavan säännön:

p {
  color: blue;
}

Tämä sääntö asettaa kaikille kappale-elementeille tekstin värin siniseksi.

CSS-fonttien käyttö antaa sinulle runsaasti mahdollisuuksia verkkosivujen tekstin muotoiluun ja tyyliin. On tärkeää huomata, että vaikka fontin nimeä voitaisiin määrittää sivuston koodissa, käyttäjän laitteessa tulee olla kyseinen fontti asennettuna, jotta se näkyisi oikein käyttäjälle.

Harjoittele

Kokeile itse!
hakatemia pro

Valmis ryhtymään eettiseksi hakkeriksi?
Aloita jo tänään.

Hakatemian jäsenenä saat rajoittamattoman pääsyn Hakatemian moduuleihin, harjoituksiin ja työkaluihin, sekä pääset discord-kanavalle jossa voit pyytää apua sekä ohjaajilta että muilta Hakatemian jäseniltä.