Bagaimanakah Saya Boleh Mengesan Fon Aktif Digunakan dalam Halaman Web?

Mengesan Fon Aktif dalam Halaman Web

Apabila mereka bentuk halaman web dengan pelbagai fon, ia menjadi penting untuk memastikan fon yang diingini adalah dipaparkan pada pelayar pengguna. Ini boleh menjadi satu cabaran apabila berbilang fon ditakrifkan dalam CSS.

Satu pendekatan untuk menangani isu ini adalah untuk menentukan yang mana fon yang ditentukan sebenarnya sedang digunakan. Dengan mengenal pasti fon aktif, anda boleh mengambil tindakan yang sesuai, seperti memaparkan pautan muat turun untuk fon yang tidak dipasang pada sistem pengguna.

Teknik Pengesanan Fon

Teknik biasa yang digunakan untuk pengesanan fon melibatkan pengukuran lebar teks yang diberikan menggunakan fon tertentu. Jika lebar yang diukur sepadan dengan lebar yang dijangkakan untuk fon yang dikehendaki, ini menunjukkan bahawa fon sasaran terdapat pada peranti pengguna. Walau bagaimanapun, kaedah ini kurang dipercayai untuk fon monospace.

Contoh Pelaksanaan

Coretan kod berikut menggambarkan cara teknik ini boleh dilaksanakan:

<div>
<pre class="brush:php;toolbar:false">// Get the element's width with the desired font
var desiredWidth = document.getElementById("font-detector").offsetWidth;

// Set the element to use a fallback font
document.getElementById("font-detector").style.fontFamily = "monospace";

// Measure the width again using the fallback font
var fallbackWidth = document.getElementById("font-detector").offsetWidth;

// Check if the desired font is installed
if (desiredWidth === fallbackWidth) {
  // The desired font is not installed
} else {
  // The desired font is installed
}

Kebaikan dan Had

Teknik pengesanan fon ini agak mudah untuk dilaksanakan dan boleh digunakan untuk melaraskan gelagat halaman secara dinamik berdasarkan ketersediaan fon tertentu. Walau bagaimanapun, ia mungkin tidak mudah dan boleh dipengaruhi oleh faktor seperti tetapan penyemak imbas atau sambungan yang dipasang pengguna yang mengubah suai pemaparan fon.