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

Membenamkan Berbilang Varian Fon dengan @font-face

Dalam CSS, peraturan @font-face membenarkan anda membenamkan fon tersuai ke dalam anda laman web. Walau bagaimanapun, bagaimana jika anda mempunyai berbilang variasi fon yang sama, seperti tebal, condong atau kedua-duanya? Bagaimanakah anda boleh memastikan bahawa penyemak imbas memuatkan dan menggunakan varian yang betul?

Penyelesaiannya adalah untuk mencipta berbilang peraturan @font-face, setiap satu menyatakan varian yang diingini. Contohnya, untuk membenamkan DejaVu Sans dalam variasi tebal dan condong:

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

Kod ini memastikan bahawa apabila anda menetapkan keluarga fon kepada "DejaVu Sans" dan menggunakan gaya tebal dan/atau italik, penyemak imbas akan memuatkan varian fon yang sesuai.

Perhatikan bahawa argumen format("ttf") adalah pilihan dan mungkin tidak diperlukan dalam semua pelayar. Juga, CSS3 memperkenalkan sintaks yang dipermudahkan untuk menentukan gaya fon. Daripada menggunakan berbilang peraturan @font-face, anda boleh menggunakan senarai dipisahkan koma bagi nilai berat fon dan gaya fon dalam satu peraturan:

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

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