Propriedade font-size

A propriedade font-size define o tamanho da fonte do texto. Os valores da propriedade são quaisquer unidades para tamanhos (geralmente, são px, em ou rem) ou palavras-chave especiais (usadas muito raramente).

Sintaxe

cssseletor {
  font-size: valor;
}

Valores em forma de palavras-chave

Valor padrão: medium.

Exemplo

Vamos definir o tamanho da fonte dos parágrafos para 20px:

html<p>
  Lorem ipsum dolor sit amet.
</p>

cssp {
  font-size: 20px;
}

Результат:

Exemplo

Neste exemplo, o tamanho do parágrafo está definido como 16px, e para o span dentro dele - 150%. Neste caso, o tamanho da fonte para o span será 150% do seu elemento pai, ou seja, do parágrafo, e seu tamanho real será 16px * 150% = 24px:

html<p>
  Lorem <span>ipsum dolor</span> sit amet.
</p>

cssp {
  font-size: 16px;
}
span {
  font-size: 150%;
}

Результат:

Exemplo

Neste exemplo, o tamanho do parágrafo está definido como 16px, e para o span dentro dele - larger. Neste caso, o tamanho da fonte para o span será maior que o do seu elemento pai (o parágrafo):

html<p>
  Lorem <span>ipsum dolor</span> sit amet.
</p>

cssp {
  font-size: 16px;
}
span {
  font-size: larger;
}

Результат:

Exemplo

Observe que fontes com diferentes font-family e o mesmo font-size podem visualmente ter tamanhos completamente diferentes (para resolver este problema, consulte a propriedade font-size-adjust).

No exemplo abaixo, ambos os parágrafos têm font-size definido como 16px, mas diferentes font-family:

html<p id="elem1">
  Lorem ipsum dolor sit amet.
</p>
<p id="elem2">
  Lorem ipsum dolor sit amet.
</p>

css#elem1 {
  font-size: 16px;
  font-family: Arial;
}
#elem2 {
  font-size: 16px;
  font-family: "Times New Roman";
}

Результат: