Exemplo
Especifique uma fonte chamada "myFirstFont" , e especificar o URL onde ele pode ser encontrado:
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
} Tente você mesmo " Mais "Try it Yourself" exemplos abaixo.
Definição e Uso
Com a regra @ font-face, web designers que já não têm de utilizar um dos "web-safe" fontes.
Na nova regra @ font-face você deve primeiro definir um nome para a fonte (eg myFirstFont) , e, em seguida, apontar para o arquivo fonte.
Dica: Use 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 da propriedade font-family:
div
{
font-family: myFirstFont;
}Suporte a navegadores
A regra @ font-face é suportada no Internet Explorer, Firefox, Opera, Chrome e Safari.
Os números na tabela especifica a primeira versão do browser que suporta totalmente o formato de fonte.
| formato de fonte | |||||
|---|---|---|---|---|---|
| TTF / OTF | 4.0 | 9.0 * | 3,5 | 3.1 | 10.0 |
| WOFF | 5 | 9 | 3.6 | 5.1 | 11.1 |
| WOFF2 | 36,0 | Não suportado | 35,0 * | Não suportado | 26,0 |
| SVG | 4.0 | Não suportado | Não suportado | 3.2 | 9 |
| EOT | Não suportado | 6 | Não suportado | Não suportado | Não suportado |
* Edge e IE: O formato da fonte só funciona quando definido para ser "installable" .
* Firefox: desativado por padrão, mas pode ser ativada (necessidade de definir um sinalizador para "true" para usar WOFF2).
Sintaxe
@font-face
{
font-properties
}| descritor de fonte | valores | Descrição |
|---|---|---|
| família de fontes | name | Requeridos. Define o nome da fonte. |
| src | URL | Requeridos. Define o URL(s) onde a fonte deve ser descarregado a partir |
| font-stretch | normal condensado ultra-condensado extra-condensado semi-condensado expandido semi-expandida extra-expandida ultra-expandido | Opcional. Define como a fonte deve ser esticado. O valor padrão é "normal" |
| estilo de fonte | normal itálico oblíquo | Opcional. Define como a fonte deve ser decorados. O valor padrão é "normal" |
| espessura da FONTE | normal negrito 100 200 300 400 500 600 700 800 900 | Opcional. Define a ousadia da fonte. O valor padrão é "normal" |
| unicode-range | unicode-range | Opcional. Define o intervalo de caracteres Unicode a fonte suporta. O valor padrão é "U+0-10FFFF" |
Tente você mesmo - Exemplos
Exemplo
Você deve adicionar outra regra @ font-face contendo descritores para texto em negrito:
@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 muitas regras @ font-face para a mesma fonte.
Páginas relacionadas
Tutorial CSS3: CSS3 fontes