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

Katie Hempenius
Katie Hempenius
X

ملخّص

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

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

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

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

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

  • Fontaine: 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 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 من البيانات الوصفية لخط الويب. ويوضّح القسم التالي من هذه المقالة كيفية الحصول على هذه القيم.

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

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

لقطة شاشة لمربع الحوار "معلومات الخط" في FontForge. يعرض مربّع الحوار مقاييس الخط مثل "Typo Ascent" و"Typo Descent" و"Typo Line Gap"
استخدام FontForge لعرض البيانات الوصفية للخط

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

  • fontkit هو محرّك خطوط مخصّص لنظام Node.js. يوضّح مقتطف الرمز هذا كيفية استخدام مجموعة أدوات الخط لحساب عمليات إلغاء مقاييس الخطوط.
  • 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.

نظام التشغيل Mac Windows
Chromium تستخدم مقاييس من جدول "hhea". يتم استخدام مقاييس من جدول "typo" في حال ضبط "USE_TYPO_METRICS"، أو استخدام مقاييس من جدول "الفوز".
Firefox يتم استخدام مقاييس من جدول "typo" في حال ضبط "USE_TYPO_METRICS"، أو استخدام مقاييس من جدول "hhea". يتم استخدام مقاييس من جدول "typo" في حال ضبط "USE_TYPO_METRICS"، أو استخدام مقاييس من جدول "الفوز".
Safari تستخدم مقاييس من جدول "hhea". يتم استخدام مقاييس من جدول "typo" في حال ضبط "USE_TYPO_METRICS"، أو استخدام مقاييس من جدول "الفوز".

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

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

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

إذا كنت تستخدم خطًا يتطلّب استخدام مجموعات منفصلة من عمليات إلغاء مقاييس الخط لأجهزة 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: 50%" (تعديل الحجم): 200%

لدى 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].

رسم بياني يقارن عرض الأحرف الرسومية لـ Roboto [a-zs].
عرض الأحرف الرسومية لـ Roboto

ويُرجى العِلم بأنّ ترجيح جميع الأحرف بالتساوي سيقل على الأرجح عرض الأحرف المستخدَمة بشكل متكرر (مثل 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.