تنظیم اندازه CSS برای @font-face

اکنون می‌توانید مقیاس قلم وب را هنگام بار شدن تنظیم کنید تا اندازه‌های قلم سند را نرمال‌سازی کنید و از تغییر چیدمان هنگام جابه‌جایی بین قلم‌ها جلوگیری کنید

Adam Argyle

نسخه نمایشی زیر را درنظر بگیرید که در آن font-size به‌طور ثابت 64px است و تنها تفاوت بین هریک از این سرصفحه‌ها font-family است. نمونه‌های سمت راست تنظیم نشده‌اند و اندازه نهایی ناهماهنگی دارند. نمونه‌های سمت چپ از size-adjust استفاده می‌کنند تا مطمئن شوند 64px اندازه نهایی ثابت است.

در این مثال، از ابزارهای اشکال‌زدایی طرح‌بندی شبکه‌ای CSS در Chrome DevTools برای نشان دادن ارتفاع‌ها استفاده شده است.

این پست توصیف‌کننده جدید CSS font-face به‌نام size-adjust را بررسی می‌کند. همچنین چند روش برای اصلاح و عادی‌سازی اندازه‌های قلم برای تجربه کاربری روان‌تر، سیستم‌های طراحی یکپارچه، و چیدمان صفحه قابل‌پیش‌بینی‌تر نشان می‌دهد. یکی از موارد استفاده مهم، بهینه‌سازی پردازش قلم وب برای جلوگیری از تغییر چیدمان تجمعی (CLS) است.

Browser Support

• 92
• 92
• 92
• 17

Source

در اینجا نسخه نمایشی تعاملی از فضای مسئله ارائه شده است. بااستفاده از منو کرکره‌ای، طرح حروف را تغییر دهید و مشاهده کنید:

1. تفاوت‌های ارتفاع در نتایج.
2. تغییرات محتوایی که ازنظر بصری آزاردهنده است.
3. جابه‌جا کردن نواحی هدف تعاملی (منو کرکره‌ای جابه‌جا می‌شود!).

اصطلاح کلیدی: خانواده قلم درمقابل طرح حروف: طرح حروف با نام خانواده آن به‌علاوه قلم آن شناخته می‌شود. Helvetica Bold به طرح حروف سیاه خاص اشاره دارد، درحالی‌که Helvetica به‌طور کلی به کل خانواده بیش‌از ۸ طرح حروف (عادی، سیاه، ایتالیک، و غیره) اشاره دارد. با CSS @font-face با طرح حروف سروکار خواهید داشت، هرچند برای استفاده از آن‌ها باید font-family را بنویسید.

نحوه مقیاس‌بندی قلم‌ها با size-adjust

مقدمه‌ای بر نحو:

@font-face {
  font-family: "Adjusted Typeface";
  size-adjust: 150%;
  src: url(some/path/to/typeface.woff2) format('woff2');
}

1. طرح حروف سفارشی به‌نام Adjusted Typeface ایجاد می‌کند.
2. از size-adjust برای افزایش مقیاس هر نویسه به ۱۵۰٪ اندازه پیش‌فرض آن استفاده می‌کند.
3. فقط بر همان طرح حروف واردشده تأثیر می‌گذارد.

از طرح حروف سفارشی بالا به این صورت استفاده کنید:

h1 {
  font-family: "Adjusted Typeface";
}

هشدار: اگر عنوان دوم در نسخه نمایشی بالا بزرگ‌تر از عنوان اول نیست، مرورگرتان از size-adjust پشتیبانی نمی‌کند.

کاهش CLS با جابه‌جایی یکپارچه قلم

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

نمونه سمت راست جابه‌جایی چیدمان دارد، اما نمونه سمت چپ ندارد.

برای بهبود پرداز قلم، یک تکنیک عالی تعویض قلم است. قلم سیستمی با بارگیری سریع را پرداز بزنید تا ابتدا محتوا نشان داده شود، سپس وقتی بارگیری قلم وب تمام شد، آن را با قلم وب جابه‌جا کنید. این کار بهترین نتیجه را برای شما به‌همراه دارد: محتوا در اسرع وقت قابل‌مشاهده است و صفحه‌ای با سبک زیبا دریافت می‌کنید بدون اینکه زمان کاربر برای دسترسی به محتوا را فدا کنید. اما مشکل این است که گاهی اوقات وقتی قلم وب بار می‌شود، کل صفحه را جابه‌جا می‌کند چون با اندازه ارتفاع چارگوش کمی متفاوت ارائه می‌شود.

محتوای بیشتر به‌معنای تغییر چیدمان بالقوه بیشتر هنگام تعویض قلم است

با قرار دادن size-adjust در قانون @font-face، تنظیم سراسری نویسه‌نگاشت برای قلم تنظیم می‌شود. زمان‌بندی درست این کار منجر به حداقل تغییر بصری و جابه‌جایی یکپارچه می‌شود. برای ایجاد جابه‌جایی یکپارچه، به‌صورت دستی تنظیم کنید یا این ماشین‌حساب تنظیم اندازه Malte Ubl را امتحان کنید.

قلم وب Google را انتخاب کنید، قطعه @font-face ازپیش تنظیم‌شده را دریافت کنید.

در ابتدای این پست، رفع مشکل اندازه قلم با آزمون و خطا انجام شد. size-adjust در کد منبع جابه‌جا شد تا همان سرصفحه در Cookie و Arial همان 64px را که Press Start 2P به‌طور طبیعی ارائه می‌کرد ارائه دهد. دو قلم را با اندازه قلم هدف تراز کردم.

@font-face {
  font-family: 'Adjusted Arial';
  size-adjust: 86%;
  src: local(Arial);
}

@font-face {
  font-family: 'Cookie';
  size-adjust: 90.25%;
  src: url(...woff2) format('woff2');
}

درحال واسنجی قلم‌ها

شما به‌عنوان نویسنده، هدف(های) واسنجی را برای عادی‌سازی مقیاس قلم تعیین می‌کنید. می‌توانید از Times،‏ Arial، یا قلم سیستم استفاده کنید، سپس قلم‌های سفارشی را برای مطابقت تنظیم کنید. یا ممکن است قلم‌های محلی را طوری تنظیم کنید که با آنچه بارگیری می‌کنید مطابقت داشته باشد.

راهبردهای واسنجی size-adjust:

1. هدف از راه دور:
   قلم‌های محلی را با قلم‌های بارگیری‌شده تطبیق دهید.
2. هدف محلی:
   قلم‌های بارگیری‌شده را با قلم‌های هدف محلی تطبیق می‌دهد.

مثال ۱: هدف ازراه‌دور

قطعه کد زیر را درنظر بگیرید که اندازه قلم موجود در دستگاه را با قلم سفارشی src ازراه‌دور مطابقت می‌دهد. یک قلم سفارشی ازراه‌دور هدف واسنجی است، شاید قلم نمانام:

@font-face {
  font-family: "Adjusted Regular Arial For Brand";
  src: local(Arial);
  size-adjust: 90%;
}

@font-face {
  font-family: "Rad Brand";
  src: url(some/path/to/a.woff2) format('woff2');
}

html {
  font-family: "Rad Brand", "Adjusted Regular Arial For Brand";
}

در این مثال، قلم محلی Arial در انتظار بار شدن قلم سفارشی تنظیم می‌شود تا جابه‌جایی یکپارچه انجام شود.

این استراتژی این مزیت را دارد که به طراحان و توسعه‌دهندگان قلم یکسانی برای اندازه‌بندی و تایپوگرافی ارائه می‌دهد. نمانام هدف واسنجی است. این خبر خوبی برای سیستم‌های طراحی است.

داشتن طرح حروف نمانام به‌عنوان هدف نیز نحوه عملکرد ماشین حساب مالت است. یک Google Font انتخاب کنید تا محاسبه کند چگونه Arial را تنظیم کند تا به‌طور یکپارچه با آن جابه‌جا شود. در اینجا نمونه‌ای از Roboto CSS از ماشین‌حساب آورده شده است، که در آن Arial بارگیری شده و «Roboto-fallback» نام‌گذاری شده است:

@font-face {
    font-family: "Roboto-fallback";
    size-adjust: 100.06%;
    src: local("Arial");
}

هشدار: ترتیب font-family بسیار مهم است. اینجا جایی است که ترتیب و اولویت اعمال می‌شود. مطمئن شوید طرح حروفی که بیشتر از همه می‌خواهید، اول باشد. علاوه‌براین، ممکن است local(Arial) در همه دستگاه‌های کاربر دردسترس نباشد، بنابراین مهم است که چندین گزینه جایگزین در خانواده قلم ارائه شود.

برای ایجاد تنظیم کاملاً چندسکویی، مثال زیر را ببینید که ۲ قلم جایگزین محلی تنظیم‌شده را در انتظار قلم نمانام ارائه می‌دهد.

@font-face {
    font-family: "Roboto-fallback-1";
    size-adjust: 100.06%;
    src: local("Arial");
}

@font-face {
    font-family: "Roboto-fallback-2";
    size-adjust: 99.94%;
    src: local("Arimo");
}

@font-face {
  font-family: "Roboto Regular";
  src: url(some/path/to/roboto.woff2) format('woff2');
}

html {
  font-family: "Roboto Regular", "Roboto-fallback-1", "Roboto-fallback-2";
}

مثال ۲: هدف محلی

قطعه کد زیر را درنظر بگیرید که قلم سفارشی نمانام را برای مطابقت با Arial تنظیم می‌کند:

@font-face {
  font-family: "Rad Brand - Adjusted For Arial";
  src: url(some/path/to/a.woff2) format('woff2');
  size-adjust: 110%;
}

html {
  font-family: "Rad Brand - Adjusted For Arial", Arial;
}

این راهبرد این مزیت را دارد که بدون هیچ‌گونه تنظیمی رندر می‌کند، سپس هر قلم ورودی را برای مطابقت تنظیم می‌کند.

تنظیم دقیق‌تر با ascent-override، descent-override، و line-gap-override

اگر مقیاس‌بندی عمومی نویسه‌نگاشت‌ها برای طراحی یا استراتژی‌های بارگیری شما کافی نیست، در اینجا چند گزینه تنظیم دقیق‌تر وجود دارد که همراه با size-adjust کار می‌کنند. ویژگی‌های ascent-override، descent-override، و line-gap-override درحال‌حاضر در Chromium نسخه ۸۷ به بالا و Firefox نسخه ۸۹ به بالا پیاده‌سازی شده‌اند.

ascent-override

Browser Support

• 87
• 87
• 89
• 

Source

توصیف‌کننده ascent-override ارتفاع بالای خط مبنای قلم را تعریف می‌کند.

@font-face {
  font-family: "Ascent Adjusted Arial Bold";
  src: local(Arial Bold);
  ascent-override: 71%;
}

عنوان قرمز (تنظیم‌نشده) در بالای حروف بزرگ A و O فاصله دارد، درحالی‌که عنوان آبی تنظیم شده است تا ارتفاع حروف بزرگ آن به‌خوبی در جعبه مرزی کلی جا شود.

descent-override

Browser Support

• 87
• 87
• 89
• 

Source

توصیف‌کننده descent-override ارتفاع زیر خط مبنای قلم را تعریف می‌کند.

@font-face {
  font-family: "Ascent Adjusted Arial Bold";
  src: local(Arial Bold);
  descent-override: 0%;
}

عنوان قرمز (تنظیم‌نشده) در زیر خطوط مبنای D و O خود فضا دارد، درحالی‌که عنوان آبی تنظیم شده است تا حروف آن به‌خوبی روی خط مبنا قرار گیرند.

line-gap-override

Browser Support

• 87
• 87
• 89
• 

Source

توصیف‌گر line-gap-override سنجه فاصله خطوط را برای قلم تعریف می‌کند. این فاصله خطوط توصیه‌شده قلم یا فاصله خارجی است.

@font-face {
  font-family: "Line Gap Adjusted Arial";
  src: local(Arial);
  line-gap-override: 50%;
}

عنوان قرمز (تنظیم‌نشده) هیچ line-gap-override ندارد، درواقع روی 0% است، درحالی‌که عنوان آبی ۵۰٪ افزایش یافته است و به‌همین ترتیب فضایی در بالا و پایین حروف ایجاد شده است.

درحال سرهم کردن

هرکدام از این لغو کردن‌ها روشی اضافی برای چیدن بخش‌های اضافی از چارگوش محدودکننده نوشتار ایمن وب ارائه می‌دهند. می‌توانید چارگوش نوشتاری را برای ارائه دقیق سفارشی‌سازی کنید.

هشدار: اگر هیچ‌کدام از نسخه‌های نمایشی بالا تفاوتی را نشان نمی‌دهند، مرورگرتان از لغو پشتیبانی نمی‌کند.

نتیجه‌گیری

ویژگی CSS @font-face size-adjust روشی هیجان‌انگیز برای سفارشی‌سازی جعبه مرزی نوشتار در چیدمان‌های وب است تا تجربه جابه‌جایی قلم بهبود یابد و درنتیجه از جابه‌جایی چیدمان برای کاربران جلوگیری شود. برای کسب اطلاعات بیشتر، این منابع را بررسی کنید:

• CSS Fonts Level 5 Spec
• تنظیم اندازه در MDN
• تولیدکننده یکپارچه جابه‌جایی font-face@
• تغییر چیدمان تجمعی (CLS) در web.dev
• روش جدیدی برای کاهش تأثیر بار کردن قلم: توصیف‌کننده‌های قلم CSS