Bagaimanakah Saya Boleh Melaksanakan Fon Tersuai pada Laman Web Saya Menggunakan CSS?

Melaksanakan Fon Tersuai pada Tapak Web

Apabila mereka bentuk tapak web, selalunya perlu memperkenalkan fon unik untuk meningkatkan daya tarikan visual dan membangkitkan emosi tertentu. Seseorang mungkin menghadapi kesukaran untuk memasukkan fon bukan standard ini ke dalam tapak web tanpa menggunakan imej, Flash atau elemen grafik lain.

Sebagai contoh, semasa penciptaan tapak web perkahwinan, fon tertentu dikehendaki tetapi tidak tersedia dengan mudah. pada pelayan. Ini menimbulkan persoalan tentang cara memasukkan fon ini dengan berkesan menggunakan CSS sambil mengelakkan penggunaan grafik.

Penyelesaian melalui CSS

Nasib baik, ini boleh dicapai melalui penggunaan CSS peraturan @font-face. Pertimbangkan contoh berikut:

@font-face {
    font-family: "My Custom Font";
    src: url(http://www.example.org/mycustomfont.ttf) format("truetype");
}

Kod ini mentakrifkan keluarga fon baharu bernama "Fon Tersuai Saya" dan memuatkannya daripada fail fon TrueType (.ttf) yang terletak di URL tertentu. Sifat fon-family digunakan untuk menentukan nama fon tersuai dan sifat src menentukan laluan ke fail fon.

Setelah fon ditakrifkan, ia boleh digunakan pada elemen tertentu menggunakan fon -harta keluarga dalam CSS. Contohnya:

p.customfont {
    font-family: "My Custom Font", Verdana, Tahoma;
}

Kod ini menentukan bahawa perenggan dengan kelas "fon tersuai" harus menggunakan keluarga fon "Fon Tersuai Saya" sebagai pilihan utama mereka. Jika "Fon Tersuai Saya" tidak tersedia, perenggan akan kembali kepada Verdana atau Tahoma.

Keserasian Penyemak Imbas

Perlu ambil perhatian bahawa keserasian penyemak imbas adalah penting apabila menggunakan fon tersuai. Peraturan @font-face disokong secara meluas oleh penyemak imbas moden, tetapi penyemak imbas lama mungkin tidak memaparkan fon tersuai dengan betul. Untuk memastikan keserasian, adalah disyorkan untuk menggunakan fon TrueType (TTF), Format Fon Terbuka Web (WOFF) atau Jenis Terbuka Terbenam (EOT).

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Melaksanakan Fon Tersuai pada Laman Web Saya Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!