قد يظل الخط الذي تم تنزيله غير مستخدم لأن CSS يختار وجهًا آخر، أو لأن النص خارج نطاق تغطيته، أو لأن فترة عرضه قد انتهت. على جهاز Mac، ابدأ بفحص الخط الذي يُعرَض فعليًا في تسمية واحدة، ثم تتبّع الاختيارات والتحميلات عكسيًا.

هذا الدليل موجّه إلى من يتولى صيانة صفحة ويب ويرى طلبًا ناجحًا للخط، لكنه لا يزال يرى نصًا بخط احتياطي. استخدم Chrome على macOS لخطوات الفحص. توضح التسمية الافتراضية Panel 204 واسم العائلة Sample Sans أدناه كيفية التشخيص؛ ولا يشيران إلى موقع ويب بعينه.

ما الذي يثبته نجاح التنزيل بالفعل؟

تعامل مع التشخيص بوصفه أربعة أسئلة منفصلة: هل جرى جلب المورد؟ هل سُجّل وجه صالح للاستخدام؟ هل اختار CSS ذلك الوجه لهذه الأحرف؟ هل رسمه العارض؟ يبدأ التحميل المسبق للخط جلبه مبكرًا؛ ولا يثبت وجوده أي خط يزوّد النص الظاهر. MDN: rel="preload"

تعمل مطابقة الخطوط على النص، لا على الملفات التي تم تنزيلها فحسب. يأخذ المتصفح عائلات الخطوط وخصائصها المطلوبة في الحسبان، ثم يتحقق من دعم الأحرف. لذلك قد تستخدم تسمية واحدة عدة خطوط، وقد يتسبب جزء آخر من الصفحة في تنزيل خط لا يخبرك إلا بالقليل عن التسمية المستهدفة. W3C: CSS Fonts Module Level 4, font matching

استخدم جدول القرار هذا لاختيار الفحص التالي. إنه أداة مساعدة للتشخيص مستمدة من حدود التحميل والمطابقة الموثقة، وليس سجلًا لنتائج متصفح مقيسة.

الملاحظة الفحص التالي ما الذي يساعد على التمييز بينه وبين غيره
تختلف العائلة المحسوبة عن العائلة المقصودة تتبّع تصريح CSS الفائز مشكلة في التتالي أو الاستهداف
العائلة المحسوبة صحيحة، لكن الخط المعروض مختلف افحص واصفات الوجه وتغطية الأحرف مشكلة في الاختيار أو الخط الاحتياطي
تشير JavaScript إلى تحميل وجه، لكنه غير موجود في مجموعة خطوط المستند افحص رمز التسجيل تحميل من دون تسجيل
يظهر الخط بعد إعادة التحميل، لكنه لا يظهر في الزيارة الأولى افحص font-display وتوقيت التحميل سلوك نافذة العرض
يعمل النص العادي، لكن نص اللوحة القماشية لا يتغير افحص ترتيب الرسم وإعدادات خط اللوحة عملية رسم منفصلة

أي خط يرسم التسمية المستهدفة فعليًا؟

في الصفحة المتأثرة، اضغط Command + Shift + C وحدد النص. في Elements، حدد أصغر عنصر يحتوي على التسمية المتأثرة. افتح Computed، ثم مرّر إلى Rendered Fonts. توثّق Chrome هذا العرض بوصفه المكان الذي يمكنك فيه فحص الخطوط التي تزوّد النص المعروض. Chrome DevTools: CSS features reference، Chrome DevTools: Apply other effects

سجّل الوجه المعروض وما إذا كان مصدره محليًا أم موردًا عبر الشبكة. وسجّل أيضًا القيم المحسوبة لكل من font-family وfont-weight وfont-style. تمثل عائلة الخطوط المحسوبة المكدس المطلوب؛ وتحدد نتيجة الخطوط المعروضة ما زوّد المحارف بالفعل. التشابه في المظهر وحده دليل ضعيف، لأن وجهين قد يبدوان متشابهين. Chrome DevTools: What font is that?

إذا ظهر الوجه المقصود للنص المتأثر، فتابع التحقيق في الفرق المحدد في المظهر، مثل الوزن أو الميزات. وإذا لم يظهر، فتابع أدناه. أبقِ النص الأصلي وإطار العرض دون تغيير أثناء الاختبار كي تظل كل ملاحظة قابلة للمقارنة.

هل يطلب CSS الفعلي الوجه المقصود؟

في Computed، افحص خصائص الخط الفعلية، ثم استخدم Styles للعثور على تصريحاتها. تميّز Chrome بين هذين العرضين: يتضمن Styles التصريحات التي تجاوزتها غيرها، بينما يعرض Computed القيم المطبقة فعليًا. افحص العنصر الفرعي الذي يحمل النص عندما تحتوي البطاقة على عدة تسميات؛ فتصريح الخط على العنصر الأب لا يكفي دليلًا على الخط المستخدم للعنصر الفرعي. Chrome DevTools: CSS features reference

افحص أي اختصار فائز من نوع font إلى جانب الخصائص الفردية. على سبيل المثال، يختار font: 16px sans-serif عائلة عامة ويعيد تعيين مكونات الاختصار المحذوفة، بما فيها الوزن والنمط. كما يعيد تعيين خصائص مثل font-feature-settings وfont-variation-settings. أصلح التصريح المسؤول عن القيمة غير المتوقعة، ثم أعد الفحص. MDN: font

بعد ذلك، قارن العائلة المطلوبة بالواصف font-family في قاعدة @font-face ذات الصلة. يحدد هذا الواصف اسم عائلة CSS المستخدم للإشارة إلى الوجه؛ وليس اسم الملف هو الاسم الذي يجب وضعه في مكدس خطوط العنصر. افحص القاعدة التي وصلت إلى المتصفح، بما في ذلك src والوزن والنمط وأي نطاقات معلنة. MDN: @font-face

يمكن التعبير عن نطاق الأوزان المدعوم لخط متغير بقيمتين، بينما يمكن لوجه ثابت أن يعلن وزنًا واحدًا. اجعل هذه الواصفات تصف المورد المقدم بدقة. يستحق عدم التطابق التحقيق، لكنه لا يفسر تلقائيًا استخدام الخط الاحتياطي: تتضمن مطابقة الخطوط بدائل عندما لا يتوفر نمط مطابق تمامًا. MDN: @font-face، W3C: Matching font styles

هل يمكن أن يتقدم خط محلي في الاختيار؟

افحص src بحثًا عن بديل local(). على جهاز Mac مثبت عليه ذلك الخط، قد يستخدم المتصفح النسخة المحلية بينما يظل خط الويب المحمّل مسبقًا بشكل منفصل غير مستخدم. لعزل هذه الحالة في Chrome، افتح لوحة Rendering، وفعّل Disable local fonts، ثم أعد التحميل. قارن Rendered Fonts قبل ذلك وبعده، ثم أعد الإعداد إلى حالته السابقة. يستهدف هذا الاختبار مصادر local() في قواعد @font-face. Chrome DevTools: Apply other effects

هل حُمّل الوجه وسُجّل في المستند الصحيح؟

يمكن أن ينتهي تحميل وجه أُنشئ باستخدام new FontFace() قبل إضافته إلى مجموعة الخطوط. ولعرضه في المستند، يجب إضافته إلى document.fonts. افحص مسار التحميل في التطبيق للتأكد من تنفيذ العمليتين؛ فمجرد حل وعد تحميل الوجه لا يُكمل التسجيل. MDN: CSS Font Loading API

يسرد تشخيص وحدة التحكم الكامل التالي الوجوه المسجلة في المستند الحالي. شغّله في سياق وحدة التحكم للصفحة المتأثرة. يقرأ المجموعة من دون بدء تحميلات أو تغيير الأنماط؛ ولا يحدد المحارف المعروضة. لم يُنفَّذ هنا سلوكه المعتمد على المتصفح.

(() => {
  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);
})();

استخدم الجرد للتمييز بين غياب التسجيل ووجود وجه مسجل يظل غير مستخدم. إذا كانت حالة أحد الإدخالات error، فتحقّق من فشل التحميل قبل تعديل الطباعة. يشير الإدخال loaded إلى حالة التحميل، بينما يظل اختيار الوجه معتمدًا على العنصر والنص. MDN: CSS Font Loading API

لا تعتبر document.fonts.check() دليلًا على العرض. فقد تعيد true حتى لعائلة غير موجودة. وتضيّق وسيطة النص الاختيارية نطاق المطابقة وفق نطاقات Unicode المعلنة، لكنها لا تختبر تغطية المحارف الفردية. وبالمثل، يُحل document.fonts.ready بعد التحميل والتخطيط للخطوط المستخدمة؛ لكنه لا يشهد بأن كل وجه معلن قد عُرض. MDN: FontFaceSet.check()، MDN: Document.fonts

هل يغطي الخط الأحرف التي تختبرها؟

افحص كلًا من unicode-range في CSS وملف الخط الفعلي. يتحكم الواصف في الأحرف التي يمكن أن تستخدم وجهًا. توسيع الواصف لا ينشئ محارف رسومية غير موجودة في الملف؛ إذ يظل جدول محارف الخط جزءًا من المطابقة. MDN: unicode-range، W3C: Matching font styles

خذ قاعدة توضيحية تقتصر على U+0030-0039. في Panel 204، تقع الأحرف 2 و0 و4 فقط ضمن ذلك النطاق. أما الحروف والمسافة فلا تقع ضمنه. لذا فإن تنزيل الخط بسبب الأرقام لا يثبت قدرة الخط على عرض التسمية كاملة. توثّق MDN أن مصادفة محرف مؤهل قد تتسبب في تنزيل مورد الخط بأكمله. MDN: unicode-range

يوضح مثال JavaScript المستقل هذا الفرق. يعمل في وحدة تحكم المتصفح أو في Node.js من دون إعداد. وقد نُفّذ حساب النطاق المحدد للمثال المعروض.

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);

إذا استثنى النطاق الأحرف المطلوبة، فصحّح واصفًا غير دقيق أو وفّر مجموعة فرعية تتضمنها. أبقِ النص الأصلي الذي ظهرت فيه المشكلة عند التحقق من النتيجة. لا تفترض أن تكرار السلسلة حرفًا حرفًا يختبر تشكيل النص؛ فالتسلسلات المركبة تتطلب التعامل مع العناقيد، كما يأخذ المعيار معلومات التشكيل في الحسبان عند الحاجة. أبقِ التسلسلات سليمة عند مقارنة الناتج المعروض. W3C: Font matching and cluster matching

هل فات الخط نافذة العرض؟

افحص font-display عندما تبدو العائلة والتغطية صحيحتين. لدى optional فترة حجب قصيرة للغاية ولا توجد فترة تبديل. ولدى fallback فترة تبديل قصيرة. لذا قد يؤدي وصول المورد بعد انقضاء النافذة ذات الصلة إلى بقاء النص الاحتياطي ظاهرًا في تحميل الصفحة ذلك. أما swap فيسمح بفترة تبديل غير محدودة بعد فترة الحجب الأولية. MDN: font-display

لإجراء تشخيص مضبوط، غيّر القاعدة المتأثرة مؤقتًا إلى font-display: swap في ورقة الأنماط المقدمة، وكرّر ظروف التحميل الأولي. إذا ظهر الوجه بعد التحميل، فهذا يدعم تفسير التوقيت. قرر ما إذا كان هذا التغيير البصري اللاحق مناسبًا للصفحة قبل الإبقاء على الإعداد. كرر التحميل الأولي وإعادة التحميل من الذاكرة المؤقتة؛ فالنتيجة المخزنة مؤقتًا وحدها لا تعيد توقيت الوصول الأصلي.

ما الذي يتغير عندما ترسم مكتبة أو لوحة قماشية النص؟

إذا كانت الصفحة تستخدم Font Face Observer بالفعل، فتحقّق من العائلة التي تتم مراقبتها وخياراتها weight وstyle وstretch. تصف وثائقه أداة تحميل ومراقبة، وتتطلب قواعد @font-face المعتادة، وتتطلب سلسلة اختبار مخصصة عندما يفتقر الخط إلى محارف الاختبار الافتراضية. المهلة الافتراضية ثلاث ثوانٍ. مهلة مراقب الخط ونافذة font-display في المتصفح حالتان منفصلتان. Font Face Observer documentation

وبوصفه استنتاجًا تشخيصيًا، ينبغي أن تتبع رسالة نجاح المراقب معاينة العنصر المستهدف. فمراقبة إتاحة وجه واحد لا تثبت أن CSS الفائز للعنصر يطلبه. ولا تضيف أداة تحميل أخرى فائدة تُذكر عندما يكون السؤال الذي لم يُحسم هو أي وجه عُرض.

تضيف اللوحة القماشية حدًا منفصلًا للرسم. لسياق الرسم إعداد font الخاص به، وقيمته الأولية 10px sans-serif؛ ويُتجاهل الإسناد غير الصالح. لذلك لا يكفي تعيين عائلة CSS لعنصر اللوحة لإثبات خط السياق. افحص القيمة المسندة إلى سياق الرسم وترتيب عمليتي التحميل والرسم. WHATWG: Canvas text styles

لنص اللوحة القماشية، انتظر تحميل الوجه المقصود المسجّل، واضبط خط السياق، ثم أعد رسم المشهد المتأثر باستخدام روتين الرسم المعتاد في التطبيق. لا تكتسب وحدات البكسل المرسومة سابقًا محرفًا جديدًا عند وصول الخط. كما يُحضّر نص اللوحة القماشية باستخدام صندوق سطر افتراضي ذي عرض غير محدود، لذا لا يثبت نجاح اختبار اللوحة أن تسمية صفحة ويب محدودة العرض ستلتف بالطريقة نفسها. WHATWG: Text preparation and drawing text

كيف تؤكد إصلاح المشكلة؟

ارجع إلى التسمية الأصلية وكرّر الملاحظة التي كشفت المشكلة. تحقّق من الطلب المحسوب والوجه المعروض والأحرف ذات الصلة في ظروف التحميل الأصلية. وبالنسبة إلى اللوحة القماشية، أعد الرسم قبل المقارنة. احتفظ بسجل موجز للعنصر والخصائص المطلوبة والوجه المعروض فعليًا والمورد والتغيير الناجح؛ فهذا يجعل التشخيص قابلًا لإعادة الإنتاج.

أنهِ العمل عندما تستطيع تفسير سبب عدم استخدام الخط وإظهار النتيجة المقصودة على النص المتأثر. يعالج كل من تصحيح تصريح العائلة، أو توفير مجموعة فرعية دقيقة، أو تسجيل الوجه، أو اختيار سياسة عرض مناسبة، أو إعادة الرسم في التوقيت الصحيح حدًا مختلفًا. اختر الإصلاح الذي تدعمه ملاحظاتك.

المصادر