CSS betűméret

Tartalomjegyzék

    Tartalomjegyzék megjelenítése

Betűméret

A font-size tulajdonság beállítja a szöveg méretét.

A szövegméret kezelésének képessége fontos a webdesignban. Ön azonban ne használjon betűméret-módosítást, hogy a bekezdések címsornak tűnjenek, vagy a címsorok úgy néznek ki, mint a bekezdések.

Mindig a megfelelő HTML címkéket használja, például a <h1> - <h6> címkéket a címsorokhoz és a <p> címkéket bekezdések.

A betűméret értéke lehet abszolút vagy relatív méret.

Abszolút méret:

  • A szöveget meghatározott méretre állítja

  • Nem teszi lehetővé a felhasználó számára, hogy minden böngészőben módosítsa a szöveg méretét (kisegítő lehetőségek miatt rossz)

  • Az abszolút méret akkor hasznos, ha a kimenet fizikai mérete ismert

Relatív méret:

  • Beállítja a méretet a környező elemekhez viszonyítva

  • Lehetővé teszi a felhasználó számára, hogy módosítsa a szöveg méretét a böngészőben

Megjegyzés: Ha nem ad meg betűméretet, a normál szöveg, például a bekezdések alapértelmezett mérete 16 képpont (16px=1em).

Állítsa be a betűméretet pixelekkel

A szöveg méretének pixelekkel történő beállítása teljes ellenőrzést biztosít a szövegméret felett:

Példa

h1 {
  font-size: 40px;
}

h2 {
  font-size: 30px;
}

p {
  font-size: 14px;
}

Próbálja ki Ön is →

<!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>

Tipp: Ha képpontokat használ, akkor is használhatja a nagyító eszközt a teljes oldal átméretezéséhez.

Állítsa be a betűméretet az Em gombbal

Ahhoz, hogy a felhasználók átméretezhessék a szöveget (a böngésző menüjében), sok a fejlesztők pixelek helyett em-et használnak.

1em egyenlő az aktuális betűmérettel. Az alapértelmezett szövegméret a böngészőkben 16 képpont. Tehát az 1em alapértelmezett mérete 16 képpont.

A méret képpontról emre a következő képlettel számítható ki: <i>pixel/16=<i>em

Példa

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 */
}

Próbálja ki Ön is →

<!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>

A fenti példában a szöveg mérete em-ben megegyezik az előző példával pixelben. Az em mérettel azonban lehetőség van a szöveg méretének beállítására minden böngészőben.

Sajnos még mindig van probléma a régebbi verziókkal az Internet Explorer programban. A szöveg nagyobb lesz, mint kellene ha nagyobbra, és kisebbre, mint kellene, ha kisebbre.

Használja a százalék és az Em kombinációját

A megoldás, amely minden böngészőben működik, az alapértelmezett betűméret beállítása százalék a <body> elemhez:

Példa

body {
  font-size: 100%;
}

h1 {
  font-size: 2.5em;
}

h2 {
  font-size: 1.875em;
}

p {
  font-size: 0.875em;
}

Próbálja ki Ön is →

<!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>

A kódunk most remekül működik! Ugyanazt a szövegméretet mutatja minden böngészőben, és minden böngésző számára lehetővé teszi a szöveg nagyítását vagy átméretezését!

Reszponzív betűméret

A szöveg mérete vw egységgel állítható be, ami a "nézetablak szélességét" jelenti.

Így a szöveg mérete követni fogja a böngészőablak méretét:

Hello World

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

Példa

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

Próbálja ki Ön is →

<!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>

A Viewport a böngészőablak mérete. 1vw=a nézetablak szélességének 1%-a. Ha a látómező 50 cm széles, az 1vw 0,5 cm.