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

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

آدام آرگیل

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

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

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

پشتیبانی مرورگر

  • 92
  • 92
  • 92
  • 17

منبع

در اینجا یک نسخه نمایشی تعاملی از فضای مشکل وجود دارد. سعی کنید تایپ فیس را با منوی کشویی تغییر دهید و مشاهده کنید:

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

نحوه مقیاس بندی فونت ها با 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 برای افزایش مقیاس هر علامت تا 150٪ اندازه پیش فرض آنها استفاده می کند.
  3. فقط بر روی نوع تایپ وارد شده تأثیر می گذارد.

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

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

کاهش 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. هدف محلی:
    فونت های دانلود شده را بر اساس فونت های هدف محلی تنظیم کنید.

مثال 1: هدف از راه دور

قطعه زیر را در نظر بگیرید که یک فونت در دسترس محلی را مطابق با فونت سفارشی 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 با پیش بینی یک فونت سفارشی بارگذاری شده، برای تعویض یکپارچه تنظیم می شود.

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

داشتن حروف نام تجاری به عنوان هدف نیز نحوه کار ماشین حساب Malte است. یک فونت گوگل را انتخاب کنید و نحوه تنظیم Arial را برای تعویض یکپارچه با آن محاسبه می کند. در اینجا نمونه ای از Roboto CSS از ماشین حساب آورده شده است که در آن Arial بارگیری شده و به آن "Roboto-fallback" نامگذاری شده است:

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

برای ایجاد یک تنظیم کاملا متقابل پلت فرم، به مثال زیر مراجعه کنید که 2 فونت جایگزین محلی تنظیم شده را در پیش بینی یک فونت مارک ارائه می دهد.

@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";
}

مثال 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 87+ و Firefox 89+ پیاده‌سازی شده‌اند.

در بالا قیچی کنید و کلمه overrides را فشار دهید، و مناطقی را که ویژگی‌ها می‌توانند برش دهند، نشان می‌دهد

ascent-override

پشتیبانی مرورگر

  • 87
  • 87
  • 89
  • ایکس

منبع

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

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

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

descent-override

پشتیبانی مرورگر

  • 87
  • 87
  • 89
  • ایکس

منبع

توصیفگر descent-override ، ارتفاع زیر خط پایه فونت را تعریف می کند.

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

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

line-gap-override

پشتیبانی مرورگر

  • 87
  • 87
  • 89
  • ایکس

منبع

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

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

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

همه اش را بگذار کنار هم

هر یک از این موارد لغو یک راه اضافی برای حذف اضافی از جعبه محدود متن ایمن وب ارائه می دهد. شما می توانید جعبه متن را برای ارائه دقیق تنظیم کنید.

نتیجه

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

عکس کریستین استرند در Unsplash