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).
Tekstin koon asettaminen pikseleillä antaa sinulle täyden hallinnan tekstin kokoon:
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.
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
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.
Ratkaisu, joka toimii kaikissa selaimissa, on asettaa oletuskirjasinkoko prosenttia <body>-elementille:
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!
Tekstin koko voidaan asettaa vw
-yksiköllä, joka tarkoittaa "näkymän leveyttä".
Näin tekstin koko seuraa selainikkunan kokoa:
Resize the browser window to see how the font size scales.
<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.