As propriedades de fonte CSS definem a família de fontes, ousadia, tamanho e estilo de texto.
Diferença entre fontes com serifa e sem serifa
Famílias CSS Font
Em CSS, existem dois tipos de nomes de família da fonte:
- família genérica - um grupo de famílias de fontes com um olhar similar (como "Serif" ou "Monospace")
- Família da fonte - uma família fonte específica (como "Times New Roman" ou "Arial")
| Generic family | Font family | Description |
|---|---|---|
| Serif | Times New Roman Georgia |
Serif fonts have small lines at the ends on some characters |
| Sans-serif | Arial Verdana |
"Sans" means without - these fonts do not have the lines at the ends of characters |
| Monospace | Courier New Lucida Console |
All monospace characters have the same width |
 | Nota: Em telas de computador, fontes sans-serif são considerados mais fácil de ler do que fontes com serifa. |
|---|
Família de fontes
A família da fonte de um texto é definido com o font-family propriedade.
O font-family propriedade deve conter vários nomes de fontes como um sistema de "fallback". Se o navegador não suporta a primeira fonte, ele tenta a próxima fonte, e assim por diante.
Comece com a fonte desejada, e terminam com uma família genérica, para deixar o navegador escolher um tipo de letra semelhante na família genérica, se não houver outras fontes estão disponíveis.
Nota: Se o nome de uma família de fontes é mais do que uma palavra, ele deve estar entre aspas, como: "Times New Roman".
Mais de uma família da fonte é especificado em uma lista separada por vírgula:
Para combinações de fontes comumente usados, consulte a página Web seguro Fonte Combinações .
Estilo de fonte
O font-style propriedade é maioritariamente utilizado para especificar texto em itálico.
Esta propriedade tem três valores:
- Normal - O texto é exibido normalmente
- itálico - O texto é mostrado em itálico
- oblíquo - O texto é "inclinar-se" (oblíqua é muito similar ao itálico, mas menos suportado)
Exemplo
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
} Tente você mesmo " Tamanho da fonte
O font-size propriedade define o tamanho do texto.
Ser capaz de gerenciar o tamanho do texto é importante em web design. No entanto, você não deve usar ajustes de tamanho de fonte para fazer parágrafos olhar como títulos, ou das posições parecer parágrafos.
Sempre usar as tags HTML adequados, como o <h1> - <h6> para títulos e <p> para parágrafos.
O valor font-size pode ser um tamanho absoluto ou relativo.
tamanho absoluto:
- Define o texto a um tamanho especificado
- Não permite que um usuário altere o tamanho do texto em todos os navegadores (mau por razões de acessibilidade)
- Tamanho absoluto é útil quando o tamanho físico da saída é conhecida
Tamanho relativo:
- Define o tamanho relativo aos elementos circundantes
- Permite que o usuário altere o tamanho do texto em navegadores
| Nota: Se você não especificar um tamanho de fonte, o tamanho padrão para texto normal, como parágrafos, é 16px (16px = 1em). |
|---|
Definir Tamanho da Fonte Com Pixels
Definir o tamanho do texto com pixels lhe dá controle total sobre o tamanho do texto:
Dica: Se você usa pixels, você ainda pode usar a ferramenta de zoom para redimensionar a página inteira.
Definir Tamanho da fonte com o EM
Para permitir que usuários para redimensionar o texto (no menu do navegador), muitos desenvolvedores usar em vez de pixels.
O tamanho da unidade em é recomendado pelo W3C.
1em é igual ao tamanho da fonte de corrente. O tamanho do texto padrão em navegadores é 16px. Assim, o tamanho padrão de 1em é 16px.
O tamanho pode ser calculado a partir de pixels para em usando esta fórmula:pixels/ 16 =EM
Exemplo
h1 {
font-size: 2.5em; /* 40px/16=2.5em */
}
h2 {
font-size: 1.875em; /* 30px/16=1.875em */
}
p {
font-size: 0.875em; /* 14px/16=0.875em */
} Tente você mesmo " No exemplo acima, o tamanho do texto na EM é o mesmo que o exemplo anterior em pixels. No entanto, com o tamanho em, é possível ajustar o tamanho do texto em todos os navegadores.
Infelizmente, ainda há um problema com versões mais antigas do IE. O texto torna-se maior do que deveria quando feito maior e menor do que deveria quando feita menor.
Use uma combinação de cento e Em
A solução que funciona em todos os navegadores, é definir um padrão font-size em porcentagem para o elemento <body>:
Exemplo
body {
font-size: 100%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875em;
}
p {
font-size: 0.875em;
} Tente você mesmo " Nosso código agora funciona muito bem! Ele mostra o mesmo tamanho do texto em todos os navegadores, e permite que todos os navegadores para aumentar ou redimensionar o texto!
Espessura da FONTE
O font-weight propriedade especifica o peso de uma fonte:
fonte Variant
O font-variant propriedade especifica se ou não um texto deve ser exibido em uma fonte small-caps.
Em uma fonte small-caps, todas as letras minúsculas são convertidas em letras maiúsculas. No entanto, as letras maiúsculas convertidos aparece em um tamanho de fonte menor do que as letras maiúsculas originais no texto.
mais Exemplos
Todas as propriedades de fonte em uma declaração
Este exemplo demonstra como usar o atalho para definir todas as propriedades de fonte em uma declaração.
Teste-se com exercícios!
Exercício 1 » Exercício 2» Exercício 3 » Exercício 4» Exercício 5 »
Todas as propriedades CSS Font
| Property | Description |
|---|---|
| font | Sets all the font properties in one declaration |
| font-family | Specifies the font family for text |
| font-size | Specifies the font size of text |
| font-style | Specifies the font style for text |
| font-variant | Specifies whether or not a text should be displayed in a small-caps font |
| font-weight | Specifies the weight of a font |