A propriedade font-size em CSS é usada para especificar a altura e o tamanho da fonte. Afeta o tamanho do texto de um elemento. Seu valor padrão é médio e pode ser aplicado a todos os elementos. Os valores desta propriedade incluem xx-pequeno , pequeno , extra pequeno , etc.

Sintaxe

 font-size: medium|large|x-large|xx-large|xx-small|x-small|small|; 

O tamanho da fonte pode ser relativo ou absoluto.

Tamanho absoluto

É usado para definir o texto para um tamanho definido. Usando tamanho absoluto, não é possível alterar o tamanho do texto em todos os navegadores. É vantajoso quando conhecemos o tamanho físico da saída.

Tamanho relativo

É usado para definir o tamanho do texto em relação aos elementos vizinhos. Com o tamanho relativo, é possível alterar o tamanho do texto nos navegadores.

NOTA: Se não definirmos um tamanho de fonte, então para o texto normal, como parágrafos, o tamanho padrão é 16px, que é igual a 1em.

Tamanho da fonte com pixels

Quando definimos o tamanho do texto com pixels, isso nos fornece controle total sobre o tamanho do texto.

Exemplo

 #first { font-size: 40px; } #second { font-size: 20px; } <p id="first">This is a paragraph having size 40px.</p> <p id="second">This is another paragraph having size 20px.</p> 

Tamanho da fonte com em

É usado para redimensionar o texto. A maioria dos desenvolvedores prefere em em vez de píxeis . É recomendado pelo consórcio World Wide Web (W3C). Conforme afirmado acima, o tamanho do texto padrão nos navegadores é 16px. Então, podemos dizer que o tamanho padrão de 1h é 16 pixels .

A fórmula para calcular o tamanho de píxeis para em é em = pixels/16 .

Exemplo

 #first { font-size: 2.5em; /* 40px/16=2.5em */ } #second { font-size: 1.875em; /* 30px/16=1.875em */ } #third { font-size: 0.875em; /* 14px/16=0.875em */ } <p id="first">First paragraph.</p> <p id="second">Second paragraph</p> <p id="third">Third Paragraph.</p> 

Tamanho de fonte responsivo

Podemos definir o tamanho do texto usando um unidade vw , que significa ' largura da janela de visualização '. A janela de visualização é do tamanho da janela do navegador.

apenas apelido

1vw = 1% da largura da janela de visualização.

Se a largura da janela de visualização for 50 cm, então 1vw será igual a 0,5 cm.

Exemplo

Primeiro parágrafo com largura de 5vw.

Segundo parágrafo com largura de 10vw.

Tamanho da fonte com a propriedade length

É usado para definir o tamanho da fonte em comprimento. O comprimento pode ser em cm, px, pt, etc. Valores negativos de comprimento propriedade não são permitidas no tamanho da fonte.

Sintaxe

 font-size: length; 

Exemplo

 .length { color:red; font-size: 5cm; } <p class="length">A paragraph having length 5cm.</p>