Après avoir vu une utilisation inappropriée de font-face dans le code de mes collègues:
font-weight: normal;
font-family: BrutalType-Bold, sans-serif;
J'ai réalisé que quelque chose n'allait pas dans le royaume danois. Très probablement, un article ne couvrira pas tout, mais commençons simplement.
Disons que vous allez connecter une police en 2021. Après avoir lu à quel point tout est mauvais (en fait, pas) avec le service Google Fonts, nous avons décidé de le connecter localement. J'ai acheté (bien sûr) un package de polices, je l'ai déballé et vu ce qui suit:
, . , ( ). – @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 le fichier Regular n'est pas trouvé, alors la police système sans-serif est utilisée, il vaut la peine d'écrire un article séparé sur l'ordre de choix des polices locales.
J'espère avoir réussi à expliquer les bases du travail avec des collections de polices et que vous n'écrirez plus de code comme mes collègues. Il reste à leur expliquer cela.