Espero que leas ese título en voz alta en tu mejor momento Seinfeld impresión.
Una pregunta reciente en nuestros foros me hizo consciente de que hay más propiedades que se pueden agregar a @font-face de lo habitual font-family y src sospechosos. ¿Qué sentido tienen esos? ¿Por qué querría declarar otras declaraciones de fuentes allí?
Estoy acostumbrado a escribir @font-face esencialmente así:
@font-face {
font-family: "My Custom Font";
src: url("path/to-font-file.woff2");
}Pero la especificación sí incluye más descriptores:
@font-face {
font-family: <family-name>;
src: <url>;
unicode-range: <urange>;
font-variant: normal | [ <east-asian-variant-values> || <east-asian-width-values> || ruby ];
font-feature-settings: normal | <feature-tag-value>;
font-stretch: normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded;
font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
font-style: normal | italic | oblique;
}Verá esto mucho al mirar el código @ font-face generado por los servicios de fuentes.
¡Ellos son los porteros!
Esa es una analogía que puede usar para pensar en los bloques de declaración @ font-face. La fuente se descargará y se utilizará, si pasa los gatekeepers.
La familia de fuentes es la obvia. Está declarando una nueva familia de fuentes para usar, por lo que cualquier elemento que quiera usar esta fuente debe tener una coincidente.
@font-face {
/* Gatekeeper: font-family on another element must match this to be used. */
font-family: 'Open Sans';
src: url(my-font.woff2) format('woff2');
}
body {
/* Match! */
font-family: 'Open Sans';
}
h1, h2 {
/* No match */
font-family: 'Different Font';
}Son (en su mayoría) todos los guardianes
Con excepción de font-variant y font-feature-settings, todas las propiedades se pueden usar como filtros que indican al navegador que descargue y use los archivos de fuentes cuando los valores coincidan.
@font-face {
/* Only download and use if element matches this font-family */
font-family: 'My Font';
/* Only download and use if element matches this font-style */
font-style: italic;
/* Only download and use if element matches this font-weight */
font-weight: 700;
src: url(my-bold-and-italic-font.woff2) format('woff2');
/* Only download and use if these characters are used */
unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}Quizás una explicación del diagrama sea útil
Un diagrama que muestra HTML, los selectores de CSS que coinciden con ese HTML y los bloques de declinación @ font-face que se aplican finalmente.
Más lectura
- Usando @ font-face
- Módulo de fuentes CSS, nivel 3
- Referencia de MDN