同僚のコードでfont-faceの不適切な使用を見た後：
font-weight: normal;
font-family: BrutalType-Bold, sans-serif;
デンマーク王国で何かがおかしいことに気づきました。ほとんどの場合、1つの記事ですべてを網羅することはできませんが、始めましょう。
2021年にフォントを接続するとします。Google Fontsサービスですべてがどれほど悪いか（実際はそうではない）について読んだ後、ローカルに接続することにしました。（もちろん）フォントパッケージを購入し、それを開梱して、次のことを確認しました。
, . , ( ). – @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.
通常のファイルが見つからない場合は、システムのサンセリフフォントが使用されます。ローカルフォントの選択順序については、別の記事を書く価値があります。
フォントコレクションの操作の基本をなんとか説明できれば、同僚のようにコードを書くことができなくなることを願っています。これを彼らに説明することは残っています。