CSS3 Font
Regras CSS3 @ font-face
As versões anteriores do CSS3, web designers tiveram que usar no computador do usuário já está instalado fontes.
Use CSS3, web designers podem usar qualquer fonte ele / ela gosta.
Quando você encontrar o arquivo que você deseja usar a fonte, o arquivo de fonte irá simplesmente ser incluído no site, ele será baixado automaticamente para as necessidades dos utilizadores.
Fonte de sua escolha na nova versão no CSS3 @ descrição da regra font-face.
Suas fontes "próprios" são definidos na regra font-face CSS3 @.
Suporte a navegadores
Números na tabela representam o primeiro navegador a suportar o número da versão da propriedade.
属性 | |||||
---|---|---|---|---|---|
@font-face | 4.0 | 9.0 | 3.5 | 3.2 | 10.0 |
Internet Explorer 9 +, Firefox, Chrome, Safari e Opera WOFF suporte (Web Open Font Format) fontes.
Firefox, Chrome, Safari e Opera .ttf suporte (fontes True Type) e .otf (OpenType) font tipo de fonte).
Chrome, Safari e Opera também oferece suporte a fontes SVG / entrou em colapso.
Internet Explorer também suporta fontes OpenType (EOT incorporado).
Nota: Internet Explorer 8 e versões anteriores não suportam a nova regra @ font-face.
Você precisa usar o tipo de letra
Na regra font-face nova @, você deve primeiro definir o nome da fonte (como myFirstFont), e, em seguida, apontar para o arquivo fonte.
Dica: URL utilizar fontes minúsculas, letras maiúsculas em IE irá produzir resultados inesperados |
Para usar a fonte para o elemento HTML, para referir-se o nome da fonte (myFirstFont) por font-family:
Exemplos
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div
{
font-family:myFirstFont;
}
</style>
tente »
Use texto em negrito
Você deve adicionar outra regra @ font-face que contém o texto em negrito:
Exemplos
{
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight:bold;
}
tente »
O arquivo "Sansation_Bold.ttf" é um outro arquivo de fonte que contém negrito Sansation.
Usando este texto navegador tempo para a família da fonte "myFirstFont" deve ser processado como negrito.
Então você pode ter muitos da mesma regra font-face de fonte @.
CSS3 descrição da fonte
A tabela a seguir lista todos a descrição da fonte e do interior da definição de regra @ font-face:
descritores | valor | descrição |
---|---|---|
font-family | nome | Necessário. Disposições do nome da fonte. |
src | URL | Necessário. arquivo de fonte URL definida. |
font-stretch |
| Opcional. Definir como desenhar a fonte. O padrão é "normal". |
font-style |
| Opcional. Define o estilo da fonte. O padrão é "normal". |
font-weight |
| Opcional. Um peso fonte personalizada. O padrão é "normal". |
unicode-range | unicode-range | Opcional. fonte personalizada intervalo de caracteres Unicode suporte. O padrão é "U + 0-10FFFF". |