Ejemplo
Especificar una fuente llamada "myFirstFont" , y especificar la URL donde se puede encontrar:
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
} Inténtalo tú mismo " Más "Try it Yourself" ejemplos a continuación.
Definición y Uso
Con la regla @ font-face, diseñadores de páginas web no ya no tienen que utilizar uno de los "web-safe" fuentes.
En la nueva regla @ font-face primero debe definir un nombre para el tipo de letra (eg myFirstFont) , a continuación, seleccione el archivo de fuente.
Consejo: Utilice letras minúsculas para la dirección URL de la fuente. Las letras mayúsculas se pueden producir resultados inesperados en IE!
Para utilizar la fuente para un elemento HTML, mencione el nombre de la fuente (myFirstFont) a través de la propiedad font-family:
div
{
font-family: myFirstFont;
}Soporte para el navegador
La regla @ font-face es compatible con Internet Explorer, Firefox, Opera, Chrome y Safari.
Los números de la tabla especifica la primera versión del navegador que es totalmente compatible con el formato de fuente.
| formato de fuente | |||||
|---|---|---|---|---|---|
| TTF / OTF | 4.0 | 9,0 * | 3.5 | 3.1 | 10.0 |
| WOFF | 5.0 | 9.0 | 3.6 | 5.1 | 11.1 |
| WOFF2 | 36.0 | No soportado | 35.0 * | No soportado | 26.0 |
| SVG | 4.0 | No soportado | No soportado | 3.2 | 9.0 |
| EOT | No soportado | 6.0 | No soportado | No soportado | No soportado |
* Edge y el IE: El formato de fuente sólo funciona cuando está ajustado para ser "installable" .
* Firefox: desactivado por defecto, pero se puede habilitar (necesidad de establecer un indicador de "true" para utilizar WOFF2).
Sintaxis
@font-face
{
font-properties
}| descriptor de la fuente | Valores | Descripción |
|---|---|---|
| Familia tipográfica | name | Necesario. Define el nombre de la fuente. |
| src | URL | Necesario. Define la URL(s) en que la fuente debe ser descargado desde |
| font-stretch | normal condensado ultra-condensado extra-condensada semi-condensado expandido semi-expandido extra-expandida ultra-expandido | Opcional. Define la forma en la fuente debe ser estirado. El valor por defecto es "normal" |
| Estilo de fuente | normal itálico oblicuo | Opcional. Define la forma en la fuente debe ser de estilo. El valor por defecto es "normal" |
| font-weight | normal negrita 100 200 300 400 500 600 700 800 900 | Opcional. Define la constancia de la fuente. El valor por defecto es "normal" |
| unicode-range | unicode-range | Opcional. Define el rango de caracteres Unicode compatible con la fuente. El valor por defecto es "U+0-10FFFF" |
Inténtelo usted mismo - Ejemplos
Ejemplo
Debe añadir otra regla @ font-face que contiene descriptores para el texto en negrita:
@font-face {
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
Inténtalo tú mismo " El archivo "sansation_bold.woff" es otro archivo de fuente, que contiene los caracteres en negrita para la fuente Sansation.
Los navegadores utilizar este cada vez que un trozo de texto con la fuente-familia "myFirstFont" Se debería mostrar en negrita.
De esta manera usted puede tener muchas reglas @ font-face para la misma fuente.
Páginas relacionadas
CSS3 tutorial: CSS3 Fuentes