Bagaimana untuk Membenamkan Pelbagai Variasi Fon menggunakan @font-face?

Cara Membenamkan Pelbagai Variasi Fon dengan @font-face

Apabila menggunakan @font-face untuk membenamkan fon tersuai, ia boleh membantu untuk menyokong pelbagai variasi, seperti tebal, condong dan gabungan kedua-duanya. Berikut ialah penjelasan terperinci tentang cara membenamkan berbilang fail fon untuk fon yang sama:

Mencipta Peraturan @font-face untuk Setiap Variasi

Untuk membenamkan variasi fon yang berbeza , buat peraturan @font-face yang berasingan untuk setiap variasi. Contohnya, untuk keluarga fon bernama "DejaVu Sans," anda akan membuat peraturan berikut:

@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, oblique;
}

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

Menetapkan Variasi Fon kepada Elemen HTML

Setelah @ peraturan muka fon ditakrifkan, anda boleh menetapkan variasi berbeza kepada elemen HTML menggunakan ciri berat fon dan gaya fon. Contohnya:

strong {
    font-family: "DejaVu Sans";
    font-weight: bold;
}

Ini akan menggunakan variasi tebal fon DejaVu Sans pada semua elemen kuat.

Nota:

• Adalah penting untuk mencipta peraturan @font-face yang berasingan untuk setiap variasi, kerana penyemak imbas tidak dapat memahami secara automatik hubungan antara fail.
• Argumen "format()" tidak disokong oleh semua penyemak imbas, jadi disyorkan untuk meninggalkannya.
• CSS3 hanya membenarkan nilai gaya fon tunggal, tidak seperti CSS2, yang menyokong senarai dipisahkan koma.

Atas ialah kandungan terperinci Bagaimana untuk Membenamkan Pelbagai Variasi Fon menggunakan @font-face?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!