از Chrome 83، پیوند rel="preload" و font-display: اختیاری را می توان با هم ترکیب کرد تا jank طرح بندی را به طور کامل حذف کند.
Chrome 83 با بهینه‌سازی چرخه‌های رندر، تغییر طرح‌بندی را هنگام بارگیری فونت‌های اختیاری حذف می‌کند. ترکیب <link rel="preload"> با font-display: optional موثرترین راه برای تضمین عدم وجود جابجایی طرح‌بندی هنگام ارائه فونت‌های سفارشی است.
سازگاری با مرورگر
برای اطلاعات به روز پشتیبانی از مرورگرهای متقابل، داده های MDN را بررسی کنید:
رندر فونت
تغییر چیدمان یا طرح‌بندی مجدد زمانی اتفاق می‌افتد که یک منبع در یک صفحه وب به صورت پویا تغییر می‌کند و منجر به «تغییر» محتوا می‌شود. واکشی و رندر کردن فونت‌های وب می‌تواند مستقیماً به یکی از دو روش باعث تغییر طرح‌بندی شود:
- یک فونت جایگزین با یک فونت جدید ("فلش متن بدون استایل") جایگزین می شود.
- متن "نامرئی" تا زمانی که یک فونت جدید در صفحه نمایش داده شود نشان داده می شود ("فلش متن نامرئی")
ویژگی CSS font-display راهی برای تغییر رفتار رندر فونت های سفارشی از طریق طیف وسیعی از مقادیر مختلف پشتیبانی شده ( auto ، block ، swap ، fallback ، و optional ) فراهم می کند. انتخاب مقدار مورد استفاده بستگی به رفتار ترجیحی برای فونت‌های بارگذاری ناهمزمان دارد. با این حال، هر یک از این مقادیر پشتیبانی شده می‌تواند طرح‌بندی مجدد را به یکی از دو روش ذکر شده در بالا، تا کنون، راه‌اندازی کند!
فونت های اختیاری
ویژگی font-display از یک جدول زمانی سه دوره استفاده می کند تا فونت هایی را که باید قبل از رندر شدن دانلود شوند، مدیریت می کند:
- مسدود کردن: متن "نامرئی" را ارائه کنید، اما به محض اتمام بارگذاری، به فونت وب بروید.
- جابجایی: متن را با استفاده از فونت سیستم بازگشتی رندر کنید، اما به محض اتمام بارگذاری، به فونت وب بروید.
- Fail: متن را با استفاده از فونت سیستم بازگشتی ارائه کنید.
قبلاً، فونت‌هایی که با font-display: optional تعیین می‌شدند دارای دوره بلوک 100 میلی‌ثانیه و بدون دوره تعویض بودند. این بدان معنی است که متن "نامرئی" قبل از تغییر به یک فونت بازگشتی به طور خلاصه نمایش داده می شود. اگر فونت در 100 میلی‌ثانیه دانلود نشود، از فونت بازگشتی استفاده می‌شود و هیچ تعویضی انجام نمی‌شود.
font-display: optional در Chrome هنگامی که فونت پس از دوره بلوک 100 میلی‌ثانیه دانلود میشودبا این حال، در صورتی که فونت قبل از اتمام دوره بلوک 100 میلی‌ثانیه دانلود شود، فونت سفارشی رندر شده و در صفحه استفاده می‌شود.
font-display: optional در Chrome زمانی که فونت قبل از دوره بلوک 100 میلی‌ثانیه دانلود میشودکروم در هر دو مورد، صفحه را دو بار رندر می دهد، صرف نظر از اینکه از فونت بازگشتی استفاده شده باشد یا بارگیری فونت سفارشی به موقع به پایان برسد. این باعث می شود که متن نامرئی کمی سوسو بزند و در مواردی که فونت جدیدی رندر می شود، جابجایی طرح بندی که برخی از محتوای صفحه را جابجا می کند، می شود. این اتفاق می افتد حتی اگر فونت در حافظه پنهان دیسک مرورگر ذخیره شود و بتواند قبل از اتمام دوره بلوک بارگیری شود.
بهینه‌سازی‌ها در Chrome 83 فرود آمدند تا اولین چرخه رندر برای فونت‌های اختیاری که از قبل با <link rel="preload'> به‌طور کامل حذف شود. درعوض، تا زمانی که بارگیری فونت سفارشی به پایان برسد یا یک دوره زمانی مشخص سپری شود، رندر مسدود می‌شود. این بازه زمانی در حال حاضر 100 میلی‌ثانیه تنظیم شده است، اما ممکن است در آینده نزدیک برای بهینه‌سازی عملکرد تغییر کند.
font-display: optional در Chrome زمانی که فونت‌ها از قبل بارگیری می‌شوند و فونت پس از دوره بلوک 100 میلی‌ثانیه بارگیری می‌شود (بدون فلش متن نامرئی) 
font-display: optional در Chrome زمانی که فونت‌ها از قبل بارگیری می‌شوند و فونت قبل از دوره بلوک 100 میلی‌ثانیه دانلود می‌شود (بدون فلش متن نامرئی)از قبل بارگذاری فونت های اختیاری در کروم امکان جابجایی طرح بندی و فلش متن های بدون استایل را از بین می برد. این با رفتار مورد نیاز همانطور که در سطح 4 ماژول قلم‌های CSS مشخص شده است، مطابقت دارد، جایی که فونت‌های اختیاری هرگز نباید باعث طرح‌بندی مجدد شوند و در عوض عوامل کاربر می‌توانند رندر را برای یک دوره زمانی مناسب به تاخیر بیندازند.
اگرچه لازم نیست یک فونت اختیاری را از قبل بارگذاری کنید، اما شانس بارگیری آن را قبل از اولین چرخه رندر تا حد زیادی بهبود می بخشد، به خصوص اگر هنوز در حافظه پنهان مرورگر ذخیره نشده باشد.
نتیجه
تیم Chrome علاقه مند است تجربیات شما را از بارگیری فونت های اختیاری با این بهینه سازی های جدید بشنود! اگر مشکلی را تجربه کردید یا می‌خواهید پیشنهادهای ویژگی را حذف کنید، مشکل را ثبت کنید.
،از Chrome 83، پیوند rel="preload" و font-display: اختیاری را می توان با هم ترکیب کرد تا jank طرح بندی را به طور کامل حذف کند.
Chrome 83 با بهینه‌سازی چرخه‌های رندر، تغییر طرح‌بندی را هنگام بارگیری فونت‌های اختیاری حذف می‌کند. ترکیب <link rel="preload"> با font-display: optional موثرترین راه برای تضمین عدم وجود جابجایی طرح‌بندی هنگام ارائه فونت‌های سفارشی است.
سازگاری با مرورگر
برای اطلاعات به روز پشتیبانی از مرورگرهای متقابل، داده های MDN را بررسی کنید:
رندر فونت
تغییر چیدمان یا طرح‌بندی مجدد زمانی اتفاق می‌افتد که یک منبع در یک صفحه وب به صورت پویا تغییر می‌کند و منجر به «تغییر» محتوا می‌شود. واکشی و رندر کردن فونت‌های وب می‌تواند مستقیماً به یکی از دو روش باعث تغییر طرح‌بندی شود:
- یک فونت جایگزین با یک فونت جدید ("فلش متن بدون استایل") جایگزین می شود.
- متن "نامرئی" تا زمانی که یک فونت جدید در صفحه نمایش داده شود نشان داده می شود ("فلش متن نامرئی")
ویژگی CSS font-display راهی برای تغییر رفتار رندر فونت های سفارشی از طریق طیف وسیعی از مقادیر مختلف پشتیبانی شده ( auto ، block ، swap ، fallback ، و optional ) فراهم می کند. انتخاب مقدار مورد استفاده بستگی به رفتار ترجیحی برای فونت‌های بارگذاری ناهمزمان دارد. با این حال، هر یک از این مقادیر پشتیبانی شده می‌تواند طرح‌بندی مجدد را به یکی از دو روش ذکر شده در بالا، تا کنون، راه‌اندازی کند!
فونت های اختیاری
ویژگی font-display از یک جدول زمانی سه دوره استفاده می کند تا فونت هایی را که باید قبل از رندر شدن دانلود شوند، مدیریت می کند:
- مسدود کردن: متن "نامرئی" را ارائه کنید، اما به محض اتمام بارگذاری، به فونت وب بروید.
- جابجایی: متن را با استفاده از فونت سیستم بازگشتی رندر کنید، اما به محض اتمام بارگذاری، به فونت وب بروید.
- Fail: متن را با استفاده از فونت سیستم بازگشتی ارائه کنید.
قبلاً، فونت‌هایی که با font-display: optional تعیین می‌شدند دارای دوره بلوک 100 میلی‌ثانیه و بدون دوره تعویض بودند. این بدان معنی است که متن "نامرئی" قبل از تغییر به یک فونت بازگشتی به طور خلاصه نمایش داده می شود. اگر فونت در 100 میلی‌ثانیه دانلود نشود، از فونت بازگشتی استفاده می‌شود و هیچ تعویضی انجام نمی‌شود.
font-display: optional در Chrome هنگامی که فونت پس از دوره بلوک 100 میلی‌ثانیه دانلود میشودبا این حال، در صورتی که فونت قبل از اتمام دوره بلوک 100 میلی‌ثانیه دانلود شود، فونت سفارشی رندر شده و در صفحه استفاده می‌شود.
font-display: optional در Chrome زمانی که فونت قبل از دوره بلوک 100 میلی‌ثانیه دانلود میشودکروم در هر دو مورد، صفحه را دو بار رندر می دهد، صرف نظر از اینکه از فونت بازگشتی استفاده شده باشد یا بارگیری فونت سفارشی به موقع به پایان برسد. این باعث می شود که متن نامرئی کمی سوسو بزند و در مواردی که فونت جدیدی رندر می شود، جابجایی طرح بندی که برخی از محتوای صفحه را جابجا می کند، می شود. این اتفاق می افتد حتی اگر فونت در حافظه پنهان دیسک مرورگر ذخیره شود و بتواند قبل از اتمام دوره بلوک بارگیری شود.
بهینه‌سازی‌ها در Chrome 83 فرود آمدند تا اولین چرخه رندر برای فونت‌های اختیاری که از قبل با <link rel="preload'> به‌طور کامل حذف شود. درعوض، تا زمانی که بارگیری فونت سفارشی به پایان برسد یا یک دوره زمانی مشخص سپری شود، رندر مسدود می‌شود. این بازه زمانی در حال حاضر 100 میلی‌ثانیه تنظیم شده است، اما ممکن است در آینده نزدیک برای بهینه‌سازی عملکرد تغییر کند.
font-display: optional در Chrome زمانی که فونت‌ها از قبل بارگیری می‌شوند و فونت پس از دوره بلوک 100 میلی‌ثانیه بارگیری می‌شود (بدون فلش متن نامرئی) font-display: optional در Chrome زمانی که فونت‌ها از قبل بارگیری می‌شوند و فونت قبل از دوره بلوک 100 میلی‌ثانیه دانلود می‌شود (بدون فلش متن نامرئی)از قبل بارگذاری فونت های اختیاری در کروم امکان جابجایی طرح بندی و فلش متن های بدون استایل را از بین می برد. این با رفتار مورد نیاز همانطور که در سطح 4 ماژول قلم‌های CSS مشخص شده است، مطابقت دارد، جایی که فونت‌های اختیاری هرگز نباید باعث طرح‌بندی مجدد شوند و در عوض عوامل کاربر می‌توانند رندر را برای یک دوره زمانی مناسب به تاخیر بیندازند.
اگرچه لازم نیست یک فونت اختیاری را از قبل بارگذاری کنید، اما شانس بارگیری آن را قبل از اولین چرخه رندر تا حد زیادی بهبود می بخشد، به خصوص اگر هنوز در حافظه پنهان مرورگر ذخیره نشده باشد.
نتیجه
تیم Chrome علاقه مند است تجربیات شما را از بارگیری فونت های اختیاری با این بهینه سازی های جدید بشنود! اگر مشکلی را تجربه کردید یا می‌خواهید پیشنهادهای ویژگی را حذف کنید، مشکل را ثبت کنید.