Egenskapen font-size
anger storleken på texten.
Att kunna hantera textstorleken är viktigt i webbdesign. Men du bör inte använda teckenstorleksjusteringar för att få stycken att se ut som rubriker, eller rubriker ser ut som stycken.
Använd alltid rätt HTML-taggar, som <h1> - <h6> för rubriker och <p> för stycken.
Teckensnittsstorleken kan vara en absolut eller relativ storlek.
Absolut storlek:
Ställer in texten till en angiven storlek
Tillåter inte en användare att ändra textstorleken i alla webbläsare (dåligt av tillgänglighetsskäl)
Absolut storlek är användbar när den fysiska storleken på utdata är känd
Relativ storlek:
Ställer in storleken i förhållande till omgivande element
Tillåter en användare att ändra textstorleken i webbläsare
Obs! Om du inte anger en teckenstorlek är standardstorleken för normal text, som stycken, 16px (16px=1em).
Genom att ställa in textstorleken med pixlar får du full kontroll över textstorleken:
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 14px;
}
Prova själv →
<!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>
Tips: Om du använder pixlar kan du fortfarande använda zoomverktyget för att ändra storlek på hela sidan.
För att tillåta användare att ändra storlek på texten (i webbläsarmenyn), många utvecklare använder em istället för pixlar.
1em är lika med den aktuella teckenstorleken. Standardtextstorleken i webbläsare är 16px. Så standardstorleken på 1em är 16px.
Storleken kan beräknas från pixlar till em med denna formel: <i>pixlar/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 */
}
Prova själv →
<!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>
I exemplet ovan är textstorleken i em densamma som i föregående exempel i pixlar. Men med em-storleken är det möjligt att justera textstorleken i alla webbläsare.
Tyvärr finns det fortfarande problem med äldre versioner av Internet Explorer. Texten blir större än den borde när den görs större och mindre än den borde när den görs mindre.
Lösningen som fungerar i alla webbläsare är att ställa in en standardtypsnittsstorlek procent för elementet <body>:
body {
font-size: 100%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875em;
}
p {
font-size: 0.875em;
}
Prova själv →
<!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>
Vår kod fungerar nu utmärkt! Den visar samma textstorlek i alla webbläsare och låter alla webbläsare zooma eller ändra storlek på texten!
Textstorleken kan ställas in med en vw
enhet, vilket betyder "viewport width".
På så sätt kommer textstorleken att följa storleken på webbläsarfönstret:
Resize the browser window to see how the font size scales.
<h1 style="font-size:10vw">Hello World</h1>
Prova själv →
<!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 är storleken på webbläsarens fönster. 1vw=1 % av visningsportens bredd. Om visningsporten är 50 cm bred är 1vw 0,5 cm.