Fon yang telah dimuat turun mungkin tidak digunakan kerana CSS memilih muka fon lain, teks berada di luar julat aksaranya, atau tempoh paparannya telah berlalu. Pada Mac, mulakan dengan memeriksa fon yang benar-benar memaparkan satu label, kemudian jejaki semula proses pemilihan dan pemuatan.

Panduan ini untuk seseorang yang menyelenggara halaman web dan dapat melihat permintaan fon berjaya tetapi masih melihat teks sandaran. Gunakan Chrome pada macOS untuk langkah pemeriksaan. Label rekaan Panel 204 dan nama keluarga fon Sample Sans di bawah menggambarkan diagnosis ini; kedua-duanya tidak merujuk kepada mana-mana laman web tertentu.

Apakah yang sebenarnya dibuktikan oleh muat turun yang berjaya?

Anggap diagnosis ini sebagai empat soalan berasingan: Adakah sumber telah diambil? Adakah muka fon yang boleh digunakan telah didaftarkan? Adakah CSS memilih muka fon itu untuk aksara ini? Adakah pemapar melukisnya? Pramuat fon memulakan pengambilan lebih awal; kehadirannya tidak membuktikan fon yang membekalkan teks yang kelihatan. MDN: rel="preload"

Pemadanan fon beroperasi pada teks, bukan sekadar fail yang dimuat turun. Penyemak imbas mempertimbangkan keluarga dan sifat fon yang diminta, kemudian memeriksa sokongan aksara. Oleh itu, satu label boleh menggunakan beberapa fon, dan bahagian lain pada halaman boleh menyebabkan fon dimuat turun tanpa banyak memberitahu anda tentang label sasaran. W3C: CSS Fonts Module Level 4, pemadanan fon

Gunakan jadual keputusan ini untuk memilih pemeriksaan seterusnya. Jadual ini ialah bantuan diagnostik yang berasaskan sempadan pemuatan dan pemadanan yang didokumenkan, bukannya rekod hasil pelayar yang diukur.

Pemerhatian Pemeriksaan seterusnya Perkara yang dibantu untuk dibezakan
Keluarga yang dikira berbeza daripada keluarga yang dimaksudkan Jejaki deklarasi CSS yang menang Masalah lata atau sasaran
Keluarga yang dikira betul, fon yang dipaparkan berbeza Periksa deskriptor muka fon dan liputan aksara Masalah pemilihan atau fon sandaran
JavaScript melaporkan muka fon telah dimuatkan, tetapi muka itu tiada dalam set fon dokumen Periksa kod pendaftaran Pemuatan tanpa pendaftaran
Fon muncul selepas muat semula tetapi tidak pada lawatan pertama Periksa font-display dan masa pemuatan Tingkah laku tempoh paparan
Teks biasa berfungsi, teks kanvas tidak berubah Periksa susunan lukisan dan tetapan fon kanvas Operasi lukisan berasingan

Fon apakah yang sebenarnya memaparkan label sasaran?

Pada halaman yang terjejas, tekan Command + Shift + C dan pilih teks tersebut. Dalam Elements, pilih elemen terkecil yang mengandungi label yang terjejas. Buka Computed, kemudian tatal ke Rendered Fonts. Chrome mendokumenkan paparan ini sebagai tempat untuk memeriksa fon yang membekalkan teks yang dipaparkan. Chrome DevTools: Rujukan ciri CSS, Chrome DevTools: Gunakan kesan lain

Catat muka fon yang dipaparkan dan sama ada sumbernya setempat atau sumber rangkaian. Catat juga font-family, font-weight, dan font-style yang dikira. Keluarga yang dikira ialah tindanan yang diminta; hasil fon yang dipaparkan mengenal pasti fon yang membekalkan glif. Rupa yang biasa sahaja merupakan bukti yang lemah kerana dua muka fon boleh kelihatan serupa. Chrome DevTools: Fon apakah itu?

Jika muka fon yang dimaksudkan muncul untuk teks yang terjejas, teruskan menyiasat perbezaan rupa tertentu—seperti ketebalan atau ciri fon. Jika tiada, teruskan di bawah. Kekalkan teks dan ruang pandang asal semasa menguji supaya setiap pemerhatian boleh dibandingkan.

Adakah CSS berkesan meminta muka fon yang dimaksudkan?

Dalam Computed, periksa sifat fon yang berkesan, kemudian gunakan Styles untuk mencari deklarasinya. Chrome membezakan paparan ini: Styles menyertakan deklarasi yang ditindih, manakala Computed menunjukkan nilai yang benar-benar digunakan. Periksa anak yang mengandungi teks apabila kad mempunyai beberapa label; deklarasi fon induk bukan bukti yang mencukupi untuk anak itu. Chrome DevTools: Rujukan ciri CSS

Periksa sebarang ringkasan font yang menang serta sifat individu. Contohnya, font: 16px sans-serif memilih keluarga generik dan menetapkan semula komponen ringkasan yang tidak dinyatakan, termasuk ketebalan dan gaya. Ia juga menetapkan semula sifat seperti font-feature-settings dan font-variation-settings. Betulkan deklarasi yang menyebabkan nilai tidak dijangka itu, kemudian periksa semula. MDN: font

Seterusnya, bandingkan keluarga yang diminta dengan deskriptor font-family dalam peraturan @font-face yang berkaitan. Deskriptor itu mentakrifkan nama keluarga CSS yang digunakan untuk merujuk muka fon; nama fail bukan nama yang perlu anda letakkan dalam tindanan fon elemen. Periksa peraturan yang dihantar kepada penyemak imbas, termasuk src, ketebalan, gaya dan sebarang julat yang diisytiharkan. MDN: @font-face

Julat ketebalan yang disokong fon boleh ubah boleh dinyatakan dengan dua nilai, manakala muka fon statik boleh mengisytiharkan satu ketebalan. Pastikan deskriptor menggambarkan sumber yang dibekalkan dengan tepat. Ketidakpadanan wajar disiasat, tetapi ia tidak semestinya menjelaskan penggunaan fon sandaran: pemadanan fon merangkumi pilihan lain apabila gaya yang tepat tidak tersedia. MDN: @font-face, W3C: Pemadanan gaya fon

Mungkinkah fon setempat mendapat keutamaan?

Periksa src untuk pilihan local(). Pada Mac yang memasang fon itu, penyemak imbas mungkin menggunakan salinan setempat sementara webfont yang dipramuat secara berasingan tidak digunakan. Untuk mengasingkan keadaan ini dalam Chrome, buka panel Rendering, aktifkan Disable local fonts, dan muat semula. Bandingkan Rendered Fonts sebelum dan selepas, kemudian pulihkan tetapan itu. Ujian ini menyasarkan sumber local() dalam peraturan @font-face. Chrome DevTools: Gunakan kesan lain

Adakah muka fon dimuatkan dan didaftarkan dalam dokumen yang betul?

Muka fon yang dicipta dengan new FontFace() boleh selesai dimuatkan sebelum ditambahkan pada set fon. Untuk pemaparan dokumen, muka fon itu mesti ditambahkan pada document.fonts. Periksa kedua-dua operasi dalam laluan pemuatan aplikasi; penyelesaian janji pemuatan muka fon sahaja tidak melengkapkan pendaftaran. MDN: CSS Font Loading API

Diagnostik konsol lengkap berikut menyenaraikan muka fon yang didaftarkan dalam dokumen semasa. Jalankannya dalam konteks konsol halaman yang terjejas. Kod ini membaca set tanpa memulakan pemuatan atau mengubah gaya; ia tidak mengenal pasti glif yang dipaparkan. Tingkah lakunya yang bergantung pada penyemak imbas belum dilaksanakan di sini.

(() => {
  const faces = Array.from(document.fonts, face => ({
    family: face.family,
    weight: face.weight,
    style: face.style,
    stretch: face.stretch,
    unicodeRange: face.unicodeRange,
    status: face.status
  }));

  console.table(faces);
  console.log("Registered face count:", faces.length);
})();

Gunakan inventori ini untuk membezakan pendaftaran yang tiada daripada muka fon berdaftar yang masih tidak digunakan. Bagi entri yang statusnya error, siasat kegagalan pemuatan sebelum melaraskan tipografi. Entri loaded mengesahkan keadaan pemuatan, sementara pemilihan muka fon masih bergantung pada elemen dan teks. MDN: CSS Font Loading API

Jangan anggap document.fonts.check() sebagai bukti pemaparan. Ia boleh mengembalikan true walaupun untuk keluarga yang tidak wujud. Argumen teks pilihannya mengecilkan pemadanan berdasarkan julat Unicode yang diisytiharkan dan tidak menguji liputan glif individu. Begitu juga, document.fonts.ready selesai selepas pemuatan dan susun atur bagi fon yang digunakan; ia tidak mengesahkan bahawa setiap muka fon yang diisytiharkan telah dipaparkan. MDN: FontFaceSet.check(), MDN: Document.fonts

Adakah fon itu meliputi aksara yang anda uji?

Periksa kedua-dua unicode-range CSS dan sumber fon sebenar. Deskriptor itu mengawal aksara yang boleh menggunakan sesuatu muka fon. Meluaskan deskriptor tidak dapat menghasilkan glif yang tiada dalam fail: peta aksara fon kekal sebagai sebahagian daripada pemadanan. MDN: unicode-range, W3C: Pemadanan gaya fon

Pertimbangkan peraturan ilustrasi yang terhad kepada U+0030-0039. Dalam Panel 204, hanya 2, 0, dan 4 berada dalam julat itu. Huruf dan ruang tidak termasuk. Oleh itu, muat turun yang dicetuskan oleh digit tidak membuktikan bahawa fon boleh memaparkan keseluruhan label. MDN mendokumenkan bahawa apabila aksara yang layak ditemui, seluruh sumber fon boleh dimuat turun. MDN: unicode-range

Contoh JavaScript kendiri ini menunjukkan perbezaan tersebut. Ia boleh dijalankan dalam konsol penyemak imbas atau Node.js tanpa persediaan. Pengiraan julat yang deterministik telah dijalankan untuk contoh yang ditunjukkan.

const text = "Panel 204";
const rows = Array.from(text, character => {
  const value = character.codePointAt(0);
  return {
    character,
    codePoint: "U+" + value.toString(16).toUpperCase().padStart(4, "0"),
    inDeclaredRange: value >= 0x30 && value <= 0x39
  };
});

console.table(rows);

Jika julat itu mengecualikan aksara yang diperlukan, betulkan deskriptor yang tidak tepat atau bekalkan subset yang mengandunginya. Kekalkan teks asal yang gagal semasa memeriksa hasilnya. Jangan anggap lelaran rentetan sebagai ujian pembentukan teks: jujukan gabungan memerlukan pengendalian gugusan, dan piawaian mengambil kira maklumat pembentukan apabila diperlukan. Kekalkan jujukan utuh semasa membandingkan hasil paparan. W3C: Pemadanan fon dan pemadanan gugusan

Adakah fon terlepas tempoh paparannya?

Periksa font-display apabila keluarga dan liputan kelihatan betul. optional mempunyai tempoh sekatan yang sangat singkat dan tiada tempoh pertukaran. fallback mempunyai tempoh pertukaran yang singkat. Oleh itu, sumber yang tiba selepas tempoh yang berkenaan boleh menyebabkan teks sandaran kekal kelihatan untuk muatan halaman itu. swap membenarkan tempoh pertukaran tanpa had selepas tempoh sekatan awalnya. MDN: font-display

Untuk diagnosis terkawal, ubah sementara peraturan yang terjejas kepada font-display: swap dalam helaian gaya yang disediakan dan ulangi keadaan muatan awal. Jika muka fon kini muncul selepas dimuatkan, masa pemuatan merupakan penjelasan yang disokong. Tentukan sama ada perubahan visual kemudian itu sesuai untuk halaman sebelum mengekalkan tetapan tersebut. Ulangi muatan awal dan muatan semula bercache; hasil bercache sahaja tidak menghasilkan semula masa ketibaan asal.

Apakah yang berubah apabila pustaka atau kanvas melukis teks?

Jika halaman sudah menggunakan Font Face Observer, periksa keluarga yang diperhatikan serta pilihan weight, style, dan stretch. Dokumentasinya menerangkan pemuat dan pemantau, menghendaki peraturan @font-face yang lazim, dan memerlukan rentetan ujian tersuai apabila fon tidak mempunyai aksara ujian lalainya. Had masa lalainya ialah tiga saat. Had masa Observer dan tempoh font-display penyemak imbas ialah keadaan yang berasingan. Dokumentasi Font Face Observer

Sebagai inferens diagnostik, mesej kejayaan Observer hendaklah diikuti pemeriksaan elemen sasaran. Memantau ketersediaan satu muka fon tidak membuktikan bahawa CSS yang menang bagi elemen itu memintanya. Memasang pemuat lain tidak banyak membantu apabila persoalan yang belum terjawab ialah muka fon yang dipaparkan.

Kanvas memperkenalkan sempadan lukisan yang berasingan. Konteks lukisannya mempunyai tetapan font sendiri, yang pada asalnya 10px sans-serif; penetapan yang tidak sah diabaikan. Oleh itu, menetapkan keluarga CSS pada elemen kanvas tidak mencukupi untuk mengesahkan fon konteks itu. Periksa nilai yang ditetapkan pada konteks lukisan dan susunan operasi pemuatan serta lukisan. WHATWG: Gaya teks kanvas

Untuk teks kanvas, tunggu sehingga muka fon berdaftar yang dimaksudkan dimuatkan, tetapkan fon konteks itu, kemudian lukis semula adegan yang terjejas menggunakan rutin lukisan biasa aplikasi. Piksel yang telah dilukis tidak akan memperoleh muka fon baharu apabila fon tiba. Penyediaan teks kanvas juga menggunakan kotak baris andaian yang lebarnya tidak terhingga, jadi ujian kanvas yang berjaya tidak membuktikan bahawa label halaman web yang terhad akan membalut teks dengan cara yang sama. WHATWG: Penyediaan teks dan pelukisan teks

Bagaimanakah anda mengesahkan pembaikan?

Kembali kepada label asal dan ulangi pemerhatian yang mendedahkan masalah itu. Sahkan permintaan yang dikira, muka fon yang dipaparkan, dan aksara yang berkaitan dalam keadaan muatan asal. Untuk kanvas, lukis semula sebelum membuat perbandingan. Simpan rekod ringkas tentang elemen, sifat yang diminta, muka fon sebenar yang dipaparkan, sumber dan perubahan yang berjaya; ini menjadikan diagnosis boleh diulang.

Selesai apabila anda boleh menerangkan sebab fon tidak digunakan dan menunjukkan hasil yang dimaksudkan pada teks yang terjejas. Deklarasi keluarga yang dibetulkan, subset yang tepat, muka fon berdaftar, dasar paparan yang sesuai, atau lukisan semula pada masa yang betul masing-masing menangani sempadan yang berbeza. Pilih pembaikan yang disokong oleh pemerhatian anda.

Sumber