تاريخ النشر: 23 تموز (يوليو) 2024
تم طرح سمة CSS font-size-adjust في Chrome اليوم،
وأصبحت جزءًا من الإصدار الأساسي الجديد. يمكن أن تساعد هذه السمة في منع
تغيير تنسيق النص عند تحميل الخطوط الاحتياطية، وضمان قراءة الخطوط الاحتياطية بحجم أصغر. يُعدّ الموقع الإلكتروني font-size-adjust
جزءًا من
Interop 2024،
وهذا إنجاز آخر يُضاف إلى الجهود المبذولة لتحسين إمكانية التشغيل التفاعلي ل منصّة الويب.
المشكلة
عند مقارنة خطَّين تم ضبطهما على الحجم نفسه، استنادًا إلى شكل الأحرف المرسومة وحجمها ، يمكن أن يشغل النص المعروض مساحة مختلفة جدًا. على سبيل المثال، يعرض العرض الترويجي التالي نصًا بخطّي Verdana وArial، وقد تم ضبطهما على 16 بكسل.
يرجع الاختلاف في الحجم إلى أنّ قيمة نسبة العرض إلى الارتفاع، أي ارتفاع الأحرف الصغيرة مقارنةً بالأحرف الكبيرة في الخط، تختلف من خط إلى آخر.
ويمكن أن يؤدي ذلك إلى حدوث مشكلتَين عند استخدام خط بقيمة مختلفة لنسبة العرض إلى الارتفاع كخط احتياطي. أولاً، سيتغير مقدار المساحة التي يشغلها الخط. ثانيًا، قد يكون الخط الاحتياطي الذي اخترته أقل وضوحًا من الخط الذي تم تحديده أولاً، خاصةً عند استخدام أحجام الخطوط الصغيرة. ويعود سبب ذلك إلى أنّ الارتفاع النسبي للحروف الصغيرة مقارنةً بالحروف الكبيرة هو عامل رئيسي في قراءة المحتوى بسهولة.
كيفية مساعدة font-size-adjust
تتيح لك سمة font-size-adjust ضبط الخط الاحتياطي لكي يتماشى بشكلٍ أفضل
مع الخط الأول. يعرض المثال التالي الخطَّين اللذَين سبق أن رأيتهما، ولكن تم تعديل الخط الثاني هذه المرة ليطابق الخط الأول.
font-size-adjust:يستخدم هذا المثال قيمة واحدة، وهي رقم، لضبط الخطوط باستخدام
مقياس الخط التلقائي ex-height. هذه هي نسبة ارتفاع الحرف x، وهو
ارتفاع الحرف x الصغير في الخط إلى حجم الخط. يمكنك أيضًا تحديد مقياس
الخط المستخدَم. في المثال التالي، تم توحيد الخطوط باستخدام الكلمة الرئيسية
ch-width، بالإضافة إلى الرقم.
font-size-adjust مع مقياس الخط ch-widthللاطّلاع على جميع القيم المحتمَلة، راجِع مستندات MDN حول font-size-adjust.
ننصحك بالاطّلاع على موقعك الإلكتروني باستخدام الخط الاحتياطي والتحقّق مما إذا كان بإمكان تعديل بسيط باستخدام font-size-adjust مساعدة القرّاء الذين يستخدمون الخط الاحتياطي في الحصول على تجربة أفضل، خاصةً أنّه متاح الآن في كل مكان.