عناصر احتياطية محسَّنة للخطوط

Katie Hempenius

ملخّص

تتناول هذه المقالة بالتفصيل الخطوط الاحتياطية وواجهات برمجة التطبيقات size-adjust وascent-override وdescent-override وline-gap-override. تتيح لك واجهات برمجة التطبيقات هذه استخدام الخطوط المحلية لإنشاء خطوط احتياطية تتطابق تقريبًا أو تمامًا مع سمات خط الويب. ويؤدي ذلك إلى تقليل أو إزالة التغيُّرات في التنسيق الناتجة عن تبديل الخطوط.

إذا كنت تفضّل عدم قراءة هذه المقالة، إليك بعض الأدوات التي يمكنك استخدامها لبدء استخدام واجهات برمجة التطبيقات هذه على الفور:

أدوات الإطار:

• ‫@next/font: بدءًا من الإصدار 13 من Next، يستخدم next/font تلقائيًا إجراءات تجاوز مقاييس الخطوط وsize-adjust لتوفير خطوط احتياطية مطابقة.
• ‫@nuxtjs/fontaine: بدءًا من الإصدار 3 من Nuxt، يمكنك استخدام nuxt/fontaine لإنشاء خطوط احتياطية مطابقة وإدراجها تلقائيًا في أوراق الأنماط التي يستخدمها تطبيق Nuxt.

الأدوات غير المستندة إلى إطار عمل:

• Fontaine: هي مكتبة تعمل تلقائيًا على إنشاء وإضافة خطوط احتياطية تستخدِم عمليات إلغاء مقاييس الخطوط.
• يحتوي هذا repo على عمليات إلغاء مقياس الخط لجميع الخطوط التي تستضيفها Google Fonts. يمكن نسخ هذه القيم ولصقها في أوراق الأنماط.

الخلفية

الخط الاحتياطي هو خط مخصّص للاستخدام عندما لا يكون الخط الأساسي محمّلاً بعد أو لا يتضمّن رموزًا ضرورية لعرض محتوى الصفحة. على سبيل المثال، يشير ملف CSS أدناه إلى أنّه يجب استخدام مجموعة الخطوط sans-serif كخط احتياطي للخط "Roboto".

font-family: "Roboto" , sans-serif;

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

خطوط احتياطية محسّنة

هناك طريقتان محتملتان لإنشاء خطوط احتياطية "محسّنة". يستخدم النهج الأبسط مقياس الخط فقط الذي يتجاوز واجهة برمجة التطبيقات. أما الطريقة الأكثر تعقيدًا (ولكنها أكثر فعالية)، فتستخدِم كلّ من واجهة برمجة التطبيقات وsize-adjust لتجاوز مقياس الخط. توضّح هذه المقالة كلا الطريقتَين.

آلية عمل عمليات إلغاء مقاييس الخطوط

مقدمة

توفّر إجراءات تجاوز مقاييس الخطوط طريقة لتجاوز ارتفاع الخط وانخفاضه وتباعد الأسطر:

• يقيس الارتفاع أقصى مسافة تمتد فيها الأحرف الرسومية للخط فوق خط الأساس.
• تقيس القيمة السفلية أقصى مسافة تمتد إليها الأحرف الرسومية للخط أسفل خط الأساس.
• مَسافة بين السطور، والتي تُعرف أيضًا باسم "المسافة البادئة"، تقيس المسافة بين أسطر النص المتتالية.

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

يتم استخدام عمليات إلغاء مقاييس الخطوط في ملف أسلوب تنسيق على النحو التالي:

body {
    font-family: Poppins, "fallback for poppins";
}

@font-face {
    font-family: "fallback for poppins";
    src: local("Times New Roman");
    ascent-override: 105%;
    descent-override: 35%;
    line-gap-override: 10%;
}

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

احتساب عمليات إلغاء مقياس الخط

تؤدي المعادلات التالية إلى إلغاء مقياس الخط لخط ويب معيّن. يجب كتابة قيم القيم المُعترَضة لمقياس الخط كنسب مئوية (على سبيل المثال، 105%) بدلاً من الأرقام العشرية.

ascent-override = ascent/unitsPerEm
descent-override = descent/unitsPerEm
line-gap-override = line-gap/unitsPerEm

على سبيل المثال، في ما يلي قيم المقاييس المُعترَضة لخط Poppins:

/*
Poppins font metrics:
ascent = 1050
descent = 350
line-gap = 100
UPM: 1000
*/

ascent-override: 105%;  /* = 1050/1000 */
descent-override: 35%;  /* = 350/1000 */
line-gap-override: 10%; /* = 100/1000 */

يتم الحصول على قيم ascent وdescent وline-gap وunitsPerEm من البيانات الوصفية لخط الويب. يوضّح القسم التالي من هذه المقالة كيفية الحصول على هذه القيم.

قراءة جداول الخطوط

تحتوي بيانات التعريف للخط (وتحديدًا جداول الخطوط) على جميع المعلومات التي ستحتاج إليها لاحتساب عمليات إلغاء مقياس الخط.

في ما يلي بعض الأدوات التي يمكنك استخدامها لقراءة بيانات التعريف للخط:

• fontkit هو محرّك خطوط تم إنشاؤه لنظام Node.js. يوضّح مقتطف الرمز البرمجي هذا كيفية استخدام fontkit لاحتساب عمليات إلغاء مقاييس الخطوط.
• Capsize هي مكتبة لتنسيقات وحجم الخطوط. توفّر Capsize واجهة برمجة تطبيقات للحصول على معلومات عن مقاييس الخطوط المختلفة.
• fontdrop.info هو موقع إلكتروني يتيح لك عرض جداول الخطوط والمعلومات الأخرى المتعلّقة بالخطوط من المتصفّح.
• Font Forge هو محرِّر خطوط شائع للكمبيوتر المكتبي. للاطّلاع على ascent وdescent وline-gap: افتح مربّع الحوار Font Info، واختَر قائمة OS/2، ثم اختَر علامة التبويب Metrics. للاطّلاع على UPM: افتح مربّع الحوار Font Info، ثم اختَر قائمة General.

التعرّف على جداول الخطوط

قد تلاحظ أنّ المفاهيم، مثل "الصعود"، تتم الإشارة إليها من خلال مقاييس متعددة، على سبيل المثال، هناك مقاييس hheaAscent وtypoAscent وwinAscent. ويعود ذلك إلى أنّ أنظمة التشغيل المختلفة تتّبع طرقًا مختلفة لعرض الخطوط: تستخدم البرامج على أجهزة OSX بشكل عام مقاييس الخطوط hhea*، في حين تستخدم البرامج على أجهزة Windows بشكل عام مقاييس الخطوط typo* (المعروفة أيضًا باسم sTypo*) أو win*.

استنادًا إلى الخط والمتصفّح ونظام التشغيل، سيتم عرض الخط باستخدام مقاييس hhea أو typo أو win.

لمزيد من المعلومات عن آلية عمل مقاييس الخطوط على جميع أنظمة التشغيل، يُرجى الاطّلاع على هذه المقالة حول المقاييس العمودية.

التوافق مع جميع الأجهزة

بالنسبة إلى الغالبية العظمى من الخطوط (على سبيل المثال، %90 تقريبًا من الخطوط المستضافة على Google Fonts)، يمكن استخدام عمليات إلغاء مقاييس الخطوط بأمان بدون معرفة نظام التشغيل الخاص بالمستخدم. بعبارة أخرى، بالنسبة إلى هذه الخطوط، تظل قيم ascent-override وdescent-override وlinegap-override متطابقة تمامًا بغض النظر عمّا إذا كانت مقاييس hhea أو typo أو win سارية. يقدّم هذا repo معلومات عن الخطوط التي ينطبق عليها هذا الإجراء والخطوط التي لا ينطبق عليها.

إذا كنت تستخدم خطًا يتطلّب استخدام مجموعات منفصلة من عمليات إلغاء مقاييس الخطوط لأجهزة OSX وWindows، لا يُنصح باستخدام عمليات إلغاء مقاييس الخطوط وsize-adjust إلا إذا كان بإمكانك تغيير أوراق الأنماط استنادًا إلى نظام التشغيل الخاص بالمستخدم.

استخدام عمليات إلغاء مقياس الخط

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

body {
  font-family: "Poppins", "fallback for Poppins", "another fallback for Poppins";
}

@font-face {
  font-family: "fallback for Poppins";
  src: local("Arial");
  ascent-override: 105%;
  descent-override: 35%;
  line-gap-override: 10%;
}

@font-face {
  font-family: "another fallback for Poppins";
  src: local("Roboto");
  ascent-override: 105%;
  descent-override: 35%;
  line-gap-override: 10%;
}

آلية عمل ميزة "تعديل الحجم"

مقدمة

يعمل وصف CSS size-adjust على تغيير عرض الأحرف الرسومية للخط وارتفاعها بشكلٍ نسبي. على سبيل المثال، يكبِّر size-adjust: 200% رموز الخط إلى ضعف حجمها الأصلي، ويصغر size-adjust: 50% رموز الخط إلى نصف حجمها الأصلي.

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

في ما يلي كيفية استخدام size-adjust في أوراق الأنماط:

@font-face {
  font-family: "fallback for poppins";
  src: local("Arial");
  size-adjust: 60.85099821%;
  ascent-override: 164.3358416%;
  descent-override: 57.51754455%;
  line-gap-override: 16.43358416%;
}

بسبب طريقة احتساب size-adjust (التي يتم شرحها في القسم التالي)، تتغيّر قيمة size-adjust (والاستبدالات ذات الصلة بمقياس الخط) استنادًا إلى الخط الاحتياطي المستخدَم:

body {
  font-family: "Poppins", "fallback for Poppins", "another fallback for Poppins";
}

@font-face {
  font-family: poppins-fallback;
  src: local("Arial");
  size-adjust: 60.85099821%;
  ascent-override: 164.3358416%;
  descent-override: 57.51754455%;
  line-gap-override: 16.43358416%;
}

@font-face {
  font-family: poppins-fallback-android;
  src: local("Roboto");
  size-adjust: 55.5193474%:
  ascent-override: 180.1173909%;
  descent-override: 63.04108683%;
  line-gap-override: 18.01173909%;
}

احتساب عمليات إلغاء مقياسَي حجم الشاشة وحجم الخط

في ما يلي معادلات احتساب size-adjust وعمليات إلغاء مقياس الخط:

size-adjust = avgCharacterWidth of web font / avgCharacterWidth of fallback font
ascent-override = web font ascent / (web font UPM * size-adjust)
descent-override = web font descent / (web font UPM * size-adjust)
line-gap-override = web font line-gap / (web font UPM * size-adjust)

يمكن قراءة معظم هذه الإدخالات (أي الارتفاع والانخفاض وفاصل السطر) مباشرةً من البيانات الوصفية لخط الويب. ومع ذلك، يجب تقريب القيمة avgCharacterWidth.

تقريب متوسط عرض الحرف

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

من الأمثلة على النهج البسيط لاحتساب avgCharacterWidth هو احتساب متوسط عرض جميع أحرف [a-z\s].

ومع ذلك، من المرجّح أن يؤدي منح كل الأحرف وزنًا متساوٍ إلى تقليل عرض الأحرف المستخدَمة بشكل متكرّر (مثل e) وزيادة عرض الأحرف المستخدَمة بشكل غير متكرّر (مثل z).

من الطرق الأكثر تعقيدًا لتحسين الدقة هي أخذ عدد مرات ظهور الأحرف في الاعتبار وحساب متوسط العرض المعدَّل حسب عدد المرات ل[a-z\s] حرفًا بدلاً من ذلك. هذه المقالة هي مرجع جيد لمعرفة معدّل تكرار الحروف ومتوسّط طول الكلمات في النصوص الإنجليزية.

اختيار نهج

لكل من الأسلوبَين الموضَّحين في هذه المقالة مزاياه وعيوبه:

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

• من ناحية أخرى، إذا كنت تريد دقة أكبر وكنت على استعداد لإجراء المزيد من العمل والاختبار، فإنّ دمج size-adjust هو منهج جيد لاستخدامه. وعند تنفيذ هذا النهج بشكل صحيح، يمكنه القضاء على تغييرات التنسيق المرتبطة بالخط بشكل فعّال.

اختيار الخطوط الاحتياطية

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

Arial هو الخط الاحتياطي المقترَح للخطوط sans-serif وTimes New Roman هو الخط الاحتياطي المقترَح للخطوط serif. ومع ذلك، لا يتوفّر أي من هذين الخطّين على Android (Roboto هو خط النظام الوحيد على Android).

يستخدِم المثال أدناه ثلاثة خطوط احتياطية لضمان تغطية الأجهزة على نطاق واسع: خط احتياطي يستهدف أجهزة Windows/Mac، وخط احتياطي يستهدف أجهزة Android، وخط احتياطي يستخدم عائلة خطوط عامة.

body {
  font-family: "Poppins", poppins-fallback, poppins-fallback-android, sans-serif;
}

/*
Poppins font metrics:
- ascent = 1050
- descent = 350
- line-gap = 100
- UPM: 1000
AvgCharWidth:
- Poppins: 538.0103768
- Arial: 884.1438804
- Roboto: 969.0502537
*/

@font-face {
  font-family: poppins-fallback;
  src: local("Arial");
  size-adjust: 60.85099821%;
  ascent-override: 164.3358416%;
  descent-override: 57.51754455%;
  line-gap-override: 16.43358416%;
}

@font-face {
  font-family: poppins-fallback-android;
  src: local("Roboto");
  size-adjust: 55.5193474%:
  ascent-override: 180.1173909%;
  descent-override: 63.04108683%;
  line-gap-override: 18.01173909%;
}

طلب الحصول على ملاحظات

يُرجى التواصل معنا إذا كانت لديك أي ملاحظات حول تجربتك في استخدام size-adjust وعمليات إلغاء مقاييس الخطوط.