Como alterar o tamanho da fonte em html

HTML é como um documento MS-Word e Google Docs, mas a diferença é que os documentos HTML mostram conteúdo sobre o navegador. Agora, ao formatar o texto no MS-Word e o Google Docs, o HTML também nos permite formatar o texto em documentos HTML com a ajuda das propriedades do CSS.

Então, neste artigo, veremos como alterar o tamanho da fonte em HTML:

• usando pixels
• Usando porcentagem %
• De acordo com o tamanho da tela
• Usando o valor unitário efêmero

Como alterar o tamanho da fonte em HTML usando a propriedade do tamanho da fonte?

No HTML, o tamanho da fonte pode ser alterado pela propriedade de tamanho de fonte do CSS. A propriedade do tamanho de uma fonte suporta uma lista de opções para alterar o tamanho da fonte de acordo com alguns critérios. Esta seção descreve a lista de possíveis opções de propriedade do tamanho da fonte para alterar o tamanho da fonte em html.

- Usando pixels (px)

Podemos alterar o tamanho da fonte com a ajuda da propriedade do tamanho de fonte CSS e definir seu valor em pixels. Um pixel é uma unidade de medição para especificar a altura, largura, tamanho de fonte, etc. usada pelos desenvolvedores da web. 1 pixel representa a parte 1/96ª parte de uma polegada em uma tela. O exemplo prático a seguir mostrará o uso desta propriedade com valores de pixel. Por padrão, o tamanho da fonte é de 16 pixels.

Código:

Este é o tamanho normal da fonte em um documento HTML.

O tamanho da fonte é alterado para 30 pixels usando a propriedade de tamanho de fonte CSS.

Neste código, escrevemos dois parágrafos e alteramos o tamanho de um parágrafo para 25px usando a propriedade CSS Fonte-Size.

Saída:

A saída mostra que o tamanho da fonte é alterado com sucesso em pixels.

- Usando porcentagem %

Também podemos alterar o tamanho da fonte, definindo o valor da propriedade do tamanho da fonte CSS em porcentagem em relação ao tamanho do corpo do documento HTML, o que significa que, quando damos valor em porcentagem. Vejamos o exemplo seguinte para entender melhor.

Código:

Este é o tamanho normal da fonte em um documento HTML.

O tamanho da fonte é alterado em porcentagem usando a propriedade do tamanho de fonte CSS.

Neste código, criamos dois parágrafos e alteramos o tamanho do segundo parágrafo usando a propriedade CSS Font-Size e definimos seu valor para 150 %.

Saída:

Esta saída mostra que mudamos com sucesso o tamanho da fonte, especificando o valor em porcentagem.

- Defina o tamanho da fonte conforme o tamanho da tela

O tamanho da fonte também pode ser alterado dinamicamente. Isso significa que o tamanho da nossa fonte muda de acordo com o tamanho da tela dinamicamente. Para mudar de tamanho de fonte de acordo com a tela que usamos VW (largura de viewport). O exemplo a seguir mostra o uso de valores de VW na propriedade de tamanho de fonte CSS.

Código:

Este é o tamanho normal da fonte em um documento HTML.

O tamanho da fonte é alterado em porcentagem usando a propriedade do tamanho de fonte CSS.

Neste código, criamos dois parágrafos e alteramos o tamanho de um parágrafo usando o valor VW que redimensionará o texto de acordo com o tamanho da tela.

Saída:

A saída mostra que o parágrafo com tamanho normal de texto permanece estático, enquanto o parágrafo que usa vw valor para alterar o tamanho da fonte se redimensiona de acordo com a tela.

- Usando o valor unitário efêmero

Podemos alterar o tamanho da fonte usando a propriedade do tamanho de fonte CSS e definir seu valor para Em. Aqui é considerado igual ao tamanho atual da fonte do corpo do documento HTML. Por padrão, o tamanho da fonte do documento HTML normal é de 16 pixels para que possamos dizer que 1em = 16 pixels. O exemplo prático a seguir mostra o uso da unidade EM.

Código:

Este é o tamanho normal da fonte no documento HTML.

O tamanho da fonte é alterado em porcentagem usando a propriedade do tamanho de fonte CSS.

Neste código, mudamos o tamanho do parágrafo usando a propriedade CSS Font-Size e definimos seu valor para 2 EM, o que é igual a 32 pixels.

Saída:

Esta saída mostra que alteramos o tamanho da fonte usando o valor EM da propriedade do tamanho da fonte CSS.

Aqui você vai! Agora você pode alterar com sucesso o tamanho da fonte em HTML usando qualquer um dos métodos acima mencionados.

Conclusão

No HTML, podemos alterar o tamanho da fonte usando a propriedade do tamanho de fonte CSS e definir seus valores em pixels, porcentagem, largura da viewport e unidade efêmera. Neste artigo, passamos por todos os conjuntos de valores que podem ser usados ​​com a propriedade CSS Font-Size para alterar o tamanho da fonte em HTML. Os pixels, porcentagem e EM são os valores fixos, enquanto a opção de viewport manipula a fonte de acordo com o tamanho da tela.