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

ملخّص

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

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

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

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

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

• Fontaine: هي مكتبة تنشئ تلقائيًا عناصر احتياطية للخطوط وتُدرِجها، وتستخدم هذه العناصر عمليات إلغاء مقاييس الخطوط.
• يحتوي هذا المستودع على عمليات إلغاء مقياس الخط لجميع الخطوط التي تستضيفها 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 من البيانات الوصفية لخط الويب. يوضّح القسم التالي من هذه المقالة كيفية الحصول على هذه القيم.

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

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

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

• 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.

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

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

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

بالنسبة إلى الغالبية العظمى من الخطوط (على سبيل المثال، %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 بمفرده في تحسين الخطوط الاحتياطية، ففي معظم الحالات، يجب تضييق خط احتياطي أو توسيعه قليلاً (بدلاً من توسيعه أو تضييقه بشكلٍ نسبي) لمطابقة خط ويب. ومع ذلك، فإنّ الجمع بين 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 وعمليات إلغاء مقاييس الخطوط.