Regras CSS3 @ font-face
Exemplos
Especifique uma fonte chamada "myFirstFont", e especificar onde encontrar a sua URL:
{
font-family: myFirstFont;
src: url ( 'Sansation_Light.ttf'),
url ( 'Sansation_Light.eot'); / * IE9 * /
}
tente »
Suporte a navegadores
Internet Explorer 9, Firefox, Opera, Chrome e Safari apoio regra @ font-face.
No entanto, o Internet Explorer 9 suporta apenas .eot tipos de fontes, Firefox, Chrome, Safari e Opera apoio .ttf e .otf dois tipos de fontes.
Nota: Internet Explorer 8 e versões anteriores do IE não suportam regra @ font-face.
Atributo definições e instruções
Regra @ font-face, web designers já não tem que usar fontes "web-safe" one.
Nome da fonte, tipo de letra - regras de rosto:
- font-family: myFirstFont;
arquivos de fontes contidas no seu servidor em algum lugar, CSS referência:
- src: url ( 'Sansation_Light.ttf')
Se o arquivo de fonte está em um local diferente, use a URL completa:
- src: url ( "../../ www.w3cschool.css / CSS3 / Sansation_Light.ttf ')
Agora está pronto para usar a fonte, o seguinte é um exemplo de como usá-lo todo o elemento div:
{
font-family: myFirstFont;
}
sintaxe:
- @ Font-face
{
font-properties
}
Os seguintes exemplos de fontes usadas em uma div:
{
font-family: myFirstFont;
}
gramática
{
font-properties
}
| descrição da fonte | valor | explicação |
|---|---|---|
| font-family | nome | Necessário. Definir o nome da fonte. |
| src | URL | Necessário. Definir o URL de download de fonte (S) |
| font-stretch | normal condensado ultra-condensado extra-condensado semi-condensado expandido semi-expandida extra-expandida ultra-expandido | Opcional. Definir como a fonte deve ser esticado. O valor padrão é "normal" |
| font-style | normal itálico oblíquo | Opcional. Defina o estilo da fonte como deve ser. O valor padrão é "normal" |
| font-weight | normal negrito 100 200 300 400 500 600 700 800 900 | Opcional. Um peso fonte personalizada. O valor padrão é "normal" |
| unicode-range | unicode-range | Opcional. A gama é definida fontes suportar caracteres Unicode. O valor padrão é "u + 0-10 FFFF" |
artigos relacionados
tutorial CSS3: CSS3 fontes