Regla @font-face de CSS

Definición y uso

Al usar la regla @font-face, los diseñadores web ya no necesitan usar una fuente "de seguridad".

En la regla @font-face, debes definir primero el nombre de la fuente (por ejemplo, myFirstFont) y luego apuntar al archivo de fuente.

Consejo:La URL de la fuente debe usar minúsculas. Las mayúsculas pueden producir resultados inesperados en IE!

Para usar la fuente en elementos HTML, referencia el nombre de la fuente a través de la propiedad font-family (myFirstFont):

div {
  font-family: myFirstFont;
}

Tutorial de CSS:Fuentes Web CSS

Especifica una fuente llamada "myFirstFont" y define la URL donde se puede encontrar:

@font-face {
  font-family: myFirstFont;
  src: url(sansation_light.woff);
}

Puedes encontrar más ejemplos de TIY en la parte inferior de la página.

@font-face {
  font-properties
}

Descriptor de fuente	Valor	Descripción
font-family	name	Obbligatorio. Definir el nombre de la fuente.
src	URL	Obbligatorio. Definir la URL de descarga de la fuente de letra.
font-stretch	normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded	Opcional. Define cómo se debe estirar la fuente. El valor predeterminado es "normal".
font-style	normal italic oblique	Opcional. Define el estilo de la fuente. El valor predeterminado es "normal".
font-weight	normal bold 100 200 300 400 500 600 700 800 900	Opcional. Define el espesor de la fuente. El valor predeterminado es "normal".
unicode-range	unicode-range	Opcional. Define el rango de caracteres Unicode que admite la fuente. El valor predeterminado es "U+0-10FFFF".

Debe agregar otra regla @font-face que contenga el descriptor del 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 caracteres en negrita de la fuente Sansation.

Cada vez que se establezca un texto que debe presentarse en negrita con la familia de fuentes "myFirstFont", el navegador lo usará.

De esta manera, puede establecer múltiples reglas @font-face para la misma fuente.

Internet Explorer, Firefox, Opera, Chrome y Safari admiten la regla @font-face.

Los números en la tabla indican la primera versión del navegador que admite completamente el formato de fuente.

* Edge y IE: el formato de fuente solo es válido cuando se establece en "installable".

* Firefox：por defecto está desactivado, pero se puede activar (es necesario establecer el flag como "true" para usar WOFF2).