CSS Reference Manual

CSS @rules(RULES)

CSS Attributes大全

CSS @font-regra face

@font-A regra face é usada para associar nomes de fontes que serão usados na tabela de estilo com certas fontes baixáveis, @font-face CSS at-A regra rule especifica uma fonte personalizada para exibir o texto.

　No uso da regra de sistema de fontesfont-familyusando os descritores para nomear a fonte e o descritor src associado ao nome da fonte externa.

uso da sintaxe

A sintaxe da regra é a seguinte:

@font-face: font-description

a @font-A regra face contém uma ou mais declarações de propriedades, como aquelas no CSS convencional, isso é conhecido como descrição da fonte. Você pode especificar no máximo24propriedades diferentes, mas todas as explicações delas estão além do escopo deste referencial-Para obter mais informações, acesseW3Módulo de Fonte CSSpágina.

@font-A forma geral da regra face é:

@font-face { font-family: fontname; src: url(fontfile path); }

Mais tarde, a fonte pode ser usada como atributo (comofont-familye) nomefontMas, se não suportar fontes descargas ou por algum motivo não puder carregar fontes, deve-se especificar outros nomes de fontes como alternativas.

O exemplo a seguir demonstra como usar @font-propriedade face.

Exemplo

　　@font-face {
　　　font-family: "OpenSans";
　　　src: url("../fonts/OpenSans-Regular.eot");
　　　src: url("../fonts/OpenSans-Regular.ttf") format("truetype");
　　}
　　body {
　　　font-family: "OpenSans", Arial, sans-serif;
　　　font-size:　1.2em;
　　}

Teste e veja‹/›

Atenção:Ao usar @ font-regras face, você não precisa depender do número limitado de fontes instaladas no computador do usuário.

Ao definir as regras correspondentes, quando são definidas características específicas de fontes, como negrito ou itálico, também pode ser definida a seleção de fontes descargáveis específicas @font-face。

Exemplo

　　@font-face {
	font-family: "OpenSans";
　　　src: url("../fonts/OpenSans-Regular.eot");
　　　src: url("../fonts/OpenSans-Regular.ttf") format("truetype");
　　}
　　@font-face {
　　　font-family: "OpenSansBold";
　　　src: url("../fonts/OpenSans-Bold.eot");
	src: url("../fonts/OpenSans-Bold.ttf") format("truetype");
　　}
　　h1　{
　　　font-family: "OpenSansBold", Arial, sans-serif;　/*　Especificar a fonte grossa OpenSans　*/
　　}
　　p {
　　　font-family: "OpenSans", Arial, sans-serif;
　　}

Teste e veja‹/›

Parâmetro

O significado dos parâmetros é o seguinte:

Parâmetro	Valor	Descrição
Obrigatório -Os seguintes parâmetros são obrigatórios.
font-family	font-family	Defina o que será usadofont-familyNome da fonte do valor da propriedade da fonte.
src	src	Especifique o local do arquivo de fonte a ser usado.
Opcional -Os seguintes parâmetros são opcionais.
font-style	font-style	Valores válidosfont-styleValores válidos
font-weight	font-weight	Valores válidosfont-weightValores de propriedade (valores relativos bolder e lighter).

Compatibilidade do navegador

@font-A compatibilidade do atributo face do navegador, os números na tabela a seguir representam a versão mínima do navegador que suporta essa propriedade; todos os navegadores populares suportam essa regra.

	Firefox 3.5+ Google Chrome 4+ Internet Explorer 4+ Apple Safari 3.1+ Opera 10+

Atenção:No navegador, há grandes diferenças de suporte entre as tecnologias de fontes específicas. O Internet Explorer suporta os tipos de fontes .eot e .wof, enquanto o Firefox, Chrome, Safari e Opera suportam os tipos de fontes .woff, .ttf e .otf.