توصیفگرهای قلم CSS – مجله سر و صدا

مدت زمان طولانی است که بارگذاری قلم یک مانع از عملکرد وب است و در آنجا وجود دارد در اینجا هیچ گزینه خوبی وجود ندارد. اگر می خواهید از فونت های وب استفاده کنید ، انتخاب های شما اساساً Flash of Invisible Text (معروف به FOIT) است که در آن متن مخفی است تا زمان بارگیری قلم یا Flash of Unstyled Text (FOUT) که در ابتدا از قلم سیستم fallback استفاده می کنید و سپس آن را به فونت وب هنگام بارگیری. صادقانه بگویم هیچ یک از گزینه ها “پیروز” نشده اند زیرا هیچکدام واقعاً راضی کننده نیستند.

نبود font-display قرار است این را حل کنید؟

font-display املاک برای @font-face این انتخاب را به توسعه دهنده وب داده است در حالی که قبلاً مرورگر تصمیم گرفته است که (IE و Edge در گذشته FOUT را دوست داشتند ، در حالی که سایر مرورگرها FOIT را ترجیح می دادند). با این حال ، فراتر از آن ، واقعاً مشکلی حل نشد.

تعدادی از سایتها به آنجا منتقل شدند font-display: swap وقتی این اولین بار بیرون آمد ، و Google Fonts حتی آن را به عنوان پیش فرض قرار داده است در سال 2019. در اینجا فکر این بود که برای عملکرد بهتر است متن را با بیشترین سرعت ممکن نمایش دهید، حتی اگر در فونت جایگزین باشد ، و سپس هنگام بارگیری نهایی ، قلم را در آن عوض کنید.

من بودم پشتیبان این موضوع هم هست، اما به طور فزاینده ای در هنگام بارگیری فونت وب و گسترش کاراکترها (یا انقباض) برای پر کردن فضای بعدی ، از “اثر آبرسانی” ناامید می شوم. مجله Smashing ، مانند اکثر ناشران ، از فونت های وب استفاده می کند و تصویر زیر تفاوت بین رندر اولیه (با قلم های جایگزین) و رندر نهایی (با فونت های وب) را نشان می دهد:

اکنون ، وقتی فونت های وب در کنار هم قرار می گیرند ، به طرز چشمگیری زیبا تر هستند و با نام تجاری Smashing Magazine تناسب دارند. اما همچنین می بینیم موارد کاملاً زیادی وجود دارد تفاوت در طرح بندی متن با دو قلم اندازه قلم ها بسیار متفاوت است و به همین دلیل ، محتوای صفحه به اطراف تغییر می کند. در این عصر Core Web Vital ها و تغییرات چیدمان تجمعی (کاملاً درست!) به عنوان ضرر برای کاربران شناخته شده است ، font-display: swap به همین دلیل یک انتخاب ضعیف است.

من دوباره برگشتم به font-display: block در سایتهایی که از آنها مراقبت می کنم ، به نظر من تغییر متن کاملا ناراحت کننده و آزار دهنده است. در حالی که درست است که block شیفت را متوقف نمی کند (قلم هنوز با متن نامرئی ارائه می شود) ، حداقل باعث می شود تا کمتر مورد توجه کاربر قرار بگیرند. من نیز با بارگذاری قلم بهینه سازی شده است با بارگیری پیش فرض هایی که به کوچکترین شکل ممکن ساخته ام قلم های زیرمجموعه میزبان خود – بنابراین بازدیدکنندگان غالباً فقط برای مدت زمان کمی فونت های برگشتی را مشاهده می کنند. برای من ، “دوره بلوک” از swap خیلی کوتاه بود و من صادقانه ترجیح می دهم کمی بیشتر صبر کنم تا رندر اولیه درست شود.

استفاده كردن font-display: optional می تواند FOIT و FOUT را حل کند – با هزینه

گزینه دیگر استفاده از آن است font-display: optional. این گزینه اساساً فونتهای وب را اختیاری می کند ، یا به عبارت دیگر ، اگر قلم در زمان نیاز صفحه به آن نیاز نداشته باشد ، بر عهده مرورگر است که هرگز آن را تعویض نکند. با استفاده از این گزینه ، ما از FOIT و FOUT اجتناب می کنیم اساساً فقط با استفاده از قلمهایی که قبلاً بارگیری شده اند.

اگر فونت وب در دسترس نباشد ، دوباره به قلم جایگزین بازمی گردیم ، اما در ناوبری صفحه بعدی (یا بارگیری مجدد این صفحه) از قلم استفاده می شود – همانطور که اکنون بارگیری باید تمام می شد. با این حال ، اگر فونت وب برای سایت آنقدر مهم نیست ، خوب است فقط آنها را کاملاً حذف کنید – که برای عملکرد وب حتی بهتر است!

با این حال ، برداشت های اول محاسبه می شود و داشتن این بار اولیه بدون فونت های وب کمی بیش از حد به نظر می رسد. من همچنین فکر می کنم – اتفاقاً بدون هیچ مدرکی برای تأیید این موضوع! – اینکه این تصور را به مردم خواهد داد ، شاید ناخودآگاه ، اینکه چیزی در مورد وب سایت “خاموش” است و ممکن است بر نحوه استفاده افراد از وب سایت تأثیر بگذارد.

بنابراین ، همه گزینه های قلم دارای اشکالاتی هستند ، از جمله گزینه های استفاده نکردن از فونت های وب یا استفاده از قلم های سیستم (که محدود کننده است – اما شاید آنطور که بسیاری فکر می کنند محدود کننده نیست!).

ساخت فونت Fallback شما با قلم شما بسیار نزدیکتر است

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

متأسفانه ، مسئله مطابقت سبک قلم این است که نمی توانیم این سبک های CSS را اعمال کنیم فقط به قلم های جایگزین ، بنابراین ما نیاز به استفاده از JavaScript و FontFace.load API برای اعمال (یا برگرداندن) این تفاوت های سبک وقتی فونت وب بارگیری می شود.

مقدار کد زیاد نیست ، اما هنوز هم کمی بیشتر از آنچه باید باشد احساس می شود. اگرچه مزایا و امکانات دیگری برای استفاده از JavaScript API برای این مورد وجود دارد ، همانطور که در اینجا توضیح داده شده است زک چرمن که در این صحبت خارق العاده از سال 2019 – شما می توانید جریان مجدد را کاهش دهید و آن را کنترل کنید data-server حالت و prefers-reduced-motion هرچند که (توجه داشته باشید که از آن زمان به بعد هر دو در معرض CSS قرار گرفته اند).

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

font-family: Mija,-apple-system,Arial,BlinkMacSystemFont,roboto slab,droid serif,segoe ui,Ubuntu,Cantarell,Georgia,serif;

دانستن اینکه از کدام فونت استفاده می شود یا تنظیمات جداگانه برای هر یک و اطمینان از کاربرد صحیح آنها می تواند به سرعت کاملاً پیچیده شود.

راه حل بهتری در راه است

بنابراین ، این یک اطلاع مختصر در مورد وضعیت امروز است. با این حال ، مقداری دود شروع می شود در افق ظاهر می شوند.

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

دیدن https://t.co/mdRW2BMg6A توسط cramforce برای نمایش (Chrome Canary / FF Nightly با پرچم) pic.twitter.com/hEg1HfUJlT

– ادی عثمانی (addyosmani) 22 مه 2021

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

این دقیقاً همان مجموعه جدیدی است توصیفگرهای قلم به عنوان بخشی از سطح 5 ماژول قلم های CSS انجام دادن. اینها به @font-face اعلامیه هایی که در آن فونت فردی تعریف شده است.

سیمون هرن نوشته شده در مورد یک به روز رسانی پیشنهادی به مشخصات توصیفگر قلم که شامل چهار توصیفگر جدید است: ascent-override، descent-override، line-gap-override و advance-override. شما می توانید با زمین بازی F-mods که سیمون ایجاد کرده است تا فونت های سفارشی و جایگزین شما را بارگیری کند ، سپس با overrides بازی کنید تا کاملا مطابقت داشته باشد.

همانطور که سایمون می نویسد ، ترکیبی از این چهار توصیفگر به ما اجازه می دهد طرح فونت جایگزین را متناسب با فونت وب نادیده بگیریم ، اما آنها فقط فاصله و موقعیت عمودی را تغییر می دهند. بنابراین برای فاصله بین حروف و حروف ، باید CSS اضافی ارائه دهیم. با این حال ، اکنون با تغییر می کند آینده size-adjust توصیف کننده.

چگونه کار می کند؟ فرض کنید شما CSS زیر را دارید:

@font-face {
  font-family: 'Lato';
  src: url('/static/fonts/Lato.woff2') format('woff2');
  font-weight: 400;
}

h1 {
    font-family: Lato, Lato-fallback, Arial;
}

سپس آنچه شما انجام می دهید ایجاد یک است @font-face برای فونت Arial fallback اعمال کنید توصیف کننده های تنظیم کننده به آن سپس قطعه CSS زیر را دریافت خواهید کرد:

@font-face {
  font-family: 'Lato';
  src: url('/static/fonts/Lato.woff2') format('woff2');
  font-weight: 400;
}

@font-face {
    font-family: "Lato-fallback";
    size-adjust: -9900.00%;
    ascent-override: 96%;
    src: local("Arial");
}

h1 {
    font-family: Lato, Lato-fallback, sans-serif;
}

این به این معنی است که وقتی Lato-fallback در ابتدا استفاده می شود (همانطور که Arial یک است local فونت و می تواند بلافاصله و بدون هیچ گونه بارگیری اضافی استفاده شود) سپس size-adjust و ascent-override تنظیمات به شما امکان می دهد این را به قلم Lato نزدیک کنید. این یک چیز اضافی است @font-face اعلامیه برای نوشتن ، اما مطمئناً بسیار آسان تر از حلقه هایی که قبلاً مجبور به پرش از آن بودیم!

به طور کلی ، وجود دارد چهار اصلی @font-face توصیف کنندگان در این مشخصات گنجانده شده است: size-adjust، ascent-override، descent-override، و line-gap-override با چند نفر دیگر هنوز برای موارد استفاده از زیرنویس ، فوق مقاله و موارد دیگر در نظر گرفته شده است.

مالت اوبل ایجاد شده ابزاری بسیار مفید برای محاسبه خودکار این تنظیمات با دو فونت و یک مرورگر که از این تنظیمات جدید پشتیبانی می کند (در یک لحظه بیشتر در مورد این!). همانطور که مالت خاطرنشان کرد ، کامپیوترها در این نوع کارها مهارت دارند! در حالت ایده آل ، ما می توانیم این تنظیمات را برای قلم های رایج در معرض دید توسعه دهندگان وب قرار دهیم ، مثلاً ممکن است این نکات را در مجموعه قلم ها مانند Google Fonts ارائه دهیم؟ این مطمئناً به افزایش فرزندخواندگی کمک می کند.

اکنون سیستم عامل های مختلف ممکن است اندکی داشته باشند تنظیمات مختلف قلم و دقیقاً درست کردن اینها اساساً یک کار غیرممکن است ، اما هدف این نیست. هدف این است که شکاف را از این طریق استفاده کنید font-display: swap دیگر چنین تجربه گیج کننده ای نیست ، اما ما نیازی به افراط در آن نداریم optional یا فونت وب ندارد.

چه زمانی می توانیم از این استفاده کنیم؟

سه مورد از این تنظیمات را دارد قبلاً از نسخه 87 در Chrome ارسال شده است، اگرچه کلید است size-adjust توصیفگر هنوز در هیچ مرورگر پایداری در دسترس نیست. با این حال، Chrome Canary مانند Firefox پشت یک پرچم از آن برخوردار است بنابراین این یک مفهوم انتزاعی و دور نیست ، بلکه چیزی است که می تواند خیلی زود فرود بیاید.

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

Chrome قصد خود را برای اعلام کرده است ساختن size-adjust موجود در Chrome 92 به دلیل انتشار در 20 ژوئیه احتمالاً نشان می دهد تقریباً وجود دارد.

بنابراین ، هنوز کاملاً آماده نیست ، اما به نظر می رسد در آینده ای بسیار نزدیک عرضه خواهد شد. در ضمن ، با یک بازی کنید نسخه ی نمایشی در Chrome Canary و ببینید آیا می تواند کمی بیشتر به رفع مشکلات بارگذاری قلم و تأثیر CLS نزدیک شود.

(vf ، او)