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

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

Adam Argyle

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

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

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

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

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

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

ضع في الاعتبار المقتطف التالي الذي يضبط أحد الخطوط المتوفرة محليًا ويطابق حجم خط 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 لاستقبال خط مخصص تم تحميله لإجراء تبديل سلس.

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

إن وجود خط طباعي للعلامة التجارية كهدف هو أيضًا طريقة عمل حاسبة مالتي. اختر خطًا من Google وسيتم حساب كيفية ضبط Arial للتبديل بسلاسة معه. في ما يلي مثال على ترميز Roboto CSS من الآلة الحاسبة، حيث يتم تحميل 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 والإصدارات الأحدث، وكذلك في Firefox 89 والإصدارات الأحدث.

المقص أعلاه وتفجير الكلمة، مع توضيح المناطق التي يمكن قصها في الميزات

ascent-override

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

  • 87
  • 87
  • 89
  • x

المصدر

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

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

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

descent-override

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

  • 87
  • 87
  • 89
  • x

المصدر

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

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

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

line-gap-override

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

  • 87
  • 87
  • 89
  • x

المصدر

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

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

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

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

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

الخلاصة

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

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