CSS font-size-adjust اکنون در Baseline است

تاریخ انتشار: ۲۳ جولای ۲۰۲۴

ویژگی CSS font-size-adjust امروز در کروم قرار می گیرد و بخشی از Baseline Newly Available می شود. این ویژگی می تواند به جلوگیری از تغییر طرح شما در هنگام بارگیری فونت های بازگشتی کمک کند و از خوانایی فونت های بازگشتی در اندازه های کوچکتر اطمینان حاصل کند. ویژگی font-size-adjust بخشی از Interop 2024 است، بنابراین این یک پیروزی دیگر برای تلاش برای بهبود قابلیت همکاری پلت فرم وب است.

مشکل

وقتی دو فونت را با اندازه یکسان مقایسه می کنید، بسته به شکل و اندازه حروف، متن نمایش داده شده می تواند فضای بسیار متفاوتی را اشغال کند. به عنوان مثال، دمو زیر متنی را در Verdana و Arial نشان می‌دهد که هر دو روی 16 پیکسل تنظیم شده‌اند.

متن در 16 پیکسل در Verdana و Arial نمایش داده می شود.

تفاوت در اندازه به دلیل این واقعیت است که مقدار ابعاد ، ارتفاع حروف کوچک در مقایسه با حروف بزرگ در یک فونت، بین فونت‌ها متفاوت است.

هنگامی که یک فونت با یک مقدار جنبه متفاوت به عنوان یک بازگشت استفاده می شود، می تواند دو مشکل ایجاد کند. ابتدا مقدار فضای اشغال شده توسط فونت تغییر می کند. ثانیاً، انتخاب فونت بازگشتی شما ممکن است نسبت به فونتی که ابتدا مشخص شده کمتر خوانا باشد، به خصوص در اندازه های کوچک. این به این دلیل است که ارتفاع نسبی حروف کوچک به حروف بزرگ یک عامل کلیدی در خوانایی است.

چگونه font-size-adjust کمک می کند

ویژگی font-size-adjust به شما این امکان را می دهد که فونت بازگشتی خود را برای مطابقت بهتر با فونت اول تنظیم کنید. مثال زیر دو فونت نشان داده شده قبلی را نشان می دهد، این بار فونت دوم مطابق با فونت اول تنظیم شده است.

با استفاده از font-size-adjust .

این مثال از یک مقدار واحد استفاده می‌کند، یک عدد، که فونت‌ها را با استفاده از متریک فونت پیش‌فرض ex-height تنظیم می‌کند. این نسبت ارتفاع x، ارتفاع یک x کوچک در فونت به اندازه فونت است. همچنین می توانید متریک فونت مورد استفاده را مشخص کنید. در مثال بعدی، فونت ها را با استفاده از کلمه کلیدی ch-width ، علاوه بر عدد، عادی کرده ام.

با استفاده از font-size-adjust .

برای دیدن همه مقادیر ممکن ، مستندات MDN را برای font-size-adjust ببینید.

ارزش آن را دارد که با استفاده از فونت بازگشتی خود به سایت خود نگاه کنید و ببینید که آیا کمی تغییر در font-size-adjust می تواند به خوانندگانی که از فونت بازگشتی استفاده می کنند کمک کند تا تجربه بهتری داشته باشند، به خصوص اکنون که در همه جا در دسترس است!