CSS kirjasinkoko

Fonttikoko

font-size Aseta ominaisuus tekstikokoon

Verkkosivun suunnittelussa tekstin hallinta on tärkeää. Mutta ei pitäisi käyttää fonttikoon säätöä tehdäksesi kappaleista otsikkoja tai päinvastoin.

Käytä aina oikeaa HTML-merkkiä, esimerkiksi <h1> - <h6> otsikoihin ja <p> vain kappaleisiin.

font-size-arvo voi olla absoluuttinen tai suhteellinen koko.

Absoluuttinen koko:

  • Aseta teksti määrättyyn kokoon
  • Ei salli käyttäjien muuttaa tekstin kokoa kaikissa selaimissa (heikkolaatuinen saavutettavuus)
  • Kun tiedetään ulostulon fyysinen koko, absoluuttinen koko on hyödyllinen

Suhteellinen koko:

  • Aseta suhteellinen koko ympäröivään elementtiin
  • Salli käyttäjien muuttaa tekstin kokoa selaimessa

Huomautus:Jos et määritä fonttikokoa, tavallisen tekstin (kuten kappaleiden) oletuskoko on 16px (16px = 1em).

Aseta fonttikoko pikseleillä

Tekstin kokoa voidaan asettaa pikseleillä täysin kontrolloitavaksi:

Esimerkki

h1 {
  font-size: 40px;
}
h2 {
  font-size: 30px;
}
p {
  font-size: 14px;
}

Kokeile itse

Vinkki:Jos käytät pikseleitä, voit silti käyttää skaalatyökalua säätääksesi koko sivun kokoa.

Aseta fonttikoko em:llä

Jotta käyttäjät voivat säätää tekstin kokoa (selaimen valikossa), monet kehittäjät käyttävät em:ää pikseleiden sijaan.

W3C suosittelee käyttämään em-yksikköä.

1em on yhtä suuri kuin nykyinen fonttikoko. Selaimissa oletusarvoinen tekstin koko on 16px. Siksi oletusarvoinen 1em on 16px.

Voit käyttää tätä kaavaa muuntaaksesi pikseleistä em:iksi laskemaan kokoa: pikselit/16=em。

Esimerkki

h1 {
  font-size: 2.5em; /* 40px/16=2.5em */
}
h2 {
  font-size: 1.875em; /* 30px/16=1.875em */
}
p {
  font-size: 0.875em; /* 14px/16=0.875em */
}

Kokeile itse

Esimerkissä em-yksikön tekstin koko on samanlainen kuin edellisessä esimerkissä pikseleiden kokoonpanossa. Mutta jos käytät em-kokoa, voit säätää tekstin kokoa kaikissa selaimissa.

Valitettavasti vanhat Internet Explorer -versiot edelleen kohtaavat ongelmia. Tekstin suurennus on suurempi kuin sen pitäisi olla, ja tekstin pienennys on pienempi.

käytä prosenttia ja em-yhdistelmää

Esimerkki

body {
  font-size: 100%;
}
h1 {
  font-size: 2.5em;
}
h2 {
  font-size: 1.875em;
}
p {
  font-size: 0.875em;
}

Kokeile itse

Koodimme toimii tällä hetkellä hyvin! Se näyttää saman tekstin koko kaikissa selaimissa ja mahdollistaa tekstin koon skaalautumisen tai säätämisen!

Vastauskykyinen fonttikoko

Voit käyttää vw Yksiköt asettavat tekstin kokoa, ja se tarkoittaa "näkymän leveys" ("viewport width").

Tekstin koko seuraa nyt selaimen ikkunan kokoa, säädä selaimen ikkunan kokoa tarkastellaksesi, miten fonttikoko skaalautuu:

Esimerkki

<h1 style="font-size:10vw">Hello World</h1>

Kokeile itse

Näkymä (Viewport) on selaimen ikkunan koko. 1vw = näkymän leveys 1 %. Jos näkymä on 50 cm leveä, 1vw on 0,5 cm.