Tipos de letra em CSS
Use as propriedades CSS de tipo de letra para aplicar estilo ao texto e definir o seu tamanho, espessura e família. Aprenda a utilizar os estilos de tipo de letra em CSS.
Neste capítulo, vamos falar sobre tipos de letra.
As propriedades CSS de tipo de letra são utilizadas para definir o tamanho, a família, a espessura e o estilo do texto.
A propriedade CSS font é uma forma abreviada (shorthand) que combina várias propriedades de tipo de letra. Aqui vamos explicar as propriedades individuais que a compõem:
Quando adicionamos texto ou links a uma página web, aplicamos-lhes estilo utilizando estas propriedades. Vamos analisá-las em detalhe.
Font Family
Utilizamos a propriedade font-family para especificar o tipo de letra do texto. Esta define o nome do tipo de letra utilizado na página web.
Tipo de letra em CSS
p {
font-family: Arial, sans-serif;
}Como pode ver, aplicámos a propriedade font-family à nossa tag <p>. Distinguimos dois tipos de famílias:
- família genérica - um grupo de famílias de tipos de letra com um aspeto semelhante (como "Serif" ou "Sans-serif")
- família de tipo de letra - uma família de tipo de letra específica (como "Times New Roman" ou "Arial")
Quando o nome de uma família de tipo de letra é composto por mais do que uma palavra, coloque-o entre aspas (por exemplo, "Times New Roman"). Recomenda-se também indicar uma família de tipo de letra de reserva (fallback) caso o browser não suporte a primeira.
Font Style
Utilizamos a propriedade font-style principalmente para apresentar o texto em itálico.
Os valores mais utilizados para a propriedade font-style são:
normal, que apresenta o texto normalmente,italic, que apresenta o texto em itálico,oblique, que "inclina" o texto.
Exemplo da propriedade font-style:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p style="font-style:normal">This is paragraph with font-style property with normal value.</p>
<p style="font-style:italic">This is paragraph with font-style property with italic value.</p>
<p style="font-style:oblique">This is paragraph with font-style property with oblique value.</p>
</body>
</html>Por predefinição, o nosso texto será font-style: normal, mesmo sem escrever este valor.
Font Size
Utilizamos a propriedade font-size para definir o tamanho do texto.
Os valores podem ser especificados em pixels, pontos, em, rem, etc. Pode encontrar a lista completa na secção font-size. Note que 1em equivale ao tamanho de letra calculado do elemento pai (muitas vezes 16px por predefinição). Os pixels (px) são a unidade mais utilizada.
Exemplo da propriedade font-size:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h3 style="font-size:40px;"> Some heading with font-size property.</h3>
<p style="font-size:25px;"> Some paragraph with font-size property.</p>
<a style="font-size:2em;"> Some link with font-size property.</a>
</body>
</html>Também o deve verificar por si próprio. Pode fazê-lo com o nosso editor HTML online clique aqui.
Font Variant
A propriedade font-variant permite-lhe definir o texto como normal ou small-caps.
O valor small-caps converte as letras minúsculas em maiúsculas, mas apresenta-as com um tamanho mais pequeno do que as maiúsculas originais.
Exemplo da propriedade font-variant:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.smallcaps {
font-variant: small-caps;
}
</style>
</head>
<body>
<h2>Font-variant property example</h2>
<p>Here we used a normal text as you can see.</p>
<p class="smallcaps">But We Used A Text With Small-Caps Here.</p>
</body>
</html>Font Weight
Agora, vamos aprender a tornar o texto normal mais a negrito, uma vez que os títulos já estão a negrito por predefinição.
Para isso, utilizamos a propriedade font-weight.
Os valores mais utilizados para a propriedade font-weight são:
normalbold
Os valores também podem ser especificados como números.
Exemplo da propriedade font-weight:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p style="font-weight:900">Some paragraph with the font-weight property with value bold.</p>
<p style="font-weight:normal">Some paragraph with the font-weight property with value normal.</p>
<p style="font-weight:bold">Some paragraph with the font-weight property with value bold.</p>
</body>
</html>Como referido, os valores numéricos variam de 100 a 900. O valor 400 corresponde a normal e 700 corresponde a bold. À medida que o número aumenta de 100 para 900, o tipo de letra fica mais a negrito.