Regla CSS @font-face
Ejemplo
Especifique una fuente llamada "myFirstFont" y especifique la URL donde se puede encontrar:
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
Más ejemplos de "Pruébelo usted mismo" a continuación.
Definición y uso
Con la @font-faceregla, los diseñadores web ya no tienen que usar una de las fuentes "seguras para la web".
En la @font-faceregla, primero debe definir un nombre para la fuente (por ejemplo, myFirstFont) y luego apuntar al archivo de fuente.
Para usar la fuente para un elemento HTML, consulte el nombre de la fuente (myFirstFont) a través de la propiedad font-family:
div
{
font-family: myFirstFont;
}
Compatibilidad con navegador
La @font-faceregla es compatible con Edge, Chrome, Firefox, Safari y Opera.
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con el formato de fuente.
| Font format | |||||
|---|---|---|---|---|---|
| TTF/OTF | 9.0* | 4.0 | 3.5 | 3.1 | 10.0 |
| WOFF | 9.0 | 5.0 | 3.6 | 5.1 | 11.1 |
| WOFF2 | 14.0 | 36.0 | 39.0 | 10.0 | 26.0 |
| SVG | Not supported | Not supported | Not supported | 3.2 | Not supported |
| EOT | 6.0 | Not supported | Not supported | Not supported | Not supported |
*El formato de fuente solo funciona cuando se configura como "instalable".
Sintaxis
@font-face
{
font-properties
}
| Font descriptor | Values | Description |
|---|---|---|
| font-family | name | Required. Defines the name of the font. |
| src | URL | Required. Defines the URL(s) where the font should be downloaded from |
| font-stretch | normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded |
Optional. Defines how the font should be stretched. Default value is "normal" |
| font-style | normal italic oblique |
Optional. Defines how the font should be styled. Default value is "normal" |
| font-weight | normal bold 100 200 300 400 500 600 700 800 900 |
Optional. Defines the boldness of the font. Default value is "normal" |
| unicode-range | unicode-range | Optional. Defines the range of unicode characters the font supports. Default value is "U+0-10FFFF" |
Más ejemplos
Ejemplo
Debe agregar otra regla @font-face que contenga descriptores para texto en negrita:
@font-face {
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
El archivo "sansation_bold.woff" es otro archivo de fuente que contiene los caracteres en negrita para la fuente Sansation.
Los navegadores usarán esto siempre que un fragmento de texto con la familia de fuentes "myFirstFont" deba mostrarse en negrita.
De esta manera, puede tener muchas reglas @font-face para la misma fuente.
páginas relacionadas
Tutorial de CSS: Fuentes web CSS