Fonttien ja Fonttiominaisuuksien Käsittely
Pyyhkäise näyttääksesi valikon
Fontit vaikuttavat merkittävästi verkkosivun tunnelmaan ja luettavuuteen.
Tässä luvussa käsitellään yleisimmin käytettyjä fontteihin liittyviä CSS-ominaisuuksia: font-family, font-size, font-weight ja font-style.
Kaikissa esimerkeissä käytetään samaa tekstiä, jotta voidaan havainnollistaa, miten nämä ominaisuudet vaikuttavat ulkoasuun.
font-family
font-family-ominaisuudella määritetään, mitä kirjasintyyppiä tekstin esittämiseen käytetään.
p {
font-family: 'Montserrat', Arial, sans-serif;
}
Useita fontteja voidaan luetella varalle pilkuilla eroteltuna. Jos ensimmäistä fonttia ei ole saatavilla, selain käyttää seuraavaa listassa. On suositeltavaa lisätä aina geneerinen varafontti, kuten: serif, sans-serif, monospace.
font-size
font-size-ominaisuus määrittää tekstin koon.
p {
font-size: 16px;
}
Yleiset yksiköt:
px: kiinteä koko;em: suhteessa ylätason elementtiin;rem: suhteessa juurielementtiin.
font-weight
Määrittää tekstin paksuuden. Numeeriset arvot: 100–900. Avainsanat: normal, bold, lighter.
font-style
Määrittää tekstin tyylin: normal, italic tai oblique.
Pseudoluokka ::first-letter
::first-letter kohdistaa elementin (yleensä kappaleen tai otsikon) ensimmäiseen kirjaimeen, mahdollistaen koristeelliset tai tyylitellyt tehosteet.
selector::first-letter {
/* some styles */
}
Käydään seuraava esimerkki läpi nähdäksesi, miten se toimii.
index.html
styles.css
font-family määrittää kirjasintyypin ja varavaihtoehdot.
font-size säätää tekstin kokoa px-, em- tai rem-yksiköissä.
font-weight säätää paksuutta numeroilla tai avainsanoilla.
font-style muuttaa fontin tyyliä.
::first-letter muotoilee tekstilohkon ensimmäisen kirjaimen.
1. Mikä ominaisuus määrittää fontin paksuuden?
2. Mikä on CSS:n font-style -ominaisuuden oletusarvo?
Kiitos palautteestasi!
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
Fonttien ja Fonttiominaisuuksien Käsittely
Fontit vaikuttavat merkittävästi verkkosivun tunnelmaan ja luettavuuteen.
Tässä luvussa käsitellään yleisimmin käytettyjä fontteihin liittyviä CSS-ominaisuuksia: font-family, font-size, font-weight ja font-style.
Kaikissa esimerkeissä käytetään samaa tekstiä, jotta voidaan havainnollistaa, miten nämä ominaisuudet vaikuttavat ulkoasuun.
font-family
font-family-ominaisuudella määritetään, mitä kirjasintyyppiä tekstin esittämiseen käytetään.
p {
font-family: 'Montserrat', Arial, sans-serif;
}
Useita fontteja voidaan luetella varalle pilkuilla eroteltuna. Jos ensimmäistä fonttia ei ole saatavilla, selain käyttää seuraavaa listassa. On suositeltavaa lisätä aina geneerinen varafontti, kuten: serif, sans-serif, monospace.
font-size
font-size-ominaisuus määrittää tekstin koon.
p {
font-size: 16px;
}
Yleiset yksiköt:
px: kiinteä koko;em: suhteessa ylätason elementtiin;rem: suhteessa juurielementtiin.
font-weight
Määrittää tekstin paksuuden. Numeeriset arvot: 100–900. Avainsanat: normal, bold, lighter.
font-style
Määrittää tekstin tyylin: normal, italic tai oblique.
Pseudoluokka ::first-letter
::first-letter kohdistaa elementin (yleensä kappaleen tai otsikon) ensimmäiseen kirjaimeen, mahdollistaen koristeelliset tai tyylitellyt tehosteet.
selector::first-letter {
/* some styles */
}
Käydään seuraava esimerkki läpi nähdäksesi, miten se toimii.
index.html
styles.css
font-family määrittää kirjasintyypin ja varavaihtoehdot.
font-size säätää tekstin kokoa px-, em- tai rem-yksiköissä.
font-weight säätää paksuutta numeroilla tai avainsanoilla.
font-style muuttaa fontin tyyliä.
::first-letter muotoilee tekstilohkon ensimmäisen kirjaimen.
Kiitos palautteestasi!
