R050: نص عربي يسقط إلى خط غير الخط المعلن (مقيسًا، أو وفق الإعلان، أو لأن خط الويب فشل في التحميل)

حين لا يحمل أي خط في القائمة حروفًا عربية، أو يفشل خط الويب المعلن في التحميل، يستبدل كل جهاز خطه الافتراضي، فتبدو العربية مختلفة على Windows وiOS وAndroid.

الفحص

المعرّف: R050
الفئة: الطباعة
الخطورة الافتراضية: عالية

متى يُطلق ملاحظة

عالية
تعلن الصفحة خط ويب بـ@font-face، ولم يستطع المتصفح تحميله، والنص العربي مضبوط على تلك العائلة. تُرسم العربية بأي خط يسقط إليه الجهاز، ولا شيء في ورقة الأنماط يكشف ذلك.
الإصلاح: افحص src في @font-face: خطأ 404، أو ترويسة CORS لا يرسلها خادم الخطوط، أو صيغة رفضها المتصفح. وحتى يُحمَّل، لا تفعل العائلة المعلنة شيئًا.
عالية
النص العربي مضبوط على عائلة تعلنها الصفحة، وقياس النص المعروض يُظهر أنه مطابق لخط المتصفح البديل: العائلة المذكورة لا ترسم العربية أبدًا.
الإصلاح: أضف عائلة تدعم العربية إلى القائمة (مثل "IBM Plex Sans Arabic" أو "Noto Sans Arabic") قبل الخط البديل العام.
عالية · ثقة متوسطة
تعذّر قياس أي شيء، والقائمة لا تذكر عائلة معروفة بدعم العربية، ولا تعلن @font-face يغطي نطاقه العربية، فتسقط العربية إلى الخط الافتراضي لكل جهاز. يُبلَّغ بثقة متوسطة، لأن خطًا عربيًا غير مدرج في القائمة قد يكون مستخدمًا.
الإصلاح: سمِّ خطًا عربيًا صراحة في القائمة (مثل "IBM Plex Sans Arabic" أو "Noto Sans Arabic") بدل أن تتركها تؤول إلى خط النظام الافتراضي.

ما الذي يتجاهله عمدًا

العائلات المعروفة بدعم العربية، مثل Tahoma وSegoe UI وNoto Sans Arabic وIBM Plex Sans Arabic؛ والقائمة التي تذكر أحد خطوط النظام تلك، فالفاحص لا يستطيع قياسها لأن جهازه لا يحملها؛ والقائمة التي تعلن خط ويب يغطي unicode-range فيه العربية؛ والقوائم العامة وحدها مثل sans-serif. حتى أربع عائلات في الصفحة.

قبل الإصلاح وبعده

before.css

body {
  font-family: "Inter", sans-serif;
}

after.css

body {
  font-family: "Inter", "IBM Plex Sans Arabic", sans-serif;
}

افحصه يدويًا

حدّد نصًا عربيًا، وافتح لوحة Computed وانزل إلى Rendered Fonts: تذكر الخط الذي يرسم الحروف فعلًا. وشغّل [...document.fonts].filter((f) => f.status === 'error').map((f) => f.family) في وحدة تحكم DevTools لتسرد خطوط الويب التي فشل تحميلها.

ما يعرضه لك التقرير

تحمل كل ملاحظة من R050 ما ينطبق عليها من الحقول أدناه، فترى سبب ظهورها دون إعادة الفحص.

family: العائلة المضبوط عليها النص العربي.
declaredStack: قائمة font-family كاملة، كما حُسبت.
arabicElementCount: عدد العناصر ذات النص العربي التي تستخدم هذه العائلة.
declaredFaceReady: هل انتهى تحميل الخط المعلن. هذه حالة التحميل، لا التغطية.
declaredFaceErrored: هل أبلغ المتصفح بأن الخط المعلن فشل.
rendersSameAsFallback: القياس: هل تُعرض العربية كما يعرضها الخط البديل، أو لا شيء حين تعذّر القياس.
signal: أي النتائج هذه: face-errored أو measured أو declared.

مكوّنات تجتاز هذا الفحص بطريقة بنائها

تجتاز مكوّنات ريتلا هذه الفحص R050 بالطريقة التي بُنيت بها. إذا استخدمتها كما يصفها التوثيق، فلن تُدخل هذا الخلل إلى صفحتك.

هل تخفق صفحتك في الفحص R050؟

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

افحص صفحة مجانًا تصفّح الفحوص