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ä havainnollistamaan, miten nämä ominaisuudet muuttavat ulkoasua.
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äynnistetään seuraava esimerkki 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