A font-sizepropriedade especifica o tamanho ou altura da fonte. font-sizeafeta não apenas a fonte à qual é aplicado, mas também é usado para calcular o valor das unidades de comprimento em, rem e ex.
p ( font-size: 20px; )font-sizepode aceitar palavras-chave, unidades de comprimento ou porcentagens como valores. É importante notar, entretanto, que quando é declarado como parte da fontpropriedade abreviada, font-sizeé um valor obrigatório. Se não for incluída na abreviação, toda a linha será ignorada.
Os valores de comprimento (por exemplo, px, em, rem, ex, etc.) aos quais são aplicados font-sizenão podem ser negativos.
Palavras-chave e valores absolutos
.element ( font-size: small; )Ele aceita os seguintes valores absolutos de palavras-chave:
xx-smallx-smallsmallmediumlargex-largexx-large
Esses valores absolutos são mapeados para tamanhos de fonte específicos calculados pelo navegador. Mas você também pode usar dois valores de palavra-chave que são relativos ao tamanho da fonte do elemento pai.
Outros valores absolutos incluem mm(milímetros), cm(centímetros), in(polegadas), pt(pontos) e pc(picas). Um ponto é igual a 1/72 de polegada, enquanto uma paica é igual a 12 pontos - esses valores são normalmente usados para documentos impressos.
Palavras-chave relativas
.element ( font-size: larger; )largersmaller
Por exemplo, se o elemento pai tiver um tamanho de fonte de small, um elemento filho com um tamanho relativo definido de largertornará o tamanho da fonte igual a mediumpara o elemento filho.
Valores percentuais
.element ( font-size: 110%; )Os valores percentuais, como definir um tamanho de fonte de 110%, também são relativos ao tamanho da fonte do elemento pai, conforme mostrado na demonstração abaixo:
Veja o Pen qdbELL de CSS-Tricks (@ css-tricks) no CodePen.
A unidade em
.element ( font-size: 2em; )A unidade em é uma unidade relativa baseada no valor calculado do tamanho da fonte do elemento pai. Isso significa que os elementos filho são sempre dependentes de seu pai para definir o tamanho da fonte. Por exemplo:
This is a heading
This is some text.
.container ( font-size: 16px; ) p ( font-size: 1em; ) h2 ( font-size: 2em; )No exemplo acima, o parágrafo terá um tamanho de fonte de 16px porque 1 x 16 = 16px, enquanto o título terá 32px porque 2 x 16 = 32px. Existem muitas vantagens em dimensionar o tipo dependendo do tamanho da fonte do elemento pai, ou seja, podemos agrupar elementos em um contêiner e saber que todos os filhos sempre serão relativos uns aos outros:
Veja a Caneta Descobrindo como a unidade em funciona por CSS-Tricks (@ css-tricks) no CodePen.
A unidade rem
No caso de unidades rem, entretanto, o tamanho da fonte depende do valor do elemento raiz (ou do htmlelemento).
html ( font-size: 16px; ) p ( font-size: 1.5rem; )No exemplo acima, a unidade rem é igual a 16px (porque é herdada do htmlelemento / raiz) e, portanto, o tamanho da fonte para todos os elementos de parágrafo será calculado para 24px (1,5 x 16 = 24). Ao contrário das unidades em, o parágrafo irá ignorar o estilo de todos os seus pais além da raiz.
Esta unidade é compatível com os seguintes navegadores:
| cromada | Safári | Raposa de fogo | Ópera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Funciona | Funciona | Funciona | Funciona | 10+ | Funciona | Funciona |
A ex unidade
.element ( font-size: 20ex; )Para unidades ex, 1ex seria igual à altura calculada da letra x minúscula do elemento raiz. Portanto, no exemplo abaixo, o htmlelemento é definido como 20pxe todos os outros tamanhos de fonte são determinados pela altura x dessa fonte específica.
Veja a caneta Descobrindo como a unidade ex funciona por CSS-Tricks (@ css-tricks) no CodePen.
Experimente o demo acima, substituindo o font-familyno htmlelemento para ver como os outros tamanhos de fonte mudam.
Unidades de viewport
.element-one ( font-size: 100vh; ) .element-two ( font-size: 100vw; )As unidades da janela de visualização , como vwe vh, definem o tamanho da fonte de um elemento em relação às dimensões da janela de visualização:
- 1vw = 1% da largura da janela de visualização
- 1vh = 1% da altura da janela de visualização
Portanto, se tomarmos o seguinte exemplo:
.element ( font-size: 100vh; )Em seguida, isso indicará que o tamanho da fonte do elemento deve ser sempre 100% da altura da janela de visualização em todos os momentos (50vh seria 50%, 15vh seria 15% e assim por diante). Na demonstração abaixo, tente redimensionar a altura do exemplo para observar o tipo de alongamento:
Veja o tipo de dimensionamento de caneta com unidades vh por CSS-Tricks (@ css-tricks) em CodePen.
vw As unidades são diferentes porque definem a altura das formas das letras pela largura da janela de visualização, portanto, na demonstração abaixo, você precisará redimensionar a janela do navegador horizontalmente para ver essas alterações:
Veja o tipo de dimensionamento de caneta com unidades vw por CSS-Tricks (@ css-tricks) em CodePen.
Essas unidades são compatíveis com os seguintes navegadores:
| cromada | Safári | Raposa de fogo | Ópera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 31+ | 7 + | 31+ | 27+ | 9+ | 4,4+ | 7,1+ |
É importante notar que existem duas outras unidades de janela de visualização: vmine vmax. O primeiro encontrará os valores de vhe vwe definirá o tamanho da fonte como o menor dos dois, enquanto vmaxdefine o tamanho da fonte como o maior desses dois valores.
A unidade ch
.element ( font-size: 24ch; )A chunidade é semelhante à exunidade no sentido de que definirá o tamanho da fonte de um elemento em relação à largura do glifo 0 (zero) da fonte:
Veja o tipo de dimensionamento de caneta com unidades de ch por CSS-Tricks (@ css-tricks) em CodePen.
Esta unidade é apoiada por:
| cromada | Safári | Raposa de fogo | Ópera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 27+ | Funciona | 10+ | Funciona | 9+ | Funciona | Funciona |