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

ما الذي يتغير فعليًا أثناء تحميل خط؟

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

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

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

أي قيمة لـ font-display تناسب مهمة القارئ؟

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

القيمة أثناء عدم توفر الخط فرصة استبدال الخط الاحتياطي نقطة بداية مناسبة
swap حظر بالغ القصر، ثم ظهور الخط الاحتياطي فترة استبدال غير محدودة عنوان قصير يهم فيه استخدام المحرف المقصود
fallback حظر بالغ القصر، ثم ظهور الخط الاحتياطي فترة استبدال قصيرة نص للقراءة يكون فيه التغيير المبكر مقبولًا
optional حظر بالغ القصر لا توجد فترة استبدال نص تكون فيه المحافظة على الخط الظاهر أولًا هي الأهم
block خط احتياطي غير مرئي خلال فترة حظر قصيرة، ثم يظهر الخط الاحتياطي فترة استبدال غير محدودة عنصر صغير يعتمد على خط معين
auto سياسة يحددها المتصفح سياسة يحددها المتصفح قبول السلوك الافتراضي للمتصفح

هذه فئات للسياسات، وليست مؤقتات دقيقة يمكنك ضبطها. توصي مسودة W3C الحالية لمعيار CSS Fonts Level 4 بمدد نموذجية، لكنها تسمح صراحةً باختلاف المتصفحات. كما تقصر block على أجزاء نصية صغيرة يلزمها خط بعينه لضمان سهولة الاستخدام. مجرد تفضيل مظهر عنوان ليس سببًا وجيهًا لتركه فارغًا. W3C: التحكم في عرض الخط لكل وجه خط.

لصفحة اصطناعية تتضمن عنوانًا باسم “مجموعة نموذجية”، وقائمة تنقل باسم “القسم الأول”، وعدة فقرات، ابدأ بالتفكير في fallback لنص القراءة. فكّر في swap للعنوان القصير إذا كان استخدام محرفه لاحقًا مهمًا. اختر optional عندما تكون الأولوية للمحافظة على العرض الظاهر أولًا. تطبّق هذه التوصيات السياسات الموثقة على مهمة القارئ؛ وهي ليست نتائج مقاسة.

استخدم وسيلة مساعدة لاتخاذ القرار بشأن الظهور وإعادة تدفق النص

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

  1. اقرأ الصفحة بخطها الاحتياطي. هل يستطيع أحد فهم “القسم الأول”، والتعرّف على العنوان، وقراءة الفقرات؟ إذا كان الأمر كذلك، فالبدء بإظهار الخط الاحتياطي خيار مناسب.
  2. راقب استبدال الخط. هل يمتد العنوان إلى سطر إضافي؟ هل تلتف التسميات؟ هل تتحرك الفقرة التالية؟
  3. اختر الفترة المقبولة للاستبدال. استخدم swap عندما يظل الاستبدال المتأخر مقبولًا، وfallback عندما يكون التغيير المبكر وحده مقبولًا، أو optional عندما ينبغي أن يبقى الخط الظاهر أولًا.
  4. اشترط سببًا ملموسًا لإخفاء النص. قبل اختيار block، حدّد ما الذي سيصبح غير قابل للاستخدام عند عرض الخط الاحتياطي، ولماذا يتعذر إزالة هذا الاعتماد.

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

لا يحل الإخفاء المؤقت هذا الاختلاف. الخيارات العملية هي تحسين تطابق الخط الاحتياطي، أو ضبط التخطيط بعد الاختبار، أو اختيار سياسة تتجنب الاستبدال المتأخر. وفق سلوك optional في مسودة W3C الحالية، بعد رسم النص الاحتياطي، يجب ألا يحل الخط الاختياري محله طوال عمر تلك الصفحة. تعريف W3C للخيار optional.

كيفية تطبيق الخيار واختباره على Mac

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

اعثر على تعريف @font-face المعني في ورقة أنماط مصدر الصفحة أو في إعدادات الخط المدعومة. اضبط الواصف font-display على القيمة المرشحة، مثل font-display: fallback;. راجع التعريفات الأخرى المستخدمة للأوزان والأنماط حتى يشمل الاختبار الوجوه التي تطلبها الصفحة فعليًا. يوضّح مثال MDN للخاصية font-display موضع الواصف.

في Chrome على Mac، اضغط Command + Option + I لفتح DevTools. ويمكنك أيضًا النقر بزر الفأرة الأيمن على النص المستهدف واختيار Inspect؛ تعرض لوحة Elements قواعد CSS المطبقة عليه ضمن Styles. توثّق تعليمات Chrome لفتح DevTools الطريقتين.

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

  1. افتح Network، وفعّل Disable cache، واختر إعدادًا أبطأ من قائمة Throttling، ثم أعد التحميل. استخدم مرشح Font للتركيز على طلبات الخطوط.
  2. راقب العنوان وقائمة التنقل وبداية الفقرة. سجّل ما إذا كان النص يبدأ فارغًا، أو يظهر بخط احتياطي، ثم يتغير لاحقًا موضع فواصل أسطره.
  3. إذا كان الانتقال سريعًا جدًا للفحص، فعّل Capture screenshots ضمن إعدادات لوحة Network، ثم أعد التحميل لفحص تسلسل التحميل.
  4. عطّل إبطاء الشبكة وألغِ تحديد Disable cache. أعد التحميل للمقارنة بزيارة متكررة في ظروف عادية. توثّق مرجعية ميزات Network في Chrome عناصر التحكم هذه.

اختبر نتيجة عدم توفر الخط بشكل منفصل. في Network، انقر بزر الفأرة الأيمن على طلب الخط الفعلي واختر Block request، ثم أعد التحميل. يعرض Chrome النمط المطابق ضمن Request conditions. تحقق من أن الكلمات تصبح مقروءة وأن الصفحة تظل قابلة للاستخدام بالخط الاحتياطي. أزل نمط الاختبار أو عطّله بعد ذلك. تشرح وثائق Chrome لشروط الطلب حظر الطلبات وكيفية تحديد الطلبات المحظورة.

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

ماذا لو غيّر الخط الاحتياطي الظاهر التخطيط أكثر من اللازم؟

ابدأ بالنص الفعلي والعرض المتاح. قارن التسميات القصيرة وأطول عنوان وعدة أسطر من الفقرات. قد يشبه الخط الاحتياطي خط الويب بصريًا، مع اختلاف تقدم الأحرف فيه بما يؤدي إلى التفاف مختلف للنص.

لتحسين التطابق، يضبط size-adjust مخططات الحروف ومقاييسها، بما في ذلك تقدم الحروف. تعرض MDN كيفية تعريف وجه خط احتياطي محلي وتعديله ليتطابق بدرجة أفضل مع خط ويب أساسي. حدّد نسبة مناسبة للزوج الفعلي لديك؛ فنسبة واردة في مثال توثيقي ليست إعدادًا عامًا. MDN: size-adjust.

تستحق المقاييس الرأسية فحصًا منفصلًا. يتحكم الواصف ascent-override في المقياس فوق خط الأساس المستخدم عند تنسيق مربعات الأسطر، لكن MDN تشير حاليًا إلى أن توفره محدود. تعامل مع هذا الضبط بوصفه تحسينًا، واحتفظ بتخطيط مقروء للخط الاحتياطي في المتصفحات التي لا تدعمه. MDN: ascent-override.

اترك تشكيل النص للمتصفح. لا تحاول تثبيت العنوان باستبدال كل حرف على حدة أو قياسه. تتضمن مطابقة الخطوط في CSS معالجة خاصة لمجموعات الحروف الأساسية، مثل حرف أساسي يتبعه تشكيل مركب. افحص التسميات والأسطر كاملةً ضمن تخطيطها الفعلي. W3C: مطابقة المجموعات.

هل يغيّر التحميل المسبق أو مكتبة تحميل الخطوط القرار؟

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

بالنسبة إلى نصوص الصفحات العادية، ابدأ بـ CSS. إذا كان مشروع قائم يستخدم Font Face Observer، فإن طريقته الموثقة load() تعيد وعدًا يتحقق عند تحميل الخط ويرفض عند حدوث إخفاق. ينبغي أن يطابق اسم العائلة، وأوصاف الوزن والنمط والعرض الاختيارية، الوجه المطلوب. توثّق المكتبة أيضًا توفير نص اختبار مناسب عندما تكون أحرفها الافتراضية غائبة عن الخط. وثائق Font Face Observer.

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

للواجهة البرمجية الأصلية حد مشابه. يتحقق document.fonts.ready بعد اكتمال عمليات التحميل والتخطيط للخطوط المستخدمة؛ وقد تختلف هذه المجموعة عن جميع الخطوط المعرّفة، بما فيها الوجوه الاختيارية التي فاتتها فرصتها. لذلك لا يثبت أن كل وجه مقصود ظاهر. MDN: خاصية fonts في Document.

وبالمثل، تحدد وسيطة النص الاختيارية لـ document.fonts.load() الوجوه المطابقة من خلال نطاقات Unicode؛ لكنها لا تتحقق من تغطية كل محرف على حدة. يظل اكتمال التحميل وصحة عرض العينة كاملةً فحصين منفصلين. MDN: طريقة load() في FontFaceSet.

اختر السياسة بمراجعة نسخ الصفحة نفسها عند التحميل البطيء، وعدم توفر الخط، وتكرار التحميل. أبقِ الكلمات العادية مقروءة، وحدد صراحةً ما إذا كان الاستبدال المتأخر مقبولًا، ولا تقبل الإخفاء المؤقت إلا عندما يكون لعنصر صغير اعتماد مثبت على خط بعينه. ينبغي أن تتيح النتيجة مواصلة قراءة “مجموعة نموذجية” براحة في كل حالة اختُبرت.

المصادر