CSS3 Web Fonts - O @font-face Regra
fontes da web permitem que os designers da Web para usar fontes que não estão instalados no computador do usuário.
Quando tiver encontrado / comprou o tipo de letra que você deseja usar, basta incluir o arquivo de fonte no seu servidor web, e ele será automaticamente baixado para o usuário, quando necessário.
Suas fontes "próprios" são definidos dentro do CSS3 @font-face regra.
Suporte a navegadores
Os números na tabela especificar a primeira versão do browser que suporta totalmente a propriedade.
| Propriedade | |||||
|---|---|---|---|---|---|
| @font-face | 4.0 | 9.0 | 3.5 | 3.2 | 10.0 |
Formatos de fontes diferentes
TrueType fontes (TTF)
TrueType é um padrão de fonte desenvolvido no final de 1980, pela Apple e Microsoft. TrueType é o formato de fonte mais comum para ambos os sistemas operacionais Mac OS e Microsoft Windows.
OpenType Fontes (OTF)
OpenType é um formato para fontes de computador escaláveis. Foi construído em TrueType , e é uma marca comercial registrada da Microsoft. OpenType fontes são comumente usados hoje nas principais plataformas de computador.
O formato Web Open Font (WOFF)
WOFF é um formato de fonte para uso em páginas da web. Ele foi desenvolvido em 2009, e agora é uma Recomendação W3C. WOFF é essencialmente OpenType ou TrueType com compressão e metadados adicionais. O objetivo é apoiar a distribuição da fonte a partir de um servidor para um cliente através de uma rede com restrições de largura de banda.
O formato Web Open Font (WOFF 2.0)
TrueType/OpenType fonte que proporciona melhor compressão do que WOFF 1.0.
SVG Fontes / Formas
fontes SVG permitir SVG para ser usado como glifos ao exibir texto. A especificação SVG 1,1 definir um módulo de fonte que permite a criação de fontes dentro de um documento SVG. Você também pode aplicar CSS para documentos SVG, ea @font-face regra pode ser aplicada ao texto em documentos SVG.
Embarcados OpenType Fontes (EOT)
Fontes EOT são uma forma compacta de OpenType fontes criadas pela Microsoft para o uso como fontes incorporadas em páginas da web.
Suporte navegador para formatos de fonte
Os números na tabela especifica a primeira versão do browser que suporta totalmente o formato de fonte.
| formato de fonte | |||||
|---|---|---|---|---|---|
| TTF/OTF | 9.0 * | 4.0 | 3,5 | 3.1 | 10.0 |
| WOFF | 9 | 5 | 3.6 | 5.1 | 11.1 |
| WOFF2 | Não suportado | 36,0 | 35,0 * | Não suportado | 26,0 |
| SVG | Não suportado | 4.0 | Não suportado | 3.2 | 9 |
| EOT | 6 | Não suportado | Não suportado | Não suportado | Não suportado |
* IE: O formato da fonte só funciona quando definido para ser "instalável".
* Firefox: Não suportado por padrão, mas pode ser ativado (necessidade de definir um sinalizador para "true", para usar WOFF2).
Usando a fonte desejada
No CSS3 @font-face regra que você deve primeiro definir um nome para a fonte (por exemplo myFirstFont ), e, em seguida, apontar para o arquivo fonte.
 | Dica: Sempre utilize letras minúsculas para o URL da fonte. letras maiúsculas pode dar resultados inesperados no IE. |
|---|
Para usar a fonte para um elemento HTML, consulte o nome da fonte ( myFirstFont ) através do font-family propriedade:
Exemplo
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div
{
font-family: myFirstFont;
}
Tente você mesmo " Usando Texto em negrito
Você deve adicionar outro @font-face regra contendo descritores para texto em negrito:
Exemplo
@font-face
{
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
Tente você mesmo " O arquivo "sansation_bold.woff" é outro arquivo de fonte, que contém os caracteres em negrito para a fonte Sansation.
Browsers vai usar isso sempre que um pedaço de texto com o font-family " myFirstFont " deve processar como negrito.
Desta forma, você pode ter muitos @font-face regras para a mesma fonte.
Teste-se com exercícios!
CSS3 Descritores Fonte
A tabela a seguir lista todos os descritores de fontes que podem ser definidos dentro do @font-face regra:
| descritor | valores | Descrição |
|---|---|---|
| font-family | name | Requeridos. Define um nome para o tipo de letra |
| src | URL | Requeridos. Define o URL do arquivo de fonte |
| font-stretch | normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded | Opcional. Define como a fonte deve ser esticado. O padrão é "normal" |
| font-style | normal italic oblique | Opcional. Define como a fonte deve ser decorados. O padrão é "normal" |
| font-weight | normal bold 100 200 300 400 500 600 700 800 900 | Opcional. Define a ousadia da fonte. O padrão é "normal" |
| unicode-range | unicode-range | Opcional. Define o intervalo de caracteres Unicode a fonte suporta. O padrão é "U + 0-10FFFF" |