جایگزین‌های قلم پایدار ازنظر دیداری

وقتی قلم‌های وب بار می‌شوند، اغلب جایگزین قلمی جایگزین می‌شوند که ابعاد متفاوتی دارد، حتی اگر هر دو روی یک font-size تنظیم شده باشند. این امر باعث «تغییر چیدمان» (تغییر چیدمان تجمعی) می‌شود و اگر حروف کوچک قلم جایگزین (ارتفاع x) تفاوت قابل‌توجهی با قلم ترجیحی داشته باشد، می‌تواند نوشتار را ناخوانا کند.

ویژگی font-size-adjust این مشکل را با نرمال‌سازی اندازه قلم براساس یک سنجه خاص (معمولاً ارتفاع x) حل می‌کند و تضمین می‌کند که نوشتار، صرف‌نظر از اینکه کدام قلم درحال‌حاضر فعال است، همان فضای دیداری را اشغال می‌کند.

مراحل پیاده‌سازی

۱. نسبت ابعادی قلم ترجیحی‌تان را شناسایی کنید

برای عادی‌سازی قلم‌های جایگزین، به «مقدار نسبت» (نسبت حروف کوچک به اندازه قلم) قلم اصلی‌تان نیاز دارید.

• شناسایی خودکار (توصیه‌شده): از کلیدواژه from-font استفاده کنید تا مرورگر بتواند نسبت را از قلم وب اصلی شما استخراج کند.
• محاسبه دستی: اگر مقدار خاصی را می‌دانید (مثلاً ۰٫۵۴۵ برای Verdana)، می‌توانید آن را مستقیماً برای کنترل دقیق‌تر ارائه دهید.

۲. اعمال font-size-adjust به محفظه نوشتار

این ویژگی را برای عنصر یا محتوی ولی اعمال کنید. این کار تضمین می‌کند که اگر قلم اصلی بار نشود یا درحال بار شدن باشد، قلم جایگزین به‌اندازه قلم اصلی مقیاس‌بندی شود.

.text-content {
  /* Define your font stack as usual */
  font-family: "MyWebFont", "Arial", sans-serif;
  font-size: 1rem;

  /* MANDATORY: Normalize the font size based on the primary font's x-height.
     This ensures that if 'Arial' is used as a fallback, it is scaled 
     to match the x-height of 'MyWebFont'. */
  font-size-adjust: from-font;
}

۳. (اختیاری) تنظیم برای سنجه‌های خاص

درحالی‌که x-height پیش‌فرض و رایج‌ترین است، می‌توانید با معیارهای دیگری مانند cap-height (مفید برای سرصفحه‌های تمام حروف بزرگ) یا ch-width (مفید برای قلم‌های تک‌فاصله) نرمال‌سازی کنید.

h1 {
  /* Normalize based on the height of capital letters */
  font-size-adjust: cap-height from-font;
}

۴. درستی‌سنجی پایداری دیداری

مطمئن شوید که مقدار font-size-adjust به‌درستی با بازگشت هم‌راستا باشد. می‌توانید این موضوع را با مسدود کردن موقت قلم وب یا تنظیم کردن اعلان font-family در DevTools مرورگرتان و تأیید اینکه چیدمان نوشتار ثابت می‌ماند آزمایش کنید.

راهبردهای جایگزین

در مرورگرهایی که از font-size-adjust پشتیبانی نمی‌کنند، قلم با مقیاس پیش‌فرض آن ارائه خواهد شد. این امر ممکن است باعث جابه‌جایی چیدمان یا تغییر در خوانایی درطول تعویض قلم شود.

برای کاهش این مشکل بدون font-size-adjust، می‌توانید از توصیف‌کننده‌های @font-face size-adjust، ascent-override، و descent-override برای تنظیم دستی قلم‌های بازگشتی استفاده کنید، اگرچه محاسبه این‌ها پیچیده‌تر از یک مقدار font-size-adjust است.