Fonttien Ominaisuuksien Ymmärtäminen ja Käyttö
Tarkastellaan yleisimpiä fonttiin liittyviä ominaisuuksia.
selector {
font-family: 'Montserrat' | 'Oswald' | 'Lato' |...; /* any font family */
font-size: 12px | 0.5em | 0.8rem |...; /* it can be any value in px/em/rem units */
font-weight: 400 | 500 | 700 | 900 |...; /* value 100 - 900 */
font-style: normal | italic | oblique; /* only these values available */
}
Huomio
Kaikki esimerkit havainnollistetaan samalla tekstisisällöllä, jotta voidaan tarkastella, miten sama teksti voidaan esittää eri tavoin.
font-family
font-family-ominaisuus määrittää fonttiperheen tai -perheet, joita käytetään tekstisisällön näyttämiseen. Voit määrittää joko yhden fonttiperheen nimen tai luetella useita fonttiperheitä pilkulla erotettuna.
font-size
font-size-ominaisuus määrittää tekstin näyttämiseen käytettävän fonttikoon. Koko voi olla kiinteä, mitattuna px-yksiköissä, tai suhteellinen, mitattuna em- tai rem-yksiköissä.
font-weight
font-weight-ominaisuus määrittää tekstin fontin paksuuden. Arvo voidaan määrittää numeerisesti (esim. 300, 500, 700, ...) tai avainsanalla (esim. lighter, normal tai bold).
font-style
font-style-ominaisuus määrittää tekstin fontin tyylin. Vaihtoehdot ovat normal (oletusarvo), italic tai oblique.
Pseudoluokka ::first-letter
first-letter-pseudoluokka valitsee ja tyylittää kappaleen tai otsikon ensimmäisen kirjaimen. Tämän pseudoluokan käyttöön tarvitaan kaksoispisteet :: valitsimen jälkeen sekä avainsana first-letter.
selector::first-letter {
/* some styles */
}
Katsotaan seuraava esimerkki, jotta näemme, miten tämä toimii.
index.html
styles.css
Yhteenveto
font-familymäärittää tekstin fontin tai varafontit. Voit luetella useita fontteja varmistaaksesi oikean esitystavan;font-sizemäärittää tekstin koon käyttäen absoluuttisia yksiköitä (px) tai suhteellisia yksiköitä (em, rem);font-weightsäätää fontin paksuutta joko numeerisesti (100–900) tai avainsanoilla kutennormaltaibold;font-stylemäärittää fontin tyylin, kutennormal,italictaioblique;- Pseudoluokka
::first-letterkohdistaa ja tyylittää tekstilohkon ensimmäisen kirjaimen, mahdollistaen luovat typografiatehosteet.
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
Can you explain the difference between px, em, and rem units for font-size?
How do I choose the best font-family for my website?
Can you show examples of using the ::first-letter pseudo-class?
Awesome!
Completion rate improved to 2.56Fonttien Ominaisuuksien Ymmärtäminen ja Käyttö
Pyyhkäise näyttääksesi valikon
Tarkastellaan yleisimpiä fonttiin liittyviä ominaisuuksia.
selector {
font-family: 'Montserrat' | 'Oswald' | 'Lato' |...; /* any font family */
font-size: 12px | 0.5em | 0.8rem |...; /* it can be any value in px/em/rem units */
font-weight: 400 | 500 | 700 | 900 |...; /* value 100 - 900 */
font-style: normal | italic | oblique; /* only these values available */
}
Huomio
Kaikki esimerkit havainnollistetaan samalla tekstisisällöllä, jotta voidaan tarkastella, miten sama teksti voidaan esittää eri tavoin.
font-family
font-family-ominaisuus määrittää fonttiperheen tai -perheet, joita käytetään tekstisisällön näyttämiseen. Voit määrittää joko yhden fonttiperheen nimen tai luetella useita fonttiperheitä pilkulla erotettuna.
font-size
font-size-ominaisuus määrittää tekstin näyttämiseen käytettävän fonttikoon. Koko voi olla kiinteä, mitattuna px-yksiköissä, tai suhteellinen, mitattuna em- tai rem-yksiköissä.
font-weight
font-weight-ominaisuus määrittää tekstin fontin paksuuden. Arvo voidaan määrittää numeerisesti (esim. 300, 500, 700, ...) tai avainsanalla (esim. lighter, normal tai bold).
font-style
font-style-ominaisuus määrittää tekstin fontin tyylin. Vaihtoehdot ovat normal (oletusarvo), italic tai oblique.
Pseudoluokka ::first-letter
first-letter-pseudoluokka valitsee ja tyylittää kappaleen tai otsikon ensimmäisen kirjaimen. Tämän pseudoluokan käyttöön tarvitaan kaksoispisteet :: valitsimen jälkeen sekä avainsana first-letter.
selector::first-letter {
/* some styles */
}
Katsotaan seuraava esimerkki, jotta näemme, miten tämä toimii.
index.html
styles.css
Yhteenveto
font-familymäärittää tekstin fontin tai varafontit. Voit luetella useita fontteja varmistaaksesi oikean esitystavan;font-sizemäärittää tekstin koon käyttäen absoluuttisia yksiköitä (px) tai suhteellisia yksiköitä (em, rem);font-weightsäätää fontin paksuutta joko numeerisesti (100–900) tai avainsanoilla kutennormaltaibold;font-stylemäärittää fontin tyylin, kutennormal,italictaioblique;- Pseudoluokka
::first-letterkohdistaa ja tyylittää tekstilohkon ensimmäisen kirjaimen, mahdollistaen luovat typografiatehosteet.
1. Mikä ominaisuus määrittää fontin paksuuden?
2. Mikä on CSS:n font-style-ominaisuuden oletusarvo?
Kiitos palautteestasi!
