4.6 KiB
| title | localeTitle |
|---|---|
| Font Size Property | Propriedade do tamanho da fonte |
Propriedade do tamanho da fonte
Definição e Uso
A propriedade font-size é usada para definir o tamanho da fonte de um elemento. Abaixo está a sintaxe padrão para essa propriedade.
font-size:medium|xx-small|x-small|small|large|x-large|xx-large|smaller|larger|length|initial|inherit;
Como mostrado acima, essa propriedade pode levar vários valores. O valor padrão é médio e os valores de xx-small a xx-large definem o tamanho da fonte de muito pequeno para muito grande (como tamanhos de roupas). Os valores menores e maiores definem o tamanho da fonte como menor que o tamanho da fonte do elemento pai e maior que o tamanho da fonte do elemento pai, respectivamente. Apesar da disponibilidade dos valores acima mencionados, o tipo mais comum de valor usado é uma unidade de comprimento. Unidades de comprimento podem incluir: px , % , em , rem e pt .
Unidades de comprimento explicadas
px
Você pode usar a unidade * px para definir um tamanho de fonte fixo para um elemento em pixels. Um pixel é um ponto na tela do usuário. Como os pixels fornecem um tamanho de fonte fixo, o tamanho da fonte não pode ser responsivo. Isso é negativo porque os tamanhos das fontes podem não aparecer bem em diferentes dimensões da tela e você teria que usar consultas de mídia para fazer a escala da fonte.
Exemplo:
p {
font-size: 20px;
}
Resultado: 
%
Você pode usar a porcentagem % unit para definir o tamanho da fonte em relação ao tamanho da fonte do elemento do corpo. O padrão é 16px, então 100% seria igual a 16px. Se o tamanho da fonte do corpo for alterado, o tamanho da fonte de qualquer elemento contido no corpo que tenha um valor como porcentagem também será alterado. Esta unidade permite que a fonte seja dimensionada em vários tamanhos de tela.
Exemplo:
p {
font-size: 120%;
}
Resultado: 
O código acima altera o tamanho da fonte para 120% do tamanho da fonte padrão, que é 16px.
em
Outra unidade que pode ser usada para o tamanho da fonte é a unidade em . Uma unidade em é igual ao tamanho de fonte padrão do elemento pai mais próximo. Isso significa que 2em seria o dobro do tamanho da fonte e 4em seria 4 vezes o tamanho da fonte. A unidade em está se tornando mais popular, já que pode escalar e é compatível com dispositivos móveis.
Exemplo:
p {
font-size: 1.4em;
}
Resultado: 
O código acima define o tamanho da fonte do parágrafo para 1,4 vezes o tamanho da fonte de seu pai mais próximo, que é o elemento body. O elemento body tem um tamanho de fonte padrão de 16px, portanto, esse parágrafo teria um tamanho de fonte de 1,4 * 16 = 22,4px.
rem
A unidade rem é muito semelhante à unidade em , mas o tamanho da fonte é relativo ao tamanho da fonte padrão do elemento-raiz. O elemento-raiz é o elemento <html> .
Exemplo:
html {
font-size: 12px;
}
p {
font-size: 1.4rem;
}
Resultado: 
O parágrafo acima tem um tamanho de fonte de 1,4em. Desta vez, o tamanho da fonte do elemento raiz foi alterado para 12px, então a fonte do parágrafo agora é 12 * 1,4 = 16.8px. A unidade rem não considera a fonte do elemento body, apesar do fato de ainda ser 16px.
pt
A unidade final para tamanhos de fonte é o valor do ponto ( pt ). Este valor é relativo aos tamanhos reais do texto. Um pt é igual a 1/72 polegadas no papel, então 72pt é igual a 1 polegada. Os valores dos pontos são precisos no papel, mas podem parecer diferentes em diferentes navegadores. Esta unidade só é útil quando você precisa imprimir páginas com um tamanho de fonte preciso. A unidade pt não é escalável.
Exemplo:
p {
font-size: 16pt;
}
Resultado: 
O tamanho da fonte acima é 16pt.
Anexei alguns links de artigos abaixo se quiser ler mais sobre esse tópico.