هنگام ترکیب خانواده‌های قلم مختلف، مثلاً هنگام درج تکه‌کدهای درون‌خطی، یا تغییر خانواده‌های قلم برای زمینه‌های مختلف، تفاوت در «ارتفاع x» (ارتفاع حروف کوچک) می‌تواند باعث شود یک قلم بسیار کوچک‌تر یا بزرگ‌تر از قلم دیگر به‌نظر برسد. این امر می‌تواند منجر به خوانایی ضعیف و تغییر چیدمان شود.
ویژگی font-size-adjust به شما امکان می‌دهد اندازه دیداری نوشتار را با تنظیم اندازه قلم براساس سنجه قلم خاصی (معمولاً ارتفاع x) نرمال‌سازی کنید.
مراحل پیاده‌سازی
- اجباری:
font-size-adjustرا برای عناصری اعمال کنید که ثبات قلم در آن‌ها حیاتی است، مانند محفظه‌هایی که از قلم‌های وب یا بلوک‌هایی با خانواده‌های قلم مختلط استفاده می‌کنند. - اجباری: از کلیدواژه
from-fontدر عناصر استفاده کنید تا اندازه قلم در عناصر تودرتو به‌طور خودکار با نسبت‌های قلم اصلی مطابقت داده شود. - اجباری: از مقدار عددی خاصی برای لغو نسبت ابعادی برای
font-size-adjust(مثلاًfont-size-adjust: 0.5) استفاده کنید تا نسبت‌ها را به‌طور مستقل نرمال‌سازی کنید، زمانی که نسبت‌های قلم برای پایه از زمینه‌های مختلفی هستند.
مثال: نرمال‌سازی خودکار ارتفاع x
استفاده از from-font قوی‌ترین رویکرد است. این ویژگی نسبت ابعادی ارتفاع x را از اولین قلم دردسترس استخراج می‌کند و آن را روی قلم‌های عناصر فرزند اعمال می‌کند.
.content-area {
font-family: "MyCustomWebFont";
/* Automatically extract and apply x-height ratio from MyCustomWebFont */
font-size-adjust: from-font;
}
.content-area span{
font-family: "MyOtherCustomWebFont"
}
مثال: مشخص کردن ارتفاع x خاص
وقتی قلمی که باید تنظیم شود فرزند قلمی نیست که اندازه براساس آن تعیین می‌شود، مقداری را برای تنظیم ارتفاع x مشخص کنید.
.theme{
font-family: Verdana, sans-serif;
}
.theme.alternate{
font-family: Times;
/* Set to the aspect ratio (x-height / font-size) of the primary font */
font-size-adjust: 0.51;
}
راهبردهای جایگزین
اجباری: در مرورگرهایی که از font-size-adjust پشتیبانی نمی‌کنند، قلم‌ها با مقدار طبیعی font-size خودشان ارائه خواهند شد. برای کاهش این مشکل، باید بااستفاده از بلوک @supports، راهبرد جایگزین معتبری برای مرورگرهای غیرپشتیبان ارائه دهید:
- از
@supports not (font-size-adjust: from-font)برای شناسایی پشتیبانیfont-size-adjustو ارائه سبک‌های جایگزین (مثلاً ارتفاع خط یا اندازه قلم اصلاح‌شده) استفاده کنید. - قلم‌هایی را انتخاب کنید که ارتفاع x آن‌ها مشابه قلم اصلی‌تان باشد.
font-sizeوline-heightخاصی را برای خانواده‌های قلم جایگزین و تودرتو اعمال کنید.
/* Feature detection for font-size-adjust */
@supports not (font-size-adjust: from-font) {
.content-area {
/* Manual adjustment for browsers without support (if needed) */
line-height: 1.6;
font-size: 1.2rem;
}
}