Bagaimanakah Saya Boleh Sertakan Pelbagai Varian Fon (Tebal, Italic) Menggunakan @font-face CSS?

Termasuk Pelbagai Varian Fon dengan CSS @font-face

Peraturan CSS @font-face memberi kuasa kepada pembangun web untuk membenamkan fon tersuai ke dalam mereka reka bentuk. Walau bagaimanapun, ia boleh menjadi mencabar apabila berurusan dengan berbilang varian fon yang sama, seperti huruf tebal, condong dan condong tebal. Artikel ini membincangkan cara untuk menggabungkan variasi ini menggunakan peraturan @font-face.

Dalam peraturan @font-face, sifat src biasanya merujuk kepada satu fail fon. Walau bagaimanapun, dengan mencipta berbilang peraturan @font-face, pembangun boleh menentukan varian fon yang sama dengan nama fail masing-masing.

Sebagai contoh, pertimbangkan keluarga fon DejaVu Sans dengan fail berasingan untuk huruf tebal, condong dan tebal condong. Kod CSS berikut menunjukkan cara membenamkan varian ini menggunakan berbilang peraturan @font-face:

@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans.ttf");
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Bold.ttf");
    font-weight: bold;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Oblique.ttf");
    font-style: italic;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-BoldOblique.ttf");
    font-weight: bold;
    font-style: italic;
}

Dengan mencipta peraturan @font-face yang berasingan untuk setiap varian, penyemak imbas dimaklumkan tentang ketersediaan gaya fon yang berbeza dalam keluarga fon yang sama. Ia kemudiannya boleh memuatkan fail fon yang sesuai berdasarkan nilai berat fon dan gaya fon yang dinyatakan dalam pengisytiharan CSS.

Perlu diperhatikan bahawa sesetengah penyemak imbas mungkin tidak mengenali argumen format("ttf") dalam harta src. Sekiranya terdapat sebarang isu keserasian, adalah disyorkan untuk meninggalkan parameter ini.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Sertakan Pelbagai Varian Fon (Tebal, Italic) Menggunakan @font-face CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!