Fonte Web do CSS
- Página anterior Efeito de Texto do CSS
- Próxima página Transformações 2D CSS
Regra @font-face do CSS
Fontes da web permitem que os designers de web usem fontes que não estão instaladas no computador do usuário.
Quando você encontrar/comprar a fonte que deseja usar, basta incluir o arquivo de fonte no seu servidor da web. Ele será automaticamente baixado para o usuário conforme necessário.
Sua 'própria' fonte no CSS @font-face são definidos em regras.
Diferentes formatos de fontes
Fonte TrueType (TTF)
O TrueType é um padrão de fonte desenvolvido pela Apple e pela Microsoft no final da década de 1980. O TrueType é o formato de fonte mais comum nos sistemas operacionais Mac OS e Microsoft Windows.
Fonte OpenType (OTF)
O OpenType é um formato de fonte computacional escalável. Baseado no TrueType, ele é uma marca registrada da Microsoft. Hoje, fontes OpenType são amplamente utilizadas em principais plataformas de computador.
Formato de Fonte Aberta da Web (WOFF)
O WOFF é um formato de fonte para a web. Desenvolvido em 2009, ele se tornou um padrão recomendado pelo W3C. O WOFF é essencialmente um OpenType ou TrueType com compressão e outros metadados. O objetivo é suportar a distribuição de fontes de servidor para cliente em redes com limitações de largura de banda.
Formato de Fonte Aberta da Web (WOFF 2.0)
O formato TrueType/OpenType oferece melhor compressão do que o WOFF 1.0.
Fonte/shape SVG
As fontes SVG permitem usar SVG como pincel ao exibir texto. A especificação SVG 1.1 define um módulo de fonte que permite criar fontes em documentos SVG. Você também pode aplicar CSS a documentos SVG, e a regra @font-face pode ser aplicada ao texto em documentos SVG.
Fonte OpenType embutida (EOT)
O EOT da fonte é a forma compacta do OpenType da Microsoft, usada como fonte embutida na web.
suporte do navegador ao formato da fonte
Os números na tabela indicam a primeira versão do navegador que suporta completamente o formato da fonte.
| formato da fonte | |||||
| 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 | não suportado | não suportado | não suportado | 3.2 | não suportado |
| EOT | 6.0 | não suportado | não suportado | não suportado | não suportado |
*IE:Este formato de fonte é válido apenas quando definido como "installable".
*Firefox:Padrão não suportado, mas pode ser ativado (é necessário definir o sinal como "true" para usar WOFF2).
Use a fonte que você precisar
Dentro da regra @font-face: primeiramente defina o nome da fonte (por exemplo, myFirstFont) e então aponte para o arquivo da fonte.
dica:O URL da fonte sempre deve ser em minúsculas. Letras maiúsculas podem causar resultados inesperados no IE.
Para usar a fonte em elementos HTML, cite o nome da fonte (myFirstFont) através da propriedade font-family:
exemplo
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div {
font-family: myFirstFont;
}
Use texto em negrito
Você deve adicionar outra regra @font-face que contenha os descriptores do texto em negrito:
exemplo
@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 da fonte Sansation.
Cada vez que um texto com a família de fontes "myFirstFont" deve ser apresentado em negrito, o navegador usará ele.
Dessa forma, você pode definir muitos @font-face regras.
descrição de fontes CSS
A tabela a seguir lista os que podem ser @font-face Todos os descriptores de fonte definidos dentro da regra (font descriptor):
| descrição | valor | descrição |
|---|---|---|
| font-family | name | necessário. Define o nome da fonte. |
| src | URL | necessário. Define o URL do arquivo de fonte da letra. |
| font-stretch |
|
Opcional. Define como a fonte deve ser esticada. O valor padrão é "normal". |
| font-style |
|
Opcional. Define o estilo da fonte. O valor padrão é "normal". |
| font-weight |
|
Opcional. Define a grossura da fonte. O valor padrão é "normal". |
| unicode-range | unicode-range | Opcional. Define o intervalo de caracteres UNICODE suportados pela fonte. O valor padrão é "U+0-10FFFF". |
- Página anterior Efeito de Texto do CSS
- Próxima página Transformações 2D CSS
