O melhor tutorial Regras CSS3 @ font-face em 2024. Neste tutorial você pode aprender Exemplos,Suporte a navegadores,Atributo definições e instruções,sintaxe:,gramática,artigos relacionados,

Regras CSS3 @ font-face

Exemplos

Especifique uma fonte chamada "myFirstFont", e especificar onde encontrar a sua URL:

@ Font-face
{
font-family: myFirstFont;
src: url ( 'Sansation_Light.ttf'),
url ( 'Sansation_Light.eot'); / * IE9 * /
}

tente »

Suporte a navegadores

Internet ExplorerFirefoxOperaGoogle ChromeSafari

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 ( "pt/pt/ 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:

div
{
font-family: myFirstFont;
}

sintaxe:

    @ Font-face
    {
    font-properties
    }

Os seguintes exemplos de fontes usadas em uma div:

div
{
font-family: myFirstFont;
}


gramática

@ Font-face
{
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

Regras CSS3 @ font-face
10/30