Rumah > hujung hadapan web > tutorial css > Bagaimanakah Saya Boleh Sertakan Pelbagai Varian Fon (Tebal, Italic) Menggunakan @font-face CSS?

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

Patricia Arquette
Lepaskan: 2024-12-11 08:45:10
asal
398 orang telah melayarinya

How Can I Include Multiple Font Variants (Bold, Italic) Using CSS's @font-face?

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

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!

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