Bagaimana cara menggunakan fail fon yang dipasang di laman web di laman web?

Sapukan fon dipasang tempatan di laman web

Dalam reka bentuk web, anda mungkin mahu menggunakan fon tertentu yang sudah dipasang dalam sistem, tetapi menggunakan nama fon secara langsung di CSS tidak berfungsi. Artikel ini akan menunjukkan cara memanggil fon yang dipasang secara tempatan dalam laman web.

Masalah: Fon tempatan tidak dapat dipaparkan di laman web

Katakan anda telah memasang font "Jingnan Mai Round" tetapi kod CSS:

 html, badan {
  saiz font: 18px;
  Font-Family: "Jingnan Mai Round Body", "Microsoft Yahei", "Helvetica Neue", Helvetica, Arial, Sans-Serif;
}

Masih memaparkan "Microsoft Yahei" dan bukannya "badan pusingan Jingnan Mai". Anda tidak mahu memuatkan fail fon melalui atribut src kerana fail fon adalah saiz yang besar.

Penyelesaian: Gunakan Peraturan @font-face

Kunci untuk menyelesaikan masalah ini ialah menggunakan peraturan @font-face , yang membolehkan anda menentukan fon tersuai dan memohonnya ke elemen halaman web. Oleh kerana anda ingin menggunakan fon yang dipasang secara tempatan, tidak perlu menentukan laluan src . Penyemak imbas secara automatik akan mencari dan menggunakan fon yang dipasang pada sistem.

Kod CSS yang betul adalah seperti berikut:

 @font-face {
  Font-Family: 'Jingnanmaiyuanti'; /* Tentukan nama fon, disarankan untuk menggunakan nama Inggeris*/
}

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

Kuncinya ialah:

1. Tentukan Nama Font: Tentukan nama font yang mudah dikenali (seperti nama Inggeris) dalam peraturan @font-face untuk mengelakkan isu keserasian yang mungkin timbul daripada nama Cina.
2. Gunakan Nama Font: Gunakan nama fon yang ditakrifkan dalam langkah 1 dalam harta font-family . Penyemak imbas akan memberi keutamaan kepada mencari fon yang sepadan dengan nama ini. Jika tidak dijumpai, fon alternatif digunakan pada gilirannya.

Selepas mengubah suai kod CSS, jika masih gagal untuk memaparkan, cuba menyegarkan cache penyemak imbas atau mulakan semula penyemak imbas. Pastikan sistem operasi anda dipasang dengan betul dan didayakan.

Atas ialah kandungan terperinci Bagaimana cara menggunakan fail fon yang dipasang di laman web di laman web?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!