با بارگیری یک فونت وب، اکنون می توانید مقیاس آن را تنظیم کنید تا اندازه فونت سند عادی شود و از تغییر طرح هنگام جابجایی بین فونت ها جلوگیری کنید.
نسخه ی نمایشی زیر را در نظر بگیرید که در آن font-size
64px
ثابت است و تنها تفاوت بین هر یک از این سرصفحه ها font-family
است. نمونه های سمت چپ تنظیم نشده اند و اندازه نهایی ناسازگاری دارند. نمونههای موجود در مورد صحیح size-adjust
استفاده میکنند تا اطمینان حاصل شود که 64px
اندازه نهایی ثابت است.
این پست یک توصیفگر چهره فونت CSS جدید به نام size-adjust
می کند. همچنین چند راه برای تصحیح و عادی سازی اندازه فونت برای تجربه کاربری روان تر، سیستم های طراحی سازگار و طرح بندی صفحه قابل پیش بینی تر را نشان می دهد. یکی از موارد مهم استفاده، بهینه سازی رندر فونت وب برای جلوگیری از تغییر طرح تجمعی (CLS) است.
در اینجا یک نسخه نمایشی تعاملی از فضای مشکل وجود دارد. سعی کنید تایپ فیس را با منوی کشویی تغییر دهید و مشاهده کنید:
- تفاوت ارتفاع در نتایج
- محتوای آزاردهنده بصری تغییر می کند.
- جابجایی مناطق هدف تعاملی (پرش کشویی به اطراف!).
نحوه مقیاس بندی فونت ها با size-adjust
مقدمه ای بر نحو:
@font-face {
font-family: "Adjusted Typeface";
size-adjust: 150%;
src: url(some/path/to/typeface.woff2) format('woff2');
}
- یک تایپ فیس سفارشی با نام
Adjusted Typeface
ایجاد می کند. -
size-adjust
برای افزایش مقیاس هر علامت تا 150٪ اندازه پیش فرض آنها استفاده می کند. - فقط بر روی نوع تایپ وارد شده تأثیر می گذارد.
از حروف سفارشی فوق به صورت زیر استفاده کنید:
h1 {
font-family: "Adjusted Typeface";
}
کاهش CLS با تعویض بدون درز فونت
در گیف زیر، نمونههای سمت چپ و نحوه تغییر فونت را مشاهده کنید. این فقط یک مثال کوچک با یک عنصر سرفصل است و موضوع بسیار قابل توجه است.
برای بهبود رندر فونت، یک تکنیک عالی ، تعویض فونت است. یک فونت سیستمی با بارگیری سریع ارائه دهید تا ابتدا محتوا نشان داده شود، سپس زمانی که فونت وب به پایان رسید آن را با یک فونت وب تعویض کنید. این بهترین هر دو دنیا را در اختیار شما قرار می دهد: محتوا در اسرع وقت قابل مشاهده است، و شما صفحه ای با استایل زیبا دریافت می کنید بدون اینکه وقت کاربر خود را صرف محتوا کنید. با این حال، مشکل این است که گاهی اوقات وقتی فونت وب بارگیری میشود، کل صفحه را جابهجا میکند زیرا در اندازه ارتفاع کادر کمی متفاوت است.
با قرار دادن size-adjust
در قاعده @font-face
، یک تنظیم کلی برای فونت فیس تنظیم میکند. زمان بندی این حق منجر به حداقل تغییر بصری، یک مبادله یکپارچه می شود. برای ایجاد یک مبادله بدون درز، این ماشین حساب تنظیم اندازه توسط Malte Ubl را با دست تنظیم کنید یا امتحان کنید.
در ابتدای این پست، رفع مشکل اندازه فونت به صورت آزمون و خطا انجام شد. 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: هدف از راه دور
قطعه زیر را در نظر بگیرید که یک فونت در دسترس محلی را مطابق با فونت سفارشی 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+ پیادهسازی شدهاند.
ascent-override
توصیفگر ascent-override
ارتفاع بالای خط پایه یک فونت را تعریف می کند.
@font-face {
font-family: "Ascent Adjusted Arial Bold";
src: local(Arial Bold);
ascent-override: 71%;
}
تیتر قرمز (تنظیم نشده) بالای حروف بزرگ A و O فضای خالی دارد، در حالی که تیتر آبی تنظیم شده است تا ارتفاع کلاهک آن با جعبه مرزی کاملاً مناسب باشد.
descent-override
توصیفگر descent-override
ارتفاع زیر خط پایه فونت را تعریف می کند.
@font-face {
font-family: "Ascent Adjusted Arial Bold";
src: local(Arial Bold);
descent-override: 0%;
}
تیتر قرمز (تنظیم نشده) زیر خطوط پایه D و O فاصله دارد، در حالی که تیتر آبی تنظیم شده است تا حروف آن روی خط مبنا قرار بگیرند.
line-gap-override
توصیفگر 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 یک راه هیجان انگیز برای سفارشی کردن کادر محدود کردن متن طرحبندیهای وب شما است تا تجربه تعویض فونت را بهبود ببخشد و بنابراین از تغییر چیدمان برای کاربران خود جلوگیری کنید. برای کسب اطلاعات بیشتر، این منابع را بررسی کنید:
- فونت های CSS سطح 5 مشخصات
- تنظیم اندازه در MDN
- تبادل بدون درز @font-face generator
- تغییر چیدمان تجمعی (CLS) در web.dev
- روشی جدید برای کاهش تأثیر بارگذاری قلم: توصیفگرهای قلم CSS
عکس کریستین استرند در Unsplash