Bolehkah Pertanyaan @font-face Tunggal Mengimport Berat Font Berbilang?

Mengoptimumkan Pengisytiharan Fon: Mengimport Berbilang Berat Font dengan Pertanyaan @font-face Tunggal

Dalam senario di mana keluarga fon terdiri daripada pelbagai variasi berat dan gaya, mengimport setiap variasi secara individu menggunakan pertanyaan @font-face yang berasingan boleh menjadi membosankan. Artikel ini meneroka kemungkinan untuk menyatukan pertanyaan ini menjadi satu pengisytiharan.

Cabaran: Mengimport Berbilang Berat Font

Pertimbangkan senario di mana fon Klavika tersedia dalam pelbagai berat dan saiz:

Klavika-Bold-Italic.otf
Klavika-Bold.otf
Klavika-Light-Italic.otf
Klavika-Light.otf
Klavika-Medium-Italic.otf
Klavika-Medium.otf
Klavika-Regular-Italic.otf
Klavika-Regular.otf

Tugasnya ialah mengimport variasi ini ke dalam CSS menggunakan pertanyaan @font-face tunggal yang mentakrifkan parameter berat. Ini menghapuskan keperluan untuk menyalin dan menampal pertanyaan beberapa kali.

Penyelesaian: Menggunakan Sintaks @font-face Dilanjutkan

Nasib baik, @font-face menawarkan lanjutan sintaks yang membolehkan penetapan nilai berat dan gaya yang berbeza kepada satu fon keluarga:

@font-face {
  font-family: 'Klavika';
  src: url(../fonts/Klavika-Regular.otf), weight: normal;
  src: url(../fonts/Klavika-Bold.otf), weight: bold;
}

Dalam contoh ini:

• fon-family: 'Klavika' mentakrifkan nama keluarga fon.
• src: url(..) , diikuti dengan berat yang sepadan, menentukan fail sumber untuk biasa dan tebal variasi.

Faedah Pertanyaan Fon Disatukan

Menyatukan pertanyaan fon memberikan beberapa faedah:

• Penduaan kod yang dikurangkan : Elakkan pertanyaan @font-face berulang untuk setiap berat variasi.
• Kebolehbacaan yang dipertingkatkan: Memastikan kod CSS teratur dan ringkas.
• Penyelenggaraan yang lebih mudah: Perubahan pada pemberat fon boleh dibuat dalam satu lokasi.

Tambahan Sumber

Untuk gambaran keseluruhan menyeluruh tentang ciri ini dan penggunaan standardnya, rujuk artikel berikut: [Sintaks @font-face lanjutan](https://developer.mozilla.org/en-US /docs/Web/CSS/@font-face.

Contoh Pen

Lihat demonstrasi langsung teknik ini dalam contoh pen berikut: [Berat Fon Berbilang dengan Pertanyaan @font-face Tunggal](https://codepen.io/anon/pen/abvaqP ).

Atas ialah kandungan terperinci Bolehkah Pertanyaan @font-face Tunggal Mengimport Berat Font Berbilang?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!