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

Mengimport Berbilang Berat Font dengan Pertanyaan @font-face Tunggal

Dalam CSS, peraturan @font-face digunakan untuk mengimport fon tersuai ke dalam halaman web. Walau bagaimanapun, mengimport fon dengan berbilang pemberat boleh memerlukan berbilang pertanyaan. Artikel ini meneroka kemungkinan mengimport berbilang pemberat fon dengan satu pertanyaan.

Masalah

Pertimbangkan fon Klavika, yang terdapat dalam 8 bentuk dan saiz yang berbeza:

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

Matlamatnya adalah untuk mengimport fon ini ke dalam CSS dengan satu pertanyaan @font-face, mentakrifkan berat dalam pertanyaan itu sendiri.

Penyelesaian

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

Untuk mencapai ini, rasa istimewa @font-face boleh digunakan:

@font-face {
  font-family: "DroidSerif";
  src: url("DroidSerif-Regular-webfont.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

Pendekatan ini mengaitkan gaya dan berat yang berbeza dengan fon berbeza menggunakan nama keluarga fon yang sama.

Penggunaan

Kini, anda boleh tentukan berat fon atau gaya fon untuk sebarang elemen tanpa menyatakan keluarga fon atau mengatasi tetapan sedia ada:

body { font-family:"DroidSerif", Georgia, serif; }

h1 { font-weight:bold; }

em { font-style:italic; }

strong em {
  font-weight:bold;
  font-style:italic;
}

Kesimpulan

Menggunakan teknik ini, adalah mungkin untuk mengimport berbilang pemberat fon dengan pertanyaan @font-face tunggal dalam CSS, memudahkan proses dan meningkatkan kecekapan kod.

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