Velikost písma CSS

Obsah

    Zobrazit obsah

Velikost písma

Vlastnost font-size nastavuje velikost textu.

Schopnost spravovat velikost textu je při návrhu webu důležitá. Nicméně vy by neměl používat úpravy velikosti písma, aby odstavce vypadaly jako nadpisy, popř nadpisy vypadají jako odstavce.

Vždy používejte správné značky HTML, například <h1> - <h6> pro nadpisy a <p> pro odstavce.

Hodnota velikosti písma může být absolutní nebo relativní velikost.

Absolutní velikost:

  • Nastaví text na zadanou velikost

  • Neumožňuje uživateli měnit velikost textu ve všech prohlížečích (špatné z důvodů přístupnosti)

  • Absolutní velikost je užitečná, když je známa fyzická velikost výstupu

Relativní velikost:

  • Nastavuje velikost vzhledem k okolním prvkům

  • Umožňuje uživateli změnit velikost textu v prohlížečích

Poznámka: Pokud neurčíte velikost písma, výchozí velikost normálního textu, jako jsou odstavce, je 16px (16px=1em).

Nastavit velikost písma s pixely

Nastavení velikosti textu pomocí pixelů vám dává plnou kontrolu nad velikostí textu:

Příklad

h1 {
  font-size: 40px;
}

h2 {
  font-size: 30px;
}

p {
  font-size: 14px;
}

Zkuste to sami →

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

Tip: Pokud používáte pixely, můžete ke změně velikosti celé stránky použít nástroj přiblížení.

Nastavte velikost písma pomocí Em

Aby uživatelé mohli změnit velikost textu (v nabídce prohlížeče), mnoho vývojáři používají em místo pixelů.

1em se rovná aktuální velikosti písma. Výchozí velikost textu v prohlížečích je 16px. Výchozí velikost 1 em je tedy 16 pixelů.

Velikost lze vypočítat z pixelů na em pomocí tohoto vzorce: <i>pixely/16=<i>em

Příklad

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

Zkuste to sami →

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

Ve výše uvedeném příkladu je velikost textu v em stejná jako v předchozím příkladu v pixelech. S velikostí em je však možné upravit velikost textu ve všech prohlížečích.

U starších verzí je bohužel stále problém aplikace Internet Explorer. Text se zvětší, než by měl když se udělá větší, a menší, než by měl, když se zmenší.

Použijte kombinaci procent a Em

Řešením, které funguje ve všech prohlížečích, je nastavit výchozí velikost písma v procenta pro prvek <body>:

Příklad

body {
  font-size: 100%;
}

h1 {
  font-size: 2.5em;
}

h2 {
  font-size: 1.875em;
}

p {
  font-size: 0.875em;
}

Zkuste to sami →

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

Náš kód nyní funguje skvěle! Zobrazuje stejnou velikost textu v všechny prohlížeče a umožňuje všem prohlížečům přiblížit nebo změnit velikost textu!

Velikost responzivního písma

Velikost textu lze nastavit pomocí jednotky vw, což znamená "šířku výřezu".

Tímto způsobem bude velikost textu odpovídat velikosti okna prohlížeče:

Hello World

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

Příklad

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

Zkuste to sami →

<!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 je velikost okna prohlížeče. 1vw=1 % šířky výřezu. Pokud je výřez široký 50 cm, 1vw je 0,5 cm.