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

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

Adam Argyle

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

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

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

Browser Support

• 92
• 92
• 92
• 17

Source

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

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

مصطلح رئيسي: مجموعة الخطوط مقابل الخط الطباعي: يُشار إلى الخط الطباعي باسم مجموعته بالإضافة إلى وجه الخط. يشير Helvetica Bold إلى الخط الطباعي الغامق المحدّد، بينما يشير Helvetica بشكل عام إلى مجموعة كاملة من أكثر من 8 خطوط طباعية (عادي، غامق، مائل، إلخ). باستخدام CSS @font-face، ستتعامل مع المحارف، على الرغم من أنّك تحتاج إلى كتابة font-family لاستخدامها.

كيفية تغيير حجم الخطوط باستخدام 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";
}

تحذير: إذا لم يكن العنوان الثاني في العرض التوضيحي أعلاه أكبر من العنوان الأول، يعني ذلك أنّ متصفّحك لا يتيح استخدام size-adjust.

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

في ملف gif التالي، شاهد الأمثلة على اليسار وكيف يوجد تحول عند تغيير الخط. هذا مجرد مثال صغير مع عنصر عنوان واحد والمشكلة ملحوظة للغاية.

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

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

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

من خلال وضع 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: الهدف البعيد

Consider the following snippet which adjusts a locally available font to size match a remote src custom font. الخط المخصص عن بُعد هو الهدف للمعايرة، ربما خط العلامة التجارية:

@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 المحلي تحسّبًا لتحميل خط مخصّص، من أجل التبديل بسلاسة.

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

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

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

تحذير: ترتيب font-family مهم جدًا. فهو المكان الذي يتم فيه تحديد الترتيب والأولوية، لذا تأكَّد من وضع الخط الذي تريده أكثر في البداية. بالإضافة إلى ذلك، قد لا يتوفّر الخط 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

• 87
• 87
• 89
• 

Source

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

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

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

descent-override

Browser Support

• 87
• 87
• 89
• 

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

• 87
• 87
• 89
• 

Source

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

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

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

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

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

تحذير: إذا لم تظهر أي اختلافات في أي من العروض التوضيحية أعلاه، يعني ذلك أنّ متصفّحك لا يتيح عمليات الإلغاء.

الخاتمة

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

• مواصفات المستوى 5 من CSS Fonts
• تعديل الحجم على MDN
• أداة إنشاء @font-face لتبديل الخطوط بسلاسة
• متغيّرات التصميم التراكمية (CLS) على web.dev
• طريقة جديدة للحدّ من تأثير تحميل الخطوط: واصفات خطوط CSS