CSS Font
Use propriedades de fonte CSS para estilizar texto, definir tamanho, negrito e família de fonte. Aprenda a usar estilos de fonte CSS.
A tipografia é uma das primeiras coisas que um leitor nota em uma página, e o CSS oferece controle detalhado sobre ela. As propriedades de fonte CSS definem o tipo de letra (família de fontes), o tamanho, o peso (negrito) e o estilo (como itálico) do seu texto.
Este capítulo apresenta cada propriedade de fonte individualmente, mostra um exemplo executável para cada uma e explica o shorthand font, que permite definir todas em uma única declaração.
A propriedade CSS font é um shorthand que combina várias propriedades de fonte. Aqui explicaremos as propriedades individuais que a compõem:
Ao adicionar textos ou links a uma página web, os estilizamos usando essas propriedades. Vamos explorá-las em detalhes.
Font Family
Usamos a propriedade font-family para especificar a fonte do texto. Ela define o nome da fonte utilizada na página web.
CSS Font
p {
font-family: Arial, sans-serif;
}Como você pode ver, aplicamos a propriedade font-family à nossa tag <p>. Diferenciamos dois tipos de famílias:
- família genérica - um grupo de famílias de fontes com aparência semelhante (como "Serif" ou "Sans-serif")
- família de fontes - uma família de fontes específica (como "Times New Roman" ou "Arial")
Quando o nome de uma família de fontes é composto por mais de uma palavra, coloque-o entre aspas (por exemplo, "Times New Roman"). Também é recomendado fornecer uma família de fontes alternativa caso o navegador não suporte a primeira.
Font Style
Usamos a propriedade font-style principalmente para exibir texto em itálico.
Os valores mais usados para a propriedade font-style são:
normal, que exibe o texto normalmente,italic, que exibe 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 padrão, nosso texto terá font-style: normal, mesmo sem escrever esse valor.
Font Size
Usamos a propriedade font-size para definir o tamanho do texto.
Os valores podem ser especificados em pixels, pontos, em, rem, etc. Você pode encontrar a lista completa na seção font-size. Note que 1em equivale ao tamanho de fonte calculado do elemento pai (geralmente 16px por padrão). 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>Você precisa experimentar por conta própria. Pode fazer isso com nosso editor online de HTML clique aqui.
Font Variant
A propriedade font-variant permite definir o texto como normal ou versalete (small-caps).
O valor small-caps converte letras minúsculas em maiúsculas, mas as exibe em um tamanho menor do que as letras 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 deixar o texto comum mais negrito, já que os títulos já são negrito por padrão.
Usamos a propriedade font-weight para isso.
Os valores mais usados 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 mencionado, 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 a 900, a fonte fica mais negrita.
O Shorthand font
Em vez de escrever cada propriedade em sua própria linha, você pode definir todas de uma vez com o shorthand font. Isso mantém sua folha de estilos mais curta e agrupa declarações relacionadas.
A ordem dos valores importa. A sintaxe é:
font: font-style font-variant font-weight font-size/line-height font-family;Algumas regras a lembrar:
font-sizeefont-familysão obrigatórios. Se algum deles estiver ausente, toda a declaração será ignorada.font-style,font-variantefont-weightsão opcionais e devem vir antes defont-size.line-heighté opcional e é escrito apósfont-size, separado por uma barra (/).- Qualquer valor omitido é redefinido para seu valor padrão, portanto o shorthand é uma forma conveniente de limpar declarações longas anteriores.
Aqui está o mesmo parágrafo estilizado com propriedades longas e, em seguida, com o shorthand:
/* Longhand */
p {
font-style: italic;
font-weight: bold;
font-size: 18px;
line-height: 1.5;
font-family: Georgia, serif;
}
/* Equivalent shorthand */
p {
font: italic bold 18px/1.5 Georgia, serif;
}Para mais detalhes e exemplos, consulte o capítulo font.