Rumah > hujung hadapan web > tutorial css > Bagaimanakah Saya Boleh Membenamkan Berbilang Varian Fon (Tebal, Italic) dalam Peraturan @font-face Tunggal?

Bagaimanakah Saya Boleh Membenamkan Berbilang Varian Fon (Tebal, Italic) dalam Peraturan @font-face Tunggal?

Barbara Streisand
Lepaskan: 2024-12-10 05:03:13
asal
950 orang telah melayarinya

How Can I Embed Multiple Font Variants (Bold, Italic) in a Single @font-face Rule?

Berbilang Varian Fon dalam Satu Peraturan @font-face

Dalam CSS, peraturan @font-face membenarkan anda membenamkan fon tersuai ke dalam halaman web. Walau bagaimanapun, apabila bekerja dengan berbilang varian fon (cth., tebal, condong, condong tebal), mungkin tidak jelas cara untuk menentukannya dalam satu peraturan.

Untuk membenamkan berbilang fail fon untuk fon yang sama, anda boleh gunakan berbilang peraturan @font-face. Contohnya, jika anda mempunyai fail berasingan untuk DejaVu Sans bold, italic dan bold italic:

@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;
}
Salin selepas log masuk

Dalam contoh di atas, setiap peraturan @font-face menentukan varian fon yang berbeza. Apabila penyemak imbas web menemui pengisytiharan gaya fon (cth., berat fon: tebal), ia akan memuatkan fail fon yang sepadan dan menggunakan penggayaan yang sesuai.

Perhatikan bahawa Chrome tidak mengenali format("ttf ") hujah dalam contoh di atas, jadi ia boleh ditinggalkan. Selain itu, CSS3 hanya membenarkan satu pengisytiharan gaya fon bagi setiap peraturan @font-face, bukannya senarai yang dipisahkan koma seperti yang ditunjukkan dalam contoh.

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

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan