لمطابقة الحجم الظاهري للخط الاحتياطي مع خط ويب، وحّد ارتفاعات x باستخدام CSS font-size-adjust، أو غيّر مقياس وجه احتياطي محدد باستخدام size-adjust. يشرح هذا الدليل كيفية اختيار التعديل وحسابه واختباره في متصفح على جهاز Mac.

اختر المقياس الذي يلائم نصك

بالنسبة إلى النص الإنجليزي العادي، ابدأ بارتفاع x: ارتفاع الأحرف الصغيرة نسبةً إلى حجم الخط. قد يختلف ارتفاع x بين خطين مضبوطين على 16px، لذا لا تبدو الأحجام المتساوية في CSS متساوية بالضرورة. توثّق MDN الخاصية font-size-adjust تحديدًا لمعادلة مقياس خط مختار بين الخطوط المستخدمة في عرض النص. MDN: font-size-adjust

اختر المقياس قبل تغيير القيم. عادةً ما تشير الفقرات التي تكثر فيها الأحرف الصغيرة إلى ex-height؛ وقد تتطلب التسميات المكتوبة بأحرف كبيرة cap-height. يضبط الخيار ch-width عرض التقدّم للحرف صفر، وهو أمر يختلف عن مطابقة ارتفاع الأحرف الصغيرة. لا يضمن أي من هذه الخيارات تساوي عرض كل كلمة. MDN: قيم font-size-adjust

لهذه المهمة، استخدم صفحة اصطناعية تتضمن عنوانًا مثل Sample collection، وتسمية مثل Tile 024، وفقرة مثل Amber tiles sit beside a blue circle. Each tile has a short label. الهدف هو جعل الأحرف الصغيرة في الخط الاحتياطي تبدو بحجم مماثل، مع التحقق من أن هذه العناصر ما زالت تتسع.

مهمتك المباشرة ابدأ بـ ما ينبغي التحقق منه بشكل منفصل
معادلة حجم الأحرف الصغيرة عبر مجموعة خطوط font-size-adjust مع نسبة ارتفاع x مستهدفة التفاف النص وتباعد الأسطر
ضبط وجه احتياطي معروف واحد اسم مستعار للخط الاحتياطي مع size-adjust توفر هذا الوجه المحلي بعينه
تقليل الاختلافات في التخطيط الرأسي تجاوزات مقاييس الخط بعد مطابقة الحجم خطوط الأساس وارتفاع الفقرة

تختلف آليتا الضبط الأوليان في نطاق تطبيقهما: تُطبّق font-size-adjust على النص، بينما توضع size-adjust داخل قاعدة @font-face وتغيّر مقياس مخططات ذلك الوجه ومقاييسه. MDN: font-size-adjust، MDN: size-adjust

أعدّ مقارنة موثوقة على جهاز Mac

استخدم صفحة معاينة يمكنك تعديل ورقة الأنماط فيها. تشير الأمثلة أدناه إلى خط الويب الموجود Sample Web؛ استبدل اسمه باسم عائلة الخط الفعلي في CSS. هذه مقاطع دمج تفترض أن خط الويب معرّف مسبقًا وأن عناصر العينة موجودة.

في Chrome على جهاز Mac، انقر بزر الفأرة الأيمن على الفقرة التجريبية واختر Inspect. أو اضغط Command + Option + C وحددها. يفتح Chrome لوحة Elements، حيث تعرض Styles قواعد CSS المطبقة. Chrome: فتح أدوات مطوري Chrome

افتح Computed، وانتقل إلى Rendered Fonts، وتحقق من الخط الذي يرسم العينة فعليًا. لا تكفي قائمة العائلات المعرّفة لإثبات أن الخط المفضّل هو المستخدم في العرض. يوضح توثيق Chrome استخدام هذا القسم للتمييز بين موارد الخطوط المحلية وتلك المحمّلة من الشبكة. Chrome: تطبيق تأثيرات أخرى

أبقِ إطار العرض والتكبير ووزن الخط ونمطه وتباعد الأحرف وعرض الحاوية ثابتة أثناء المقارنة. افحص أولًا حالة خط الويب. ثم غيّر font-family للفقرة مؤقتًا إلى الخط الاحتياطي الذي تريد استخدامه، مثل Arial, sans-serif، وافحص الخط المعروض مرة أخرى.

استخدم Styles لتعديل التصريحات ومربعات الاختيار الخاصة بها لتبديل التعديلات. يتيح لك ذلك مقارنة الفقرة نفسها من دون تغيير صياغتها أو تخطيطها. Chrome: مرجع ميزات CSS

عند أخذ القياسات باستخدام JavaScript، انتظر تحميل الخط المعني بدلًا من استخدام تأخير اعتباطي. يمكن لـ document.fonts.load() طلب وجه محدد؛ وتُحلّ document.fonts.ready بعد اكتمال تحميل الخطوط في المستند وعمليات التخطيط المرتبطة بها. ولا يغني أي منهما عن التحقق من الخط المعروض فعليًا. MDN: FontFaceSet.load()، MDN: FontFaceSet.ready

احسب نسبة ارتفاع x المستهدفة وطبّقها

القيمة المستهدفة لـ font-size-adjust الرقمية هي نسبة، وليست نسبة تكبير مئوية. اقسم ارتفاع x لخط الويب على وحداته لكل em، متى توفرت هذه المقاييس للوجه المحدد. عندئذ يضبط المتصفح كل خط محدد إلى تلك النسبة من حجم الخط المعلن. W3C: CSS Fonts Module Level 5

تأمل هذه المدخلات التوضيحية الصريحة، وهي ليست قياسات لأي خط مسمّى:

المقياس خط الويب المستهدف الخط الاحتياطي
الوحدات لكل em 1,000 1,000
ارتفاع x بوحدات الخط 520 470
نسبة ارتفاع x 0.52 0.47

عند حجم معلن قدره 16px، يكون ارتفاع x المستهدف 16 × 0.52 = 8.32px. للوصول إلى هذا الارتفاع، يحتاج الخط الاحتياطي إلى عامل تحجيم قدره 0.52 ÷ 0.47، أي نحو 1.106383. ويصبح حجم عرضه بعد التعديل نحو 17.7021px. توضح هذه الحسابات معادلة المواصفة؛ لكنها لا تتنبأ بالتفاف النص الفعلي.

في أسلوب استخدام الخاصية، طبّق النسبة المستهدفة على النص. يفترض مقطع CSS هذا أن الفقرة التجريبية تحمل الفئة sample-copy:

.sample-copy {
  font-family: "Sample Web", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  font-size-adjust: 0.52;
}

هنا، تنتمي 0.52 إلى خط الويب التوضيحي. استبدلها بنسبة الوجه المستهدف. كما أن إدخال قيمة غير دقيقة يغيّر حجم عرض الخط المفضّل؛ فالخاصية تنطبق على كل خط محدد، بما في ذلك خط الويب. W3C: CSS Fonts Module Level 5

إذا لم تتوفر لديك نسبة موثوقة، توثّق W3C طريقة للمعايرة البصرية: قارن عينتين من الخط والحجم والمحتوى نفسيهما، مع تعطيل الضبط في إحداهما واستخدام قيمة رقمية تجريبية له في الأخرى. ابدأ من 0.5 ونقّح القيمة إلى أن تتطابقا. استخدم عينات مكبّرة ومعزولة للمعايرة، ثم عُد إلى حجم القراءة العادي لتقييم النتيجة. اعتبر القيمة المستخلصة بصريًا تقريبية. W3C: CSS Fonts Module Level 5

تأخذ الكلمة المفتاحية from-font قيمتها المستهدفة من أول خط متاح. إذا لم يتوفر خط الويب المقصود، فقد يكون خط آخر هو مصدر القيمة المستهدفة. إذا كان يجب أن يطابق خط احتياطي خط ويب معروفًا حتى عند تعذّر تحميله، فاستخدم نسبة رقمية محددة. MDN: قيم font-size-adjust

استخدم اسمًا مستعارًا للخط الاحتياطي للتحكم في وجه واحد

اختر size-adjust عندما تريد ربط التحجيم بوجه احتياطي بعينه. بالنسبة إلى الزوج التوضيحي أعلاه، حوّل عامل التحجيم إلى نسبة مئوية: 100 × 0.52 ÷ 0.47 = 110.6383%. يغيّر هذا الواصف مقياس تقدّم المحارف ومخططاتها والمقاييس المرتبطة بها أيضًا. MDN: size-adjust

يفترض مقطع الدمج البديل هذا أن Arial Regular متاح محليًا وأن خط الويب المستهدف معرّف مسبقًا. النسبة توضيحية، لذا قِس زوج الخطوط الفعلي قبل اعتمادها:

@font-face {
  font-family: "Sample Fallback";
  src: local("Arial"), local("ArialMT");
  font-weight: 400;
  font-style: normal;
  size-adjust: 110.6383%;
}

.sample-copy {
  font-family: "Sample Web", "Sample Fallback", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  font-size-adjust: none;
}

يجعل الاسم المستعار الاصطناعي التعديل خاصًا بهذه المجموعة. تحدد مصادر local() وجه خط بعينه؛ ولا تختار خطًا عامًا اعتباطيًا من خطوط النظام sans-serif. توصي مواصفة CSS Fonts بتوفير الاسمين الكامل واسم PostScript للمطابقة عبر المنصات. إذا لم يتوفر أي من المصدرين، ينتقل المتصفح إلى بقية قائمة العائلات. W3C: CSS Fonts Module Level 4

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

شخّص التفاف النص واختلافات خط الأساس كلًا على حدة

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

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

إذا ظل خط الأساس أو ارتفاع الكتلة مختلفًا، فتحقّق من ascent-override وdescent-override وline-gap-override. تتحكم هذه في مقاييس التخطيط بدلًا من توفير هدف آخر للحجم المرئي. على سبيل المثال، الصعود هو المقياس الواقع فوق خط الأساس والمستخدم في تخطيط مربعات الأسطر. استخرج التجاوزات من زوج الخطوط الفعلي بدلًا من نسخ نسب مئوية غير مرتبطة به. MDN: ascent-override

للحصول على نقطة بداية مولّدة، تقبل createFontStack الموثّقة من Capsize المقاييس بترتيب العائلات المفضّلة، وتُرجع كلًا من fontFamily وfontFaces للخط الاحتياطي. استخدم الناتجين معًا. كما يوفر توثيقها @capsizecss/metrics للخطوط المضمّنة و@capsizecss/unpack لاستخراج المقاييس من ملف مخصص. تظل التصريحات المولّدة بحاجة إلى اختبارها على تخطيط عينتك. توثيق Capsize

حافظ على تخطيط المتصفح وتشكيل النص

قد تساعد قياسات Canvas في مقارنة السلاسل النصية، لكنها تجيب عن أسئلة أضيق نطاقًا. تعرّف WHATWG measureText().width بأنه عرض التقدّم، بينما تصف قياسات صندوق الإحاطة الفعلية النص المرسوم. يجهز Canvas سطرًا افتراضيًا بعرض لا نهائي، لذلك لا يُعد عرضه قياسًا لفقرة DOM ملتفة. WHATWG: HTML Standard، Canvas

أبقِ الكلمات والجمل كاملة في الاختبار. تجنب إعادة بناء النص على هيئة محارف موضوعة منفردة، أو افتراض أن جمع عروض المحارف يعيد إنتاج سلسلة نصية مشكلة. تحدد CSS الشروط التي تضبط التشكيل عبر الحدود داخل السطر، بما في ذلك الحدود التي تتغير عندها المسافات أو المحاذاة. حافظ على بنية المكوّن المعتادة عند التحقق من خطه الاحتياطي. W3C: CSS Text Module Level 3

تحقّق من دعم المتصفح وأكمل المقارنة

تدرج MDN الخاصية الأساسية font-size-adjust ضمن Baseline 2024، وتذكر أن size-adjust متاحة على نطاق واسع منذ سبتمبر 2023. لكن ذلك لا يثبت دعم كل مقياس أو كلمة مفتاحية أحدث في متصفح أقدم. راجع جداول التوافق للصياغة التي تستخدمها فعليًا. MDN: font-size-adjust، MDN: size-adjust

عندما لا يتوفر شكل متقدم من المقياس، استخدم معادلة ارتفاع x الرقمية المدعومة إذا ناسبت المهمة، أو واصفًا مدعومًا خاصًا بالخط الاحتياطي. وإذا لم يكن التعديل المطلوب مدعومًا مطلقًا، فأبقِ على خط احتياطي قريب بصريًا وتحقق من التخطيط من دون تعديل في ذلك المتصفح.

أنهِ العمل بتكرار المقارنة لكل وزن ونمط تستخدمهما، ثم في متصفحات Mac التي تريد دعمها. تحقّق من الوجه المعروض في كل مرة. أبقِ التعديل المختار فقط عندما يكون الحجم الظاهري والتفاف النص والتباعد مقبولًا في العنوان والتسمية والفقرة الاصطناعية، في حالتي خط الويب والخط الاحتياطي.

المصادر