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

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

Adam Argyle

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

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

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

Browser Support

  • Chrome: 92.
  • Edge: 92.
  • Firefox: 92.
  • Safari: 17.

Source

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

  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) من خلال تبديل الخطوط بسلاسة

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

يحدث تغيير في التنسيق في المثال على اليمين، بينما لا يحدث في المثال على اليسار.

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

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

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

اختَر خط ويب من 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: الاستهداف عن بُعد

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

@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 Font، وسيتم احتساب كيفية تعديل خط Arial ليحلّ محلّه بسلاسة. في ما يلي مثال على نمط CSS الخاص بخط Roboto من الآلة الحاسبة، حيث يتم تحميل خط 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

Browser Support

  • Chrome: 87.
  • Edge: 87.
  • Firefox: 89.
  • Safari: not supported.

Source

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

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

يحتوي العنوان الرئيسي الأحمر (غير المعدَّل) على مساحة فوق الحرفين اللذين يبدآن بحرف كبير A وO، بينما تم تعديل العنوان الرئيسي الأزرق ليتناسب ارتفاع الحرف الكبير مع المربّع المحيط العام.

descent-override

Browser Support

  • Chrome: 87.
  • Edge: 87.
  • Firefox: 89.
  • Safari: not supported.

Source

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

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

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

line-gap-override

Browser Support

  • Chrome: 87.
  • Edge: 87.
  • Firefox: 89.
  • Safari: not supported.

Source

يحدّد واصف 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