Bagaimanakah Saya Boleh Mengelak Muat Turun Fon yang Tidak Diperlukan dengan @font-face untuk Fon yang Dipasang Setempat?

@font-face src: local - Mengelakkan Muat Turun Fon Tidak Diperlukan untuk Fon yang Dipasang

@font-face membolehkan anda menentukan fon tersuai dalam CSS anda. Walau bagaimanapun, ia kadangkala boleh membawa kepada muat turun fon yang tidak perlu apabila pengguna sudah memasang fon secara setempat. Ini boleh menjadi isu prestasi, terutamanya untuk penyemak imbas yang memuat turun fon bagi setiap contoh pengisytiharan @font-face.

Untuk mengurangkan masalah ini, kata kunci "tempatan" boleh digunakan dalam peraturan @font-face untuk mengarahkan penyemak imbas menyemak fon tempatan sebelum cuba memuat turunnya. Coretan kod berikut menunjukkan cara menggunakan kata kunci "tempatan":

<code class="css">@font-face {
  font-family: 'DejaVu Serif';
  src: local('DejaVu Serif'),
       url('DejaVuSerif-webfont.woff') format('woff'),
       url('DejaVuSerif-webfont.ttf') format('truetype'),
       url('DejaVuSerif-webfont.svg#webfontCFu7RF0I') format('svg');
  font-weight: normal;
  font-style: normal;
}</code>

Dengan meletakkan kata kunci "tempatan" sebelum mana-mana sumber berasaskan URL, penyemak imbas akan cuba menggunakan fon DejaVu Serif yang dipasang secara setempat terlebih dahulu . Jika fon setempat tidak tersedia, penyemak imbas kemudiannya akan memuat turun fon daripada sumber URL yang disediakan.

Pendekatan ini memastikan penyemak imbas memuat turun fon hanya apabila perlu, meningkatkan prestasi keseluruhan tapak web untuk pengguna yang sudah memasang fon.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengelak Muat Turun Fon yang Tidak Diperlukan dengan @font-face untuk Fon yang Dipasang Setempat?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!