Bagaimana Mengutamakan Fon Tempatan dalam Peraturan @font-face untuk Mengelakkan Muat Turun Yang Tidak Diperlukan?

Menggunakan @font-face: Keutamaan Font Setempat

@font-face ialah alat yang berkuasa untuk menyepadukan fon tersuai ke dalam halaman web. Walau bagaimanapun, ia boleh mengecewakan apabila penyemak imbas memuat turun fon walaupun ia telah dipasang pada sistem pengguna.

Memahami Isu

Apabila anda menentukan peraturan @font-face, anda menentukan berbilang fail sumber. Penyemak imbas biasanya akan memuat turun semua fail ini dan memasang fon. Secara lalai, fon yang dipasang secara setempat tidak diambil kira.

Penyelesaian: Mengutamakan Fail Setempat

Untuk mengelakkan muat turun yang tidak perlu, anda boleh mengutamakan fail setempat dalam peraturan @font-face anda. Berikut ialah sintaksnya:

<code class="css">@font-face {
  font-family: 'MyFont';
  src:
    local('MyFont'),
    url('MyFont.ttf');
}</code>

Dalam contoh ini, penyemak imbas akan terlebih dahulu menyemak sama ada fon bernama 'MyFont' dipasang secara setempat. Jika ya, versi tempatan akan digunakan. Jika tidak, penyemak imbas akan memuat turun dan memasang fon daripada URL yang ditentukan.

Pengesanan Fon Tempatan Terperinci

Kaedah yang diterangkan di atas ialah cara mudah untuk mengutamakan fail setempat. Walau bagaimanapun, dalam beberapa kes, penyemak imbas masih boleh memuat turun fon walaupun ia dipasang. Untuk menangani perkara ini, anda boleh menggunakan pendekatan yang lebih terperinci:

<code class="css">@font-face {
  font-family: 'Green Sans Web';
  src:
    local('Green Web'),
    local('GreenWeb-Regular'),
    url('GreenWeb.ttf');
}</code>

Peraturan ini mentakrifkan dua nama tempatan untuk fon: 'Green Web' dan 'GreenWeb-Regular'. Apabila menyelesaikan fon, penyemak imbas akan terlebih dahulu menyemak salah satu daripada nama tempatan ini. Jika padanan ditemui, fon tempatan akan digunakan. Jika tidak, penyemak imbas akan mengambil jalan keluar untuk memuat turun fon.

Dengan mengikuti teknik ini, anda boleh memastikan peraturan @font-face anda mengutamakan fon setempat, mengurangkan muat turun yang tidak perlu dan meningkatkan pengalaman pengguna.

Atas ialah kandungan terperinci Bagaimana Mengutamakan Fon Tempatan dalam Peraturan @font-face untuk Mengelakkan Muat Turun Yang Tidak Diperlukan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!