Regla @font-face de CSS

Definición y uso

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

En la regla @font-face, debe 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 letras minúsculas. Las letras mayúsculas pueden producir resultados inesperados en IE!

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

div {
  font-family: myFirstFont;
}

Especifique una fuente llamada "myFirstFont" y defina la URL donde se puede encontrar:

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

Puede 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	Necesario. Define el nombre de la fuente.
src	URL	Necesario. Define la URL de descarga de la fuente.
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 configure un texto en un párrafo con la familia de fuentes "myFirstFont" que debe presentarse en negrita, el navegador lo usará.

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

Internet Explorer、Firefox、Opera、Chrome y Safari todos 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 和 IE: 字体格式仅在设置为 "installable" 时有效

* Firefox：默认情况下是禁用的，但可启用（需要将 flag 设置为 "true" 才能使用 WOFF2）。