الخطوط الاحتياطية الثابتة بصريًا

عند تحميل خطوط الويب، غالبًا ما تحلّ محلّ خط احتياطي له أبعاد مختلفة، حتى إذا تم ضبط كليهما على السمة font-size نفسها. يؤدي ذلك إلى "تغيير في التصميم" (متغيّرات التصميم التراكمية) ويمكن أن يجعل النص غير مقروء إذا كانت الأحرف الصغيرة في الخط الاحتياطي (ارتفاع الحرف x) مختلفة بشكل كبير عن الخط المفضّل.

تحلّ السمة font-size-adjust هذه المشكلة من خلال توحيد حجم الخط استنادًا إلى مقياس معيّن (عادةً ارتفاع الحرف x)، ما يضمن أن يشغل النص المساحة المرئية نفسها بغض النظر عن الخط النشط حاليًا.

خطوات التنفيذ

1. تحديد نسبة العرض إلى الارتفاع للخط المفضّل لديك

لتسوية الخطوط الاحتياطية، تحتاج إلى "قيمة نسبة العرض إلى الارتفاع" (نسبة الأحرف الصغيرة إلى حجم الخط) للخط الأساسي.

• الاكتشاف التلقائي (يُنصح به): استخدِم الكلمة الرئيسية from-font للسماح للمتصفّح باستخراج النسبة من خط الويب الأساسي.
• الحساب اليدوي: إذا كنت تعرف القيمة المحدّدة (مثلاً، 0.545 لخط Verdana)، يمكنك تقديمها مباشرةً للتحكّم بشكل أكثر دقة.

2. تطبيق font-size-adjust على حاوية النص

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

.text-content {
  /* Define your font stack as usual */
  font-family: "MyWebFont", "Arial", sans-serif;
  font-size: 1rem;

  /* MANDATORY: Normalize the font size based on the primary font's x-height.
     This ensures that if 'Arial' is used as a fallback, it is scaled 
     to match the x-height of 'MyWebFont'. */
  font-size-adjust: from-font;
}

3- (اختياري) ضبط مقاييس معيّنة

على الرغم من أنّ ارتفاع الحرف الصغير هو المقياس التلقائي والأكثر شيوعًا، يمكنك استخدام مقاييس أخرى، مثل cap-height (مفيد للعناوين المكتوبة بأحرف كبيرة) أو ch-width (مفيد للخطوط الأحادية المسافة).

h1 {
  /* Normalize based on the height of capital letters */
  font-size-adjust: cap-height from-font;
}

4. التحقّق من الثبات البصري

تأكَّد من أنّ قيمة font-size-adjust تضبط محاذاة العنصر الاحتياطي بشكل صحيح. ويمكنك اختبار ذلك من خلال حظر خط الويب مؤقتًا أو تعديل عبارة font-family في "أدوات مطوري البرامج" في المتصفّح والتحقّق من أنّ تنسيق النص يظل ثابتًا.

استراتيجيات احتياطية

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

للتخفيف من حدة هذه المشكلة بدون استخدام font-size-adjust، يمكنك استخدام واصفات @font-face size-adjust وascent-override وdescent-override لضبط الخطوط الاحتياطية يدويًا، على الرغم من أنّ احتسابها أكثر تعقيدًا من قيمة font-size-adjust واحدة.