Regra CSS @font-face
Exemplo
Especifique uma fonte chamada "myFirstFont" e especifique a URL onde ela pode ser encontrada:
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
Mais exemplos de "Experimente você mesmo" abaixo.
Definição e uso
Com a @font-face
regra, os web designers não precisam mais usar uma das fontes "seguras para a web".
Na @font-face
regra, você deve primeiro definir um nome para a fonte (por exemplo, myFirstFont) e, em seguida, apontar para o arquivo de fonte.
Para usar a fonte para um elemento HTML, consulte o nome da fonte (myFirstFont) por meio da propriedade font-family:
div
{
font-family: myFirstFont;
}
Suporte ao navegador
A @font-face
regra é compatível com Edge, Chrome, Firefox, Safari e Opera.
Os números na tabela especificam a primeira versão do navegador que suporta totalmente o formato da fonte.
Font format | |||||
---|---|---|---|---|---|
TTF/OTF | 9.0* | 4.0 | 3.5 | 3.1 | 10.0 |
WOFF | 9.0 | 5.0 | 3.6 | 5.1 | 11.1 |
WOFF2 | 14.0 | 36.0 | 39.0 | 10.0 | 26.0 |
SVG | Not supported | Not supported | Not supported | 3.2 | Not supported |
EOT | 6.0 | Not supported | Not supported | Not supported | Not supported |
*O formato da fonte só funciona quando definido como "instalável".
Sintaxe
@font-face
{
font-properties
}
Font descriptor | Values | Description |
---|---|---|
font-family | name | Required. Defines the name of the font. |
src | URL | Required. Defines the URL(s) where the font should be downloaded from |
font-stretch | normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded |
Optional. Defines how the font should be stretched. Default value is "normal" |
font-style | normal italic oblique |
Optional. Defines how the font should be styled. Default value is "normal" |
font-weight | normal bold 100 200 300 400 500 600 700 800 900 |
Optional. Defines the boldness of the font. Default value is "normal" |
unicode-range | unicode-range | Optional. Defines the range of unicode characters the font supports. Default value is "U+0-10FFFF" |
Mais 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;
}
O arquivo "sansation_bold.woff" é outro arquivo de fonte, que contém os caracteres em negrito para a fonte Sansation.
Os navegadores usarão isso sempre que um pedaço de texto com a família de fontes "myFirstFont" for renderizado em negrito.
Dessa forma, você pode ter muitas regras @font-face para a mesma fonte.
Páginas relacionadas
Tutorial CSS: CSS Web Fonts