Fonte do CSS
- Página Anterior Texto do CSS
- Próxima Página Lista do CSS
A propriedade de fonte do CSS define a família de caracteres, o tamanho, o negrito, o estilo (como itálico) e a transformação (como minúsculas maiúsculas) do texto.
Série de Fontes CSS
No CSS, há dois tipos diferentes de nomes de famílias de caracteres:}
- Família de caracteres genérica - combinações de sistemas de fontes com aparência semelhante (por exemplo, "Serif" ou "Monospace")
- Família de caracteres específica - famílias de caracteres específicas (por exemplo, "Times" ou "Courier")
Além das várias famílias de caracteres específicas, o CSS define 5 famílias de caracteres genéricas:
- Fontes Serif
- Fontes Sans-serif
- Fontes de Monospace
- Fontes de Cursive
- Fontes de Fantasia
Se precisar saber mais sobre as famílias de caracteres, leia Série de Fontes CSS.
Família de caracteres especificada
Uso Propriedade font-family Definir a família de caracteres do texto.
Uso da família de caracteres genérica
Se você deseja que o documento use um tipo de letra sans-serif, mas não se importa com qual, aqui está uma declaração apropriada:
body {font-family: sans-serif;}
O agente de usuário então escolherá uma fonte da família sans-serif (como Helvetica) e aplicará ao elemento body. Devido à herança, essa escolha de fonte também se aplicará a todos os elementos contidos no elemento body, a menos que haja um selector mais específico para cobri-lo.
Família de caracteres especificada
Além de usar a família de caracteres genérica, você também pode definir uma fonte mais específica através da propriedade font-family.
O exemplo a seguir define a fonte Georgia para todos os elementos h1:
h1 {font-family: Georgia;}
Essa regra também pode gerar outro problema, se o agente de usuário não tiver instalado a fonte Georgia, só pode usar a fonte padrão do agente de usuário para exibir o elemento h1.
Podemos resolver este problema combinando o nome do tipo de letra específico e a família de caracteres genérica:
h1 {font-family: Georgia, serif;}
Se o leitor não tiver instalado o Georgia, mas tiver instalado a fonte Times (um tipo de letra da série serif), o agente de usuário pode usar Times para o elemento h1. Embora Times não correspondam completamente ao Georgia, pelo menos são suficientemente semelhantes.
Portanto, recomendamos fornecer uma família de caracteres genérica em todas as regras de font-family. Isso oferece uma saída de emergência, caso o agente de usuário não possa fornecer um tipo de letra específico que corresponda às regras.
Se você estiver muito familiarizado com os tipos de letra, também pode especificar uma série de fontes semelhantes para o elemento fornecido. Para fazer isso, é necessário organizar essas fontes em ordem de prioridade e conectá-las com vírgula:
p {font-family: Times, TimesNR, 'New Century Schoolbook',}}
Georgia, 'New York', serif;}
Baseado nesta lista, o agente de usuário procurará essas fontes na ordem listada. Se todas as fontes listadas não estiverem disponíveis, simplesmente escolherá uma fonte serif disponível.
Uso de aspas
Talvez você tenha notado que no exemplo acima foram usadas aspas simples. Apenas quando o nome da fonte contém um ou mais espaços (por exemplo, New York) ou se o nome da fonte inclui símbolos como # ou $, é necessário usar aspas no declaração da propriedade font-family.
As aspas simples ou duplas são aceitáveis. Mas, se uma propriedade font-family for colocada dentro da propriedade style do HTML, é necessário usar o tipo de aspas que a propriedade font-family não usa:
<p style="font-family: Times, TimesNR, 'New Century Schoolbook', Georgia,">... 'New York', serif;">...
Estilo de fonte
A propriedade font-styleUsado mais frequentemente para definir o texto em itálico.
Esta propriedade tem três valores:
- normal - exibição de texto normal
- italic - exibição de texto em itálico
- oblique - exibição de texto inclinado
Exemplo
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
Diferenças entre italic e oblique
A propriedade font-style é muito simples: usada para escolher entre o texto normal, o texto italic e o texto oblique. A única coisa um pouco complexa é明确了 italic e oblique entre si.
O estilo italic é uma simples forma de estilo de fonte, que faz algumas pequenas mudanças na estrutura de cada letra para refletir a aparência alterada. Por outro lado, o texto oblique é uma versão inclinada do texto vertical normal.
Normalmente, o texto italic e o texto oblique parecem exatamente o mesmo no navegador da web.
Deformação de fontes
A propriedade font-variantÉ possível definir letras em caixa pequena.
As letras em caixa pequena não são letras em caixa alta comuns, nem são letras minúsculas, essas letras usam letras maiúsculas de diferentes tamanhos.
Exemplo
p {font-variant:small-caps;}
Espessura da fonte
Atributo font-weightDefinir a grossura do texto.
O uso da palavra-chave bold pode definir o texto em negrito.
As palavras-chave de 100 a 900 especificam 9 níveis de espessura da fonte. Se um corpo de texto tiver esses níveis de espessura embutidos, esses números são mapeados diretamente para os níveis pré-definidos, 100 correspondendo à espessura mais fina e 900 à mais grossa. O número 400 é equivalente a normal e 700 a bold.
Se o elemento estiver definido como bolder, o navegador ajustará a espessura da fonte para um valor mais grossinho do que o valor herdado. Por outro lado, a palavra-chave lighter fará com que o navegador diminua a espessura da fonte em vez de aumentá-la.
Exemplo
p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}
Tamanho da fonte
Atributo font-sizeDefinir o tamanho do texto.
A capacidade de gerenciar o tamanho do texto é importante na área de design da web. No entanto, você não deve ajustar o tamanho do texto para que os parágrafos pareçam como títulos ou para que os títulos pareçam como parágrafos.
Sempre use o título HTML correto, por exemplo, use <h1> - <h6> para marcar títulos, use <p> para marcar parágrafos.
O valor de font-size pode ser absoluto ou relativo.
Valor absoluto:
- Definir o tamanho do texto para um tamanho especificado
- Não permitir que o usuário altere o tamanho do texto em todos os navegadores (não é favorável para a acessibilidade)
- O tamanho absoluto é útil quando se determina o tamanho físico de saída
Tamanho relativo:
- Definir o tamanho em relação aos elementos ao redor
- Permitir que o usuário altere o tamanho do texto no navegador
Atenção:Se você não especificar o tamanho da fonte, o tamanho padrão do texto normal (por exemplo, parágrafos) é 16 pixels (16px=1em).
Usar pixels para definir o tamanho da fonte
Ao definir o tamanho do texto em pixels, é possível controlar completamente o tamanho do texto:
Exemplo
h1 {font-size:60px;}
h2 {font-size:40px;}
p {font-size:14px;}
No Firefox, Chrome e Safari, é possível ajustar o tamanho do texto dos exemplos acima, mas não no Internet Explorer.
Embora seja possível ajustar o tamanho do texto usando as ferramentas de zoom do navegador, isso realmente ajusta todo o página, e não apenas o texto.
Usar em para definir o tamanho da fonte
Para evitar problemas de ajuste de texto no Internet Explorer, muitos desenvolvedores usam a unidade em.
W3C recomenda usar a unidade de tamanho em.
1em é igual ao tamanho atual da fonte. Se um elemento tiver font-size de 16 pixels, então para esse elemento, 1em é igual a 16 pixels. Ao definir o tamanho da fonte, o valor em muda em relação ao tamanho da fonte do pai.
O tamanho padrão do texto em todos os navegadores é de 16 pixels. Portanto, o tamanho padrão de 1em é de 16 pixels.
Pode usar a seguinte fórmula para converter pixels para em:pixels/16=em
(Nota: 16 é o tamanho padrão da fonte do elemento pai, supondo que o elemento pai tenha font-size de 20px, a fórmula deve ser alterada:pixels/20=em)
Exemplo
h1 {font-size:3.75em;} /* 60px/16=3.75em */
h2 {font-size:2.5em;} /* 40px/16=2.5em */
p {font-size:0.875em;} /* 14px/16=0.875em */
No exemplo acima, o tamanho do texto medido em em é o mesmo que o exemplo anterior medido em pixels. No entanto, se usar o unidade em, pode ajustar o tamanho do texto em todos os navegadores.
Infelizmente, ainda há problemas no IE. Ao ajustar o tamanho do texto, ele pode ser maior ou menor do que o tamanho normal.
Uso combinado de porcentagem e em
A solução eficaz em todos os navegadores é definir o valor padrão de font-size em porcentagem para o elemento body (elemento pai):
Exemplo
body {font-size:100%;}
h1 {font-size:3.75em;}
h2 {font-size:2.5em;}
p {font-size:0.875em;}
Nosso código é muito eficaz. Pode exibir o mesmo tamanho de texto em todos os navegadores e permitir que todos os navegadores ajustem o tamanho do texto.
Exemplo de propriedade de fonte CSS:
- Definir a fonte do texto
- Este exemplo demonstra como definir a fonte do texto.
- Definir o tamanho da fonte
- Este exemplo demonstra como definir o tamanho da fonte.
- Definir o estilo da fonte
- Este exemplo demonstra como definir o estilo da fonte.
- Definir o estilo alternativo da fonte
- Este exemplo demonstra como definir o estilo alternativo da fonte.
- Definir a grossura da fonte
- Este exemplo demonstra como definir a grossura da fonte.
- Todas as propriedades de fonte em uma declaração
- Este exemplo demonstra como usar o atributo abreviado para definir propriedades de fonte em uma declaração.
Propriedades de Fonte CSS
| Propriedade | Descrição |
|---|---|
| font | Atributo abreviado. Serve para definir todas as propriedades de字体 em uma declaração. |
| font-family | Definir a série da fonte. |
| font-size | Definir o tamanho da fonte. |
| font-size-adjust | Escalar inteligentemente a fonte substituta quando a fonte preferida não estiver disponível. (O atributo foi removido no CSS2.1.) |
| font-stretch | Esticar horizontalmente a fonte. (O atributo foi removido no CSS2.1.) |
| font-style | Definir o estilo da fonte. |
| font-variant | Exibir o texto em letras maiúsculas pequenas ou em fonte normal. |
| font-weight | Definir a grossura da fonte. |
- Página Anterior Texto do CSS
- Próxima Página Lista do CSS
