Bagaimana cara memaparkan 'badan bulat jingnan mai' yang dipasang dengan betul di laman web?

Integrasi Laman Web Font Tempatan: Selesaikan masalah paparan "Jingnan Mai Round"

Selepas berjaya memasang font sistem, bagaimana memanggilnya dengan betul di laman web? Artikel ini akan menyelesaikan cara menggunakan fon "Jingnan Mai Round" yang dipasang di laman web dan elakkan menggunakan atribut src untuk secara langsung memperkenalkan fail fon (kerana fail lebih besar).

Berikut adalah coretan kod CSS biasa yang cuba menggunakan fon tempatan:

 /* @font-face {
    font-family: 'myfont';
    src: url ('/style1/font/jingnanmai body.otf') format ('trueType');
} */
html, badan {
    saiz font: 18px;
    Font-Family: "Jingnan Mai Round Body", "Microsoft Yahei", "Helvetica Neue", Helvetica, Arial, Sans-Serif;
}

Walaupun "Jingnan Mai Round" diletakkan di bahagian atas senarai fon, laman web masih memaparkan "Microsoft Yahei". Masalahnya adalah bahawa penyemak imbas tidak dapat mengiktiraf laluan fail fon secara langsung yang dipasang secara tempatan.

Penyelesaian:

Kita perlu membetulkan kod CSS dan menentukan dengan betul dan menggunakan fon tersuai.

1. Menentukan fon ( @font-face): Walaupun kami tidak menggunakan src untuk memperkenalkan fail fon secara langsung, kami masih memerlukan peraturan @font-face untuk memberitahu penyemak imbas nama fon. Kuncinya ialah kita tidak perlu menentukan laluan fail fon , dan penyemak imbas secara automatik akan melihat dari perpustakaan font sistem.

    @font-face {
       Font-Family: 'Jingnanmaiyuanti'; /* Gunakan nama font bersih*/
   }

2. Sapukan font: Dalam harta font-family , gunakan nama fon yang ditakrifkan dalam langkah 1.

    html, badan {
       saiz font: 18px;
       Font-Family: 'Jingnanmaiyuanti', "Microsoft Yahei", "Helvetica Neue", Helvetica, Arial, Sans-Serif;
   }

Melalui pengubahsuaian di atas, penyemak imbas akan memberi keutamaan untuk menggunakan fon sistem yang dipanggil "Jingnanmaiyuanti". Jika fon dipasang pada sistem, laman web akan dipaparkan dengan betul. Jika tidak dipasang, fon alternatif digunakan pada gilirannya.

Cadangan Tambahan:

• Nama Font: Gunakan nama fon yang lebih mudah dan mudah diingat, seperti JingNanMaiYuanTi , elakkan menggunakan nama yang mengandungi ruang atau watak khas.
• Cache Pelayar: Selepas mengubah CSS, jelaskan cache penyemak imbas atau mulakan semula penyemak imbas untuk memastikan penyemak imbas memuat peraturan CSS terkini.

Dengan pelarasan ini, anda harus berjaya memaparkan fon "Jingnan Mai Round" di laman web, sambil mengelakkan isu kelajuan memuatkan yang disebabkan oleh pengenalan langsung fail fon.

Atas ialah kandungan terperinci Bagaimana cara memaparkan 'badan bulat jingnan mai' yang dipasang dengan betul di laman web?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!