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.

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

<style>
@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-face
{
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: