Reglas CSS 3 @ font-face
Ejemplos
Especificar una fuente llamada "myFirstFont", y especificar dónde encontrar su dirección URL:
{
font-family: myFirstFont;
src: url ( 'Sansation_Light.ttf'),
url ( 'Sansation_Light.eot'); / * * IE9 /
}
Trate »
Soporte para el navegador
Internet Explorer 9, Firefox, Opera, Chrome y Safari apoyo @ font-face regla.
Sin embargo, Internet Explorer 9 admite sólo .eot tipos de fuentes, Firefox, Chrome, Safari, Opera y el apoyo .ttf y .otf dos tipos de fuentes.
Nota: Internet Explorer 8 y versiones anteriores de IE no son compatibles con la regla @ font-face.
Definiciones de atributos e instrucciones
@ Font-face regla, diseñadores de páginas web ya no tienen que utilizar fuentes "seguros para la Web" uno.
Nombre de la fuente, tipo de letra - reglas de la cara:
- font-family: myFirstFont;
ficheros contenidos en su servidor en algún lugar, CSS referencia:
- src: url ( 'Sansation_Light.ttf')
Si el archivo de fuentes está en una ubicación diferente, utilice la dirección URL completa:
- src: url ( "../../ www.w3cschool.css / CSS3 / Sansation_Light.ttf ')
Ya está listo para utilizar el tipo de letra, el siguiente es un ejemplo de cómo utilizar todo el elemento div:
{
font-family: myFirstFont;
}
sintaxis:
- @ Font-face
{
font-properties
}
Los siguientes ejemplos de las fuentes utilizadas en un div:
{
font-family: myFirstFont;
}
gramática
{
font-properties
}
| Descripción de la fuente | valor | explicación |
|---|---|---|
| font-family | nombre | Requerido. Definir el nombre de la fuente. |
| src | URL | Requerido. Definir la URL de descarga de fuentes (S) |
| font-stretch | normal condensado ultra-condensado extra-condensada semi-condensado expandido semi-expandido extra-expandida ultra-expandido | Opcional. Defina la forma de la letra debe ser estirada. El valor por defecto es "normal" |
| font-style | normal itálico oblicuo | Opcional. Definir el estilo de fuente debe ser igual. El valor por defecto es "normal" |
| font-weight | normal audaz 100 200 300 400 500 600 700 800 900 | Opcional. Un peso de fuente personalizado. El valor por defecto es "normal" |
| unicode-range | unicode-range | Opcional. El rango se define fuentes admiten caracteres Unicode. El valor por defecto es "U + FFFF 0-10" |
Artículos relacionados
CSS3 tutorial: CSS3 Fuentes