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

ميزات الويب: font-size-adjust

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

تتيح لك السمة font-size-adjust توحيد الحجم المرئي للنص من خلال تعديل حجم الخط استنادًا إلى مقياس خط معيّن (عادةً ما يكون ارتفاع الحرف x).

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

  1. إلزامي: يجب تطبيق السمة font-size-adjust على العناصر التي يكون فيها اتساق الخطوط أمرًا بالغ الأهمية، مثل الحاويات التي تستخدم خطوط ويب أو الكتل التي تحتوي على مجموعات خطوط مختلطة.
  2. إلزامي: استخدِم الكلمة الرئيسية from-font في العناصر لمطابقة حجم الخط في العناصر المُدمَجة تلقائيًا مع نِسب الخط الأساسي.
  3. إلزامي: استخدِم قيمة رقمية محدّدة لتجاوز نسبة العرض إلى الارتفاع في السمة font-size-adjust (مثلاً، font-size-adjust: 0.5) لتوحيد النِسَب بشكل مستقل عندما تكون نِسَب الخطوط التي يتم الاستناد إليها من مظاهر مختلفة.

مثال: تسوية ارتفاع الحرف x تلقائيًا

يُعدّ استخدام from-font الطريقة الأكثر فعالية. وتستخرج نسبة العرض إلى الارتفاع لارتفاع الحرف x من أول خط متاح وتطبّقها على الخطوط في العناصر الثانوية.

.content-area {
  font-family: "MyCustomWebFont";
  /* Automatically extract and apply x-height ratio from MyCustomWebFont */
  font-size-adjust: from-font;
}
.content-area span{
  font-family: "MyOtherCustomWebFont"
}

مثال: تحديد ارتفاع x معيّن

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

.theme{
  font-family: Verdana, sans-serif;
}
.theme.alternate{
  font-family: Times;
  /* Set to the aspect ratio (x-height / font-size) of the primary font */
  font-size-adjust: 0.51;
}

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

MANDATORY: In browsers that do not support font-size-adjust, fonts will render at their natural font-size value. يجب تقديم استراتيجية احتياطية صالحة للمتصفّحات غير المتوافقة باستخدام كتلة @supports للتخفيف من حدة هذه المشكلة:

  • استخدِم @supports not (font-size-adjust: from-font) لرصد توافق font-size-adjust وتوفير أنماط احتياطية (مثل ارتفاع السطر أو حجم الخط المعدَّل).
  • اختَر خطوطًا ذات ارتفاعات x مشابهة لخطك الأساسي.
  • تطبيق عمليات إلغاء محدّدة لـ font-size وline-height لمجموعات الخطوط البديلة والمتداخلة
/* Feature detection for font-size-adjust */
@supports not (font-size-adjust: from-font) {
  .content-area {
    /* Manual adjustment for browsers without support (if needed) */
    line-height: 1.6;
    font-size: 1.2rem;
  }
}