Em Folhas de estilo em cascata (CSS), A propriedade de tamanho de fonte possui grande importância. Ele garante que o texto se destaque e enriqueça a folha com uma hierarquia visual. A hierarquia ajuda a distinguir títulos e sub-cabeças do texto normal. A propriedade de tamanho de fonte CSS usa várias unidades de tamanho como pixels, em, largura e valores percentuais. Além disso, também utiliza títulos diferentes que variam de

para

.

Este artigo discutirá a propriedade do tamanho de fontes no CSS. Também ensinaremos como usar explicitamente o Propriedades predefinidas e personalizadas do tamanho de fontes para elementos de texto. Então vamos começar!

Propriedade do tamanho da fonte CSS

No CSS, a propriedade do tamanho da fonte é utilizada para definir o tamanho de um elemento de texto, e seu valor pode ser "Predefinidos" ou "Tamanho personalizado".

Nas seções abaixo, falaremos brevemente sobre os valores CSS de tamanho de fonte predefinidos e personalizados em propriedades do tamanho da fonte.

Propriedade de tamanho de fonte CSS usando valores predefinidos

CSS fornece valores predefinidos para definir tamanhos de fontes de textos. A propriedade do tamanho da fonte CSS é utilizada quando temos as informações relacionadas ao tamanho físico da saída. Além disso, os navegadores não permitem modificar o tamanho do texto devido a maus motivos de acessibilidade.

Confira a lista a seguir dos valores de propriedades de tamanho de fonte CSS predefinidos:

• Xx-small
• X-small
• Pequeno
• Médio
• Grande
• Extra grande
• Xx-grande

Agora, vamos dar uma olhada na sintaxe de fornecer valores predefinidos para a propriedade de tamanho de fonte:

Sintaxe do fornecimento de valores predefinidos para a propriedade de tamanho de fonte

Size da fonte: Médio | grande | X-Large | xx-large | xx-small | x-small | pequeno |;

Aqui, devemos adicionar um valor específico para o "tamanho da fonte" propriedade.

Exemplo: fornecendo valores predefinidos para a propriedade do tamanho de uma fonte

Neste exemplo, especificaremos diferentes valores de propriedade predefinidos do tamanho de uma fonte para elementos do parágrafo:

Este é o texto xx-grande.

Este é o texto X-Large.

Este é um texto grande.

Este é o texto médio.

Este é um texto pequeno.

Este é o texto x-small.

Este é o texto xx-pequeno.

Abra o arquivo HTML em um navegador depois de adicionar o código especificado. Ao fazer isso, o texto dos parágrafos terá o seguinte formato:

Na próxima seção, demonstraremos o uso de "personalizado" Valores da propriedade do tamanho de uma fonte.

Propriedade de tamanho de fonte CSS usando valores personalizados

Fornecendo o Valores personalizados para a propriedade do tamanho da fonte, você pode definir o tamanho de uma fonte de acordo com os elementos circundantes, e essa propriedade também permite que um usuário altere o tamanho da fonte nos navegadores.

No CSS, a propriedade do tamanho da fonte compreende os seguintes valores personalizados:

• tamanho de fonte com pixels
• tamanho de fonte com Em
• tamanho de fonte com valores percentuais
• Tamanho da fonte responsiva

Propriedade de tamanho de fonte CSS com pixels

Neste método, "píxeis" são usados ​​para definir o valor da propriedade do tamanho da fonte, oferecendo controle total do controle do tamanho do texto para o usuário. É um valor estático que é totalmente independente.

Exemplo: Propriedade do tamanho da fonte CSS com pixels

Agora, definiremos o tamanho da fonte dos elementos do parágrafo de acordo com diferentes valores de pixels, como "50px", "40px" e "30px":

Atribuímos "50px" a este texto.

Atribuímos "40px" a este texto.

Atribuímos "30px" a este texto.

Saída

Como você pode ver na saída fornecida, o tamanho do texto dos parágrafos é definido de acordo com os valores de pixel especificados.

Propriedade do tamanho da fonte CSS com EM

O "Em" valores do CSS Propriedade do tamanho de uma fonte são usados ​​para definir o tamanho do texto de acordo com o tamanho da fonte pai em navegadores. Muitos desenvolvedores preferem "Em" sobre "pixels" Porque oferece um bom nível de compatibilidade para os navegadores.

Observação: Em um navegador, o tamanho do texto padrão é definido como 16 pixels e um em, o que significa que 1 em = 16 pixels.

Dê uma olhada no exemplo abaixo:

Exemplo: Propriedade do tamanho da fonte CSS com EM

Neste exemplo, vamos definir o "Em" valor para os elementos de texto iguais ao exemplo anterior. Para fazer isso, dividiremos o número de pixels com "16" e, em seguida, especifique o valor resultante como o valor da propriedade do tamanho da fonte dos elementos adicionados:

Isso está indo 1

Isso está indo 2

Este é um parágrafo.

A saída fornecida significa que aplicamos com sucesso a propriedade do tamanho da fonte "Em" valores:

Propriedade do tamanho da fonte CSS com valores percentuais

Também podemos definir o tamanho da fonte em relação a percentagem, e neste método, a porcentagem de fonte pode ser aumentada de 100%.

Exemplo: Propriedade do tamanho da fonte CSS com valores percentuais

Agora, atribuiremos diferentes valores percentuais ao "tamanho da fonte" Propriedades dos elementos do parágrafo:

Este tem 130% de texto do tamanho de uma fonte.

Este tem um texto de tamanho de fonte de 120%.

Este tem 90% de texto de tamanho de fonte.

Este tem 70% de texto de tamanho de fonte.

Saída

Propriedade do tamanho da fonte responsiva CSS

Usando CSS Propriedade responsiva do tamanho de uma fonte, Você também pode definir o tamanho do texto de acordo com a largura da vitrine da janela do seu navegador. Para esse fim, o "VW" o valor unitário é utilizado, enquanto 1VW = 1% da largura da viewport.

Observação: Se o usuário não definir o tamanho da fonte do texto, o tamanho padrão de um texto é igual a 16 px ou 1em.

Exemplo: Propriedade CSS Responsive Fonte

Exemplo de texto responsivo

Redimensione a janela do navegador para verificar a escalabilidade do texto.

Saída

No exemplo acima, o texto pode ser redimensionado de acordo com o navegador e seguirá o tamanho da janela do navegador.

Conclusão

No CSS, a propriedade do tamanho da fonte é utilizada para definir o tamanho de um elemento de texto, e seu valor pode ser "Predefinido" ou "personalizado". Múltiplas unidades de medição, como pixels, EM, viewport, largura e valores percentuais são especificados como os valores da propriedade do tamanho da fonte. Este artigo discutiu a propriedade do tamanho da fonte CSS e demonstrou o método para usar explicitamente o Propriedade predefinida e personalizada de tamanho de fonte valores para elementos de texto.