Propriedade CSS font
A propriedade CSS font define a fonte de um elemento. Conheça as propriedades da propriedade abreviada font e veja exemplos práticos.
A propriedade font é uma propriedade abreviada para as seguintes propriedades:
Você pode definir todas as propriedades na seguinte ordem: 1. font-style, 2. font-variant, 3. font-weight, 4. font-stretch, 5. font-size / line-height, 6. font-family. A propriedade line-height é usada para definir o espaço entre as linhas.
É obrigatório definir os valores das propriedades font-size e font-family. Se um dos valores for omitido, seu valor padrão será utilizado.
Todos os valores individuais da propriedade abreviada font que não forem especificados serão definidos com seu valor inicial.
| Propriedade | Descrição |
|---|---|
| Valor Inicial | Valores padrão das propriedades. |
| Aplica-se a | Todos os elementos. Também se aplica a ::first-letter e ::first-line. |
| Herdado | Sim. |
| Animável | Sim. Font-size, font-weight, font-stretch e line-height são animáveis. |
| Versão | CSS1 |
| Sintaxe DOM | Object.style.font = "italic normal bold 1em/140% 'Lucida Grande', sans-serif"; |
Font como propriedade abreviada
Ao usar esta propriedade abreviada, você deve conhecer algumas coisas importantes sobre ela:
Valores obrigatórios
Os valores "font-size" e "font-family" são considerados obrigatórios. Toda a declaração será ignorada se um desses valores estiver ausente.
Valores opcionais
Os outros cinco valores são opcionais. Caso utilize um desses valores, leve em conta que eles devem aparecer antes do valor "font-size" na declaração, caso contrário serão ignorados.
As propriedades font e font-stretch
A propriedade font-stretch é suportada em todos os navegadores modernos.
A herança para valores opcionais
Se você omitir os valores opcionais, eles não herdarão valores do elemento pai. Eles serão restaurados ao seu estado inicial.
Palavras-chave que definem fontes do sistema
Os seguintes valores da propriedade font podem ser usados como palavras-chave:
- caption
- icon
- menu
- message-box
- small-caption
- status-bar
Eles definem a fonte para aquela usada no sistema operacional do usuário para essa categoria específica. Por exemplo, se você especificar o valor "menu", a fonte será definida naquele elemento para usar a mesma fonte que o sistema operacional utiliza em menus suspensos e listas de menus.
Esses valores de palavra-chave só podem ser usados com a propriedade abreviada font.
Sintaxe
Sintaxe da Propriedade CSS font
font: font-style font-variant font-weight font-size/line-height font-family | caption | icon | menu | message-box | small-caption | status-bar | initial | inherit;Exemplo da propriedade font:
Exemplo da Propriedade CSS font com as propriedades font-style, font-variant, font-weight, font-size, line-height e font-family
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.font {
font: italic normal bold 1em/140% "Lucida Grande", sans-serif;
}
</style>
</head>
<body>
<h2>Font property example</h2>
<p>This is some normal paragraph.</p>
<p class="font">This is a paragraph with specified font value.</p>
</body>
</html>Resultado
Exemplo da propriedade font definida com fontes em itálico:
Exemplos da Propriedade CSS font com as propriedades font-family, font-size, font-variant e font-style
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.font1 {
font: italic small-caps bold 20px/1 cursive;
}
.font2 {
font: italic 1.2em "Fira Sans", serif;
}
.font3 {
font: 1.2em "Fira Sans", sans-serif;
}
.font4 {
font: small-caps bold 28px/1.5 sans-serif;
}
.font5 {
font: caption;
/* font: menu | icon | message-box | small-caption | status-bar;*/
}
</style>
</head>
<body>
<h2>Font property example</h2>
<p class="font1">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="font2">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="font3">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="font4">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="font5">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Exemplo da propriedade font, onde font-size, font-weight e line-height são animáveis:
Exemplo de animação de fonte com as propriedades font-size, font-weight, font-stretch e line-height
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.element {
border: 2px solid #666;
width: 350px;
height: 150px;
font: 20px "Fira Sans", sans-serif;
-webkit-animation: element 4s infinite;
animation: element 4s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes element {
50% {
font: 50px bold;
}
}
/* Standard syntax */
@keyframes element {
50% {
font: 50px bold;
}
}
</style>
</head>
<body>
<h2>Font animation example</h2>
<div class="element">
<p>Some paragraph</p>
</div>
</body>
</html>Valores
| Valor | Descrição |
|---|---|
| font-style | Define o estilo da fonte. Seu valor padrão é normal. |
| font-variant | Define a variante da fonte. Seu valor padrão é normal. |
| font-weight | Define o peso da fonte. Seu valor padrão é normal. |
| font-size/line-height | Define o tamanho da fonte e a altura da linha. Seu valor padrão é normal. |
| font-family | Define a família da fonte. Seu valor padrão depende do navegador. |
| caption | Fonte usada para controles com legenda (por exemplo, botões, menus suspensos). |
| icon | Fonte usada para rotular ícones. |
| menu | Fonte usada em menus (por exemplo, menus suspensos e listas de menus). |
| message-box | Fonte usada em caixas de diálogo. |
| small-caption | Fonte usada para rotular controles pequenos. |
| status-bar | Fonte usada nas barras de status das janelas. |
| initial | Faz a propriedade usar seu valor padrão. |
| inherit | Herda a propriedade do elemento pai. |