Setelah saya melihat penggunaan font-face yang tidak tepat di kode kolega saya:
font-weight: normal;
font-family: BrutalType-Bold, sans-serif;
Saya menyadari bahwa ada sesuatu yang salah di kerajaan Denmark. Kemungkinan besar, satu artikel tidak akan mencakup semuanya, tetapi mari kita mulai.
Katakanlah Anda akan menghubungkan font pada tahun 2021. Setelah membaca tentang seberapa buruk semuanya (pada kenyataannya, tidak) dengan layanan Google Fonts, kami memutuskan untuk menghubungkannya secara lokal. Membeli (tentu saja) paket font, membongkarnya dan melihat yang berikut ini:
, . , ( ). – @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.
Jika file Reguler tidak ditemukan, maka sistem font sans-serif digunakan, ada baiknya menulis artikel terpisah tentang urutan pemilihan font lokal.
Saya harap saya berhasil menjelaskan dasar-dasar bekerja dengan koleksi font dan Anda tidak akan lagi menulis kode seperti rekan saya. Tetap menjelaskan hal ini kepada mereka.