Bagaimana Menggunakan Fon Tempatan dalam Pengisytiharan @font-face untuk Mengoptimumkan Prestasi Web?

@font-face: Menggunakan Font Setempat Tanpa Muat Turun Penyemak Imbas

Dalam usaha untuk mengoptimumkan prestasi web, penyemak imbas sering memuat turun fon yang ditentukan melalui @ pengisytiharan muka fon. Ini boleh menjadi berlebihan jika sistem pengguna sudah memiliki fon. Untuk mengelakkan ini, pertimbangkan untuk menggunakan kata kunci "tempatan" dalam pengisytiharan @font-face anda.

Menggunakan Kata Kunci "tempatan"

Kata kunci "tempatan" membolehkan anda untuk merujuk kepada fon dengan nama yang dipasang sistemnya. Untuk memanfaatkan ini, hanya nyatakan yang berikut:

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

Dengan meletakkan "tempatan" dahulu dalam senarai src, penyemak imbas akan cuba menggunakan versi DejaVu Serif yang dipasang secara setempat sebelum memuat turunnya.

Pengoptimuman Selanjutnya

Untuk pengoptimuman fon yang lebih menyeluruh, pertimbangkan langkah berikut:

• Tentukan berbilang format fon: Ini meningkatkan keserasian merentas pelbagai penyemak imbas.
• Gunakan perkhidmatan pengehosan fon: Perkhidmatan seperti Font Squirrel menyediakan fon web yang dioptimumkan dan mengurus caching untuk prestasi yang dipertingkatkan.
• Manfaatkan API CSSFontLoading: API ini membolehkan anda menyemak sama ada fon dimuatkan dan sedia untuk kegunaan, mengurangkan pemuatan fon yang tidak perlu.

Atas ialah kandungan terperinci Bagaimana Menggunakan Fon Tempatan dalam Pengisytiharan @font-face untuk Mengoptimumkan Prestasi Web?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!