Cara Mengimport Fon dalam CSS: Panduan Komprehensif

Mengimport Fon dalam CSS: Panduan Komprehensif

Apabila bekerja dengan halaman web, menggabungkan fon tersuai boleh meningkatkan daya tarikan visual dan pengalaman pengguna dengan ketara . Walau bagaimanapun, bergantung pada fon yang mungkin tidak dipasang oleh pelanggan boleh menyebabkan masalah pemaparan. Artikel ini bertujuan untuk menangani kebimbangan ini dan menyediakan panduan langkah demi langkah tentang cara mengimport fon dalam CSS.

Pertimbangkan coretan kod berikut, yang cuba mengimport fon tersuai tetapi gagal memaparkannya dengan betul:

<code class="css">@font-face {
    font-family: EntezareZohoor2;
    src: url(Entezar2.ttf) format("truetype");
}

.EntezarFont {
    font-family: EntezareZohoor2, B Nazanin, Tahoma !important;
}</code>

Untuk berjaya mengimport fon dalam CSS, berikut ialah sintaks yang betul:

<code class="css">@font-face {
    font-family: 'EntezareZohoor2';
    src: url('fonts/EntezareZohoor2.eot'), url('fonts/EntezareZohoor2.ttf') format('truetype'), url('fonts/EntezareZohoor2.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}</code>

Setiap baris dalam coretan kod ini mempunyai tujuan tertentu:

• font-family: Menentukan nama fon untuk dirujuk dalam gaya CSS anda.

• src: Mentakrifkan lokasi fail dan format fon:

  • eot for Internet Explorer
  • ttf untuk Firefox, Safari, Opera dan Chrome
  • svg untuk Chrome dan Opera
• berat fon: Menentukan berat fon ( cth., biasa, tebal)
• gaya fon: Menentukan gaya fon (cth., biasa, condong)

Setelah anda mengimport fon dengan betul, anda boleh menggunakan fon -harta keluarga dalam gaya CSS anda untuk menerapkannya pada elemen teks. Contohnya:

<code class="css">#newfont {
    font-family: 'EntezareZohoor2';
}</code>

Dengan mengikut garis panduan ini, anda boleh menyepadukan fon tersuai dengan lancar ke dalam reka bentuk web anda dan memastikan pemaparan fon yang konsisten merentas penyemak imbas dan peranti yang berbeza.

Atas ialah kandungan terperinci Cara Mengimport Fon dalam CSS: Panduan Komprehensif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!