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

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

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

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

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

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";
}

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

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

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

من خلال وضع size-adjust في قاعدة @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: استهداف محلي

ضع في اعتبارك المقتطف التالي الذي يضبط الخط المخصص للعلامة التجارية ليلائم الخطوط العريضة:

@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

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

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

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

descent-override

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

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

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

line-gap-override

يحدّد العنصر الوصفي 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 هي طريقة مثيرة لتخصيص مربّع الحدود للنص في تنسيقات الويب لتحسين تجربة تبديل الخطوط وبالتالي تجنُّب تغيير التنسيق للمستخدمين. لمزيد من المعلومات، تحقق من هذه الموارد:

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

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