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

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

آدام آرگایل

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

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

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

Browser Support

  • کروم: ۹۲.
  • لبه: ۹۲.
  • فایرفاکس: ۹۲.
  • سافاری: ۱۷.

Source

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

  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 ، اندازه هر گلیف را تا ۱۵۰٪ اندازه پیش‌فرض آن افزایش می‌دهد.
  3. فقط روی یک فونت وارد شده تأثیر می‌گذارد.

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

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

کاهش CLS با تعویض فونت یکپارچه

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

مثال سمت چپ دارای قابلیت تغییر طرح‌بندی است، در حالی که مثال سمت راست این قابلیت را ندارد.

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

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

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

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

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

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

@font-face {
    font-family: "Roboto-fallback";
    size-adjust: 100.06%;
    src: 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 87+ و Firefox 89+ پیاده‌سازی شده‌اند.

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

ascent-override

Browser Support

  • کروم: ۸۷.
  • لبه: ۸۷.
  • فایرفاکس: ۸۹.
  • سافاری: پشتیبانی نمی‌شود.

Source

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

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

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

descent-override

Browser Support

  • کروم: ۸۷.
  • لبه: ۸۷.
  • فایرفاکس: ۸۹.
  • سافاری: پشتیبانی نمی‌شود.

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

  • کروم: ۸۷.
  • لبه: ۸۷.
  • فایرفاکس: ۸۹.
  • سافاری: پشتیبانی نمی‌شود.

Source

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

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

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

همه چیز را کنار هم قرار دادن

هر یک از این overrideها یک روش اضافی برای حذف موارد اضافی از کادر محدودکننده متن امن وب ارائه می‌دهند. می‌توانید کادر متن را برای نمایش دقیق تنظیم کنید.

نتیجه‌گیری

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

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