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

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

Adam Argyle

يمكنك الاطّلاع على العرض التوضيحي التالي حيث يكون 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";
}

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

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

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

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

في بداية هذه المشاركة، تم إصلاح مشكلة حجم الخط عن طريق التجربة والخطأ. تم تعديل 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 الكبيرين، بينما تم تعديل العنوان الأزرق بحيث يكون capheight مناسبًا لمربّع المحيط العام.

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

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

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