ضبط حجم CSS لـ @font-face

أثناء تحميل خط ويب، يمكنك الآن ضبط حجمه لتوحيد أحجام خطوط المستند ومنع تغيُّر التصميم عند التبديل بين الخطوط.

Adam Argyle

راجِع المثال التالي التجريبي حيث يكون font-size هو 64px متّسق، والفرق الوحيد بين كلّ من هذه العناوين هو font-family. لم يتم تعديل الأمثلة على يمين الصفحة، وبالتالي لها حجم نهائي غير متّسق. تستخدِم الأمثلة على اليمين size-adjust لمحاولة ضمان أنّ 64px هو المقاس النهائي المتّسق.

في هذا المثال، يتم استخدام أدوات تصحيح أخطاء تنسيق شبكة CSS في "أدوات مطوّري البرامج في Chrome" لعرض الارتفاعات.

تتناول هذه المشاركة موصّفًا جديدًا لواجهة الخط في CSS يُعرف باسم size-adjust. ويوضّح أيضًا بعض الطرق لتصحيح أحجام الخطوط وتوحيدها لتوفير تجربة سلسة للمستخدمين وأنظمة تصميم متّسقة وتنسيق صفحات قابل للتنبؤ بدرجة أكبر. ومن حالات الاستخدام المهمة تحسين عرض خطوط الويب لمنع تغيُّر التصميم التراكمي (CLS).

توافق المتصفّح

  • Chrome: 92
  • Edge: ‏ 92
  • Firefox: 92
  • ‫Safari: 17

المصدر

في ما يلي عرض توضيحي تفاعلي لمساحة الصعوبات. جرِّب تغيير نوع الخط باستخدام القائمة المنسدلة ولاحظ ما يلي:

  1. الاختلافات في الارتفاع في النتائج
  2. تغييرات المحتوى المفاجئة بصريًا
  3. نقل المناطق المستهدَفة التفاعلية (ينتقل القائمة المنسدلة من مكان إلى آخر).

كيفية تغيير حجم الخطوط باستخدام size-adjust

مقدمة عن البنية:

@font-face {
  font-family: "Adjusted Typeface";
  size-adjust: 150%;
  src: url(some/path/to/typeface.woff2) format('woff2');
}
  1. تنشئ خطًا مخصّصًا باسم Adjusted Typeface.
  2. يستخدم size-adjust لتوسيع كل رمز نصي بنسبة% 150 من حجمه التلقائي.
  3. يؤثر هذا الخيار في الخط المُستورَد فقط.

استخدِم الخط المخصّص أعلاه على النحو التالي:

h1 {
  font-family: "Adjusted Typeface";
}

الحدّ من متغيّرات التصميم التراكمية (CLS) من خلال تبديل الخطوط بسلاسة

في الصورة المتحركة التالية، شاهِد الأمثلة على يمين الشاشة وكيف يحدث تغيُّر عند تغيير الخط. هذا مجرد مثال صغير يتضمّن عنصرًا واحدًا للعنوان ، وتظهر المشكلة بشكل واضح جدًا.

يتضمّن المثال على اليسار تغييرًا في التنسيق، بينما لا يتضمّن المثال على اليمين ذلك.

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

كلما زاد المحتوى، زاد احتمال حدوث تغيير في التصميم عند تبديل الخط

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

اختَر خط ويب من Google، واسترِد مقتطفًا من @font-face تم تعديله مسبقًا.

في بداية هذه المشاركة، تم حلّ مشكلة حجم الخط من خلال المحاولة والخطأ. تم تعديل size-adjust في رمز المصدر إلى أن عرض العنوان نفسه في Cookie وArial 64px نفسه الذي عرضه Press Start 2P بشكل طبيعي. لقد قيّمت خطّين بحجم خط مستهدَف.

@font-face {
  font-family: 'Adjusted Arial';
  size-adjust: 86%;
  src: local(Arial);
}

@font-face {
  font-family: 'Cookie';
  size-adjust: 90.25%;
  src: url(...woff2) format('woff2');
}

معايرة الخطوط

بصفتك مؤلفًا، يمكنك تحديد أهداف المعايرة لتسويت قياس الخط. يمكنك توحيد الخطوط على Times أو Arial أو خط نظام، ثم تعديل الخطوط المخصّصة لمطابقتها. أو يمكنك تعديل الخطوط المحلية لتتطابق مع الخطوط التي نزّلتها.

استراتيجيات معايرة size-adjust:

  1. الاستهداف عن بُعد:
    يمكنك ضبط الخطوط المحلية لتتوافق مع الخطوط التي تم تنزيلها.
  2. الاستهداف المحلي:
    يمكنك تعديل الخطوط التي تم تنزيلها لتصبح الخطوط المستهدَفة المحلية.

المثال 1: هدف بعيد

راجِع المقتطف التالي الذي يعدّل خطًا متاحًا محليًا لحجمه ليتطابق مع خط مخصّص في src عن بُعد. الخط المخصّص عن بُعد هو الهدف الذي يتم فيه التعيير، ربما خط العلامة التجارية:

@font-face {
  font-family: "Adjusted Regular Arial For Brand";
  src: local(Arial);
  size-adjust: 90%;
}

@font-face {
  font-family: "Rad Brand";
  src: url(some/path/to/a.woff2) format('woff2');
}

html {
  font-family: "Rad Brand", "Adjusted Regular Arial For Brand";
}

في هذا المثال، يتم تعديل الخط المحلي Arial تحسبًا لتحميل خط مخصّص، وذلك لإجراء عملية تبديل سلسة.

تتميز هذه الاستراتيجية بتقديم المخطّط نفسه للمصمّمين والمطوّرين من حيث الحجم وأسلوب الخط. العلامة التجارية هي هدف المعايرة. هذا نبأ سار لأنظمة التصميم.

تعمل آلة حاسبة Malte أيضًا على استخدام خط العلامة التجارية كهدف. اختَر أحد خطوط Google، وسيتم احتساب كيفية تعديل Arial للتبديل معه بسلاسة. في ما يلي مثال على ملف Roboto CSS من calculator، حيث يتم تحميل Arial وتسميته "Roboto-fallback":

@font-face {
    font-family: "Roboto-fallback";
    size-adjust: 100.06%;
    src: local("Arial");
}

لإنشاء تعديل متوافق مع جميع المنصات، اطّلِع على المثال التالي الذي يقدّم خطّين احتياطيَين محليَّين معدَّلَين تحسباً لخطّ العلامة التجارية.

@font-face {
    font-family: "Roboto-fallback-1";
    size-adjust: 100.06%;
    src: local("Arial");
}

@font-face {
    font-family: "Roboto-fallback-2";
    size-adjust: 99.94%;
    src: local("Arimo");
}

@font-face {
  font-family: "Roboto Regular";
  src: url(some/path/to/roboto.woff2) format('woff2');
}

html {
  font-family: "Roboto Regular", "Roboto-fallback-1", "Roboto-fallback-2";
}

المثال 2: استهداف محلي

راجِع المقتطف التالي الذي يعدّل خطًا مخصّصًا للعلامة التجارية ليطابق خط Arial:

@font-face {
  font-family: "Rad Brand - Adjusted For Arial";
  src: url(some/path/to/a.woff2) format('woff2');
  size-adjust: 110%;
}

html {
  font-family: "Rad Brand - Adjusted For Arial", Arial;
}

تتميز هذه الاستراتيجية بإمكانية العرض بدون أي تعديلات، ثم تعديل أي خطوط واردة لمطابقتها.

ضبط أكثر دقة باستخدام ascent-override وdescent-override وline-gap-override

إذا لم يكن تغيير الحجم العام للرموز النصية كافيًا لتعديل التصميم أو استراتيجية التحميل، إليك بعض خيارات الضبط الدقيقة التي تعمل مع size-adjust. يتم حاليًا استخدام السمات ascent-override و descent-override و و line-gap-override في الإصدار 87 من Chromium والإصدار 89 من Firefox والإصدارات الأحدث.

مقصّ فوق الكلمة التي تم استبدالها، يوضّح المناطق التي يمكن أن يتم اقتصاصها

ascent-override

توافق المتصفّح

  • Chrome: 87
  • ‫Edge: 87
  • Firefox: 89
  • Safari: غير متوافق

المصدر

يحدِّد العنصر الوصفي ascent-override الارتفاع فوق خط الأساس ل الخط.

@font-face {
  font-family: "Ascent Adjusted Arial Bold";
  src: local(Arial Bold);
  ascent-override: 71%;
}

يتضمّن العنوان الأحمر (غير المعدَّل) مساحة فوق الحرفَين الكبيرَين A وO، في حين تم تعديل العنوان الأزرق لكي يكون ارتفاعه الكبير مناسبًا بشكلٍ محكم مع الحدود العامة.

descent-override

توافق المتصفّح

  • Chrome: 87
  • ‫Edge: 87
  • Firefox: 89
  • Safari: غير متوافق

المصدر

يحدِّد العنصر الوصفي descent-override الارتفاع أسفل خط قاعدة الخط.

@font-face {
  font-family: "Ascent Adjusted Arial Bold";
  src: local(Arial Bold);
  descent-override: 0%;
}

يتضمّن العنوان الأحمر (غير المعدَّل) مساحة أسفل خطوط الأساس للحرفَين D وO، في حين تم تعديل العنوان الأزرق لكي تستقر حروفه بشكل مريح على خط الأساس.

line-gap-override

توافق المتصفّح

  • Chrome: 87
  • ‫Edge: 87
  • Firefox: 89
  • Safari: غير متوافق

المصدر

يحدّد العنصر الوصفي line-gap-override مقياس فجوة السطر للخط. هذا هو الفاصل بين السطور أو المسافة البادئة الخارجية المقترَحة للخط.

@font-face {
  font-family: "Line Gap Adjusted Arial";
  src: local(Arial);
  line-gap-override: 50%;
}

لا يحتوي العنوان الأحمر (غير المعدَّل) على line-gap-override، فهو في الأساس عند 0%، في حين تم تعديل العنوان الأزرق بنسبة %50، ما أدّى إلى توفير مساحة فوق أسفل الأحرف وفقًا لذلك.

خلاصة ما سبق ذكره

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

الخاتمة

إنّ ميزة @font-face size-adjust في CSS هي طريقة مثيرة لتخصيص مربّع حدود النص في تنسيقات الويب لتحسين تجربة تبديل الخطوط وبالتالي تجنُّب تغيير التنسيق للمستخدمين. لمزيد من المعلومات، اطّلِع على هذين المرجعَين:

صورة كريستيان ستراندست على Unsplash