CSS-fonttikoko


Sisällysluettelo

    Näytä sisällysluettelo


Fonttikoko

Ominaisuus font-size määrittää tekstin koon.

Tekstin koon hallinta on tärkeää web-suunnittelussa. Kuitenkin sinä Älä käytä fonttikoon säätöjä saadaksesi kappaleet näyttämään otsikoilta tai otsikot näyttävät kappaleilta.

Käytä aina oikeita HTML-tageja, kuten <h1> - <h6> otsikoissa ja <p> kappaleita.

Fonttikoon arvo voi olla absoluuttinen tai suhteellinen koko.

Absoluuttinen koko:

  • Asettaa tekstin tiettyyn kokoon

  • Ei salli käyttäjän muuttaa tekstin kokoa kaikissa selaimissa (huono saavutettavuussyistä)

  • Absoluuttinen koko on hyödyllinen, kun lähdön fyysinen koko tunnetaan

Suhteellinen koko:

  • Asettaa koon suhteessa ympäröiviin elementteihin

  • Antaa käyttäjän muuttaa tekstin kokoa selaimissa

Huomaa: jos et määritä kirjasinkokoa, normaalin tekstin, kuten kappaleiden, oletuskoko on 16px (16px=1em).


Aseta fonttikoko pikseleillä

Tekstin koon asettaminen pikseleillä antaa sinulle täyden hallinnan tekstin kokoon:

Esimerkki

h1 {
  font-size: 40px;
}

h2 {
  font-size: 30px;
}

p {
  font-size: 14px;
}

Kokeile itse →

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  font-size: 40px;
}

h2 {
  font-size: 30px;
}

p {
  font-size: 14px;
}
</style>
</head>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>


Vinkki: Jos käytät pikseleitä, voit silti käyttää zoomaustyökalua koko sivun koon muuttamiseen.


Aseta fonttikoko Em

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

1em on yhtä suuri kuin nykyinen fonttikoko. Tekstin oletuskoko selaimissa on 16px. Joten oletuskoko 1em on 16px.

Koko voidaan laskea pikseleistä em:ihin käyttämällä seuraavaa kaavaa: <i>pikseliä/16=<i>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 →

<!DOCTYPE html>
<html>
<head>
<style>
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 */
}
</style>
</head>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>Specifying the font-size in em allows all major browsers to resize the text.
Unfortunately, there is still a problem with older versions of IE. When resizing the text, it becomes larger/smaller than it should.</p>

</body>
</html>


Yllä olevassa esimerkissä tekstin koko emissä on sama kuin edellisessä esimerkissä pikseleinä. Kuitenkin em-koolla on mahdollista säätää tekstin kokoa kaikissa selaimissa.

Valitettavasti vanhemmissa versioissa on edelleen ongelmia Internet Explorerista. Tekstistä tulee suurempi kuin sen pitäisi kun se tehdään isommaksi, ja pienempi kuin pitäisi, kun se tehdään pienemmäksi.



Käytä prosentin ja em:n yhdistelmää

Ratkaisu, joka toimii kaikissa selaimissa, on asettaa oletuskirjasinkoko prosenttia <body>-elementille:

Esimerkki

body {
  font-size: 100%;
}

h1 {
  font-size: 2.5em;
}

h2 {
  font-size: 1.875em;
}

p {
  font-size: 0.875em;
}

Kokeile itse →

<!DOCTYPE html>
<html>
<head>
<style>
body {
  font-size: 100%;
}

h1 {
  font-size: 2.5em;
}

h2 {
  font-size: 1.875em;
}

p {
  font-size: 0.875em;
}
</style>
</head>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>Specifying the font-size in percent and em displays the same size in all major browsers, and allows all browsers to resize the text!</p>

</body>
</html>


Koodimme toimii nyt loistavasti! Se näyttää saman tekstin koon kaikissa selaimissa ja sallii kaikkien selaimien zoomata tai muuttaa tekstin kokoa!


Responsiivinen fonttikoko

Tekstin koko voidaan asettaa vw-yksiköllä, joka tarkoittaa "näkymän leveyttä".

Näin tekstin koko seuraa selainikkunan kokoa:

Hello World

Resize the browser window to see how the font size scales.

Esimerkki

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

Kokeile itse →

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>

<h1 style="font-size:10vw;">Responsive Text</h1>

<p style="font-size:5vw;">Resize the browser window to see how the text size scales.</p>

<p style="font-size:5vw;">Use the "vw" unit when sizing the text. 10vw will set the size to 10% of the viewport width.</p>

<p>Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.</p>

</body>
</html>


Viewport on selainikkunan koko. 1vw=1 % kuvaportin leveydestä. Jos näkymä on 50 cm leveä, 1vw on 0,5 cm.