Os textos são uma das partes mais importantes de uma página web. O HTML permite criar e organizar informações utilizando diferentes elementos para títulos, parágrafos e destaques.
Nesta aula vamos conhecer como trabalhar com fontes e entender a forma correta de controlar a aparência dos textos utilizando HTML e CSS.
Fonte é o conjunto de características visuais utilizadas para apresentar textos, como:
Antigamente era possível alterar fontes utilizando a tag <font>.
<font face="Arial" size="5" color="blue">
Texto com fonte
</font>
No HTML5 o conteúdo deve ficar separado da aparência.
O HTML define a estrutura e o CSS define o estilo.
<p class="texto">
Texto personalizado
</p>
.texto {
font-family: Arial;
font-size: 20px;
font-weight: bold;
}
| Propriedade | Função |
|---|---|
| font-family | Define o tipo da fonte. |
| font-size | Define o tamanho. |
| font-weight | Define o peso da fonte. |
| font-style | Define estilo. |
| line-height | Define espaçamento entre linhas. |
| Família | Exemplo |
|---|---|
| Serif | Times New Roman |
| Sans-serif | Arial, Verdana |
| Monospace | Consolas, Courier |
body {
font-family: Arial, Helvetica, sans-serif;
}
A propriedade font-size define o tamanho do texto.
h1 {
font-size: 40px;
}
p {
font-size: 18px;
}
O peso define a espessura do texto.
.normal {
font-weight: normal;
}
.negrito {
font-weight: bold;
}
.italico {
font-style: italic;
}
<h1>
Curso Desenvolvimento Web
</h1>
<p>
Aprenda HTML5 e CSS3.
</p>
CSS:
h1 {
font-family: Arial;
font-size: 35px;
}
p {
font-size:18px;
}