Después de que vi un uso inapropiado de font-face en el código de mis colegas:
font-weight: normal;
font-family: BrutalType-Bold, sans-serif;
Me di cuenta de que algo andaba mal en el reino danés. Lo más probable es que un artículo no cubra todo, pero comencemos.
Digamos que va a conectar una fuente en 2021. Después de leer sobre lo mal que está todo (de hecho, no) con el servicio Google Fonts, decidimos conectarlo localmente. Compró (por supuesto) un paquete de fuentes, lo desempaquetó y vio lo siguiente:
, . , ( ). – @font-face.
CSS : (font-family), (, font-weight), (font-style), (, font-stretch), (font-variant) (, font-size).
: @font-face , , CSS .
, , : normal, italic oblique. italic oblique . , italic – , , ( ), oblique – , . .
, : normal italic. Italic It – "", italic (MyriadPro-BoldSemiCnIt.otf, MyriadPro-It.otf). Oblique Ob (Obl), - .
. CSS 100 900 : normal (400), bold (700). bolder lighter, @font-face !
: Light (100, MyriadPro-Light.otf), Book (300), Regular (400, MyriadPro-Regular.otf), Medium (500), Semibold (600), Bold (700, MyriadPro-Bold.otf), Black (Solid, 900, MyriadPro-BlackCond.otf). Black , . , .
– font-stretch, . -, . - : ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, expanded, extra-expanded, ultra-expanded ( ).
, : Cond, Cn – condensed (, MyriadPro-Cond.otf, MyriadPro-LightCond.otf), SemiCond, SemiCn – semi-condensed (, MyriadPro-SemiCn.otf), SemiExt – semi-extended (, MyriadPro-SemiExtIt.otf) .
font-variant, : normal small-caps ( ). , .
. (woff2 opentype/otf):
@font-face {
font-family: MyriadPro;
src: url(MyriadPro-Regular.woff2) format(woff2),
url(MyriadPro-Regular.otf) format(opentype);
font-weight: 400;
font-style: normal;
font-stretch: normal;
font-variant: normal;
}
- :
@font-face {
font-family: MyriadPro;
src: url(MyriadPro-BlackSemiExtIt.woff2) format(woff2),
url(MyriadPro-BlackSemiExtIt.otf) format(opentype);
font-weight: 900;
font-style: italic;
font-stretch: semi-extended;
font-variant: normal;
}
@font-face {
font-family: MyriadPro;
src: url(MyriadPro-BlackSemiCn.woff2) format(woff2),
url(MyriadPro-BlackSemiCn.otf) format(opentype);
font-weight: 900;
font-style: normal;
font-stretch: semi-condensed;
font-variant: normal;
}
, . ! , "MyBestSiteDuckingFontEver".
:
.ex-heart {
font-family: MyriadPro, sans-serif;
font-weight: 900;
font-stretch: semi-extended;
font-style: italic;
}
.ex-soul {
font-family: MyriadPro, sans-serif;
font-weight: 900;
font-stretch: semi-condensed;
font-style: normal;
}
MyriadPro-BlackSemiExtIt.woff2 ( otf, ), – MyriadPro-BlackSemiCn.woff2. , , MyriadPro-Regular.woff2. : , . Chrome.
Si no se encuentra el archivo Regular, entonces se usa la fuente sans-serif del sistema, vale la pena escribir un artículo separado sobre el orden de elección de las fuentes locales.
Espero haber podido explicar los conceptos básicos del trabajo con colecciones de fuentes y ya no escribirás código como mis colegas. Queda por explicarles esto.