برای صفحات دارای متن که از فونت های وب استفاده می کنند ، مرورگر نمی تواند متن ذکر شده را تا زمانی که فونت وب آماده نشود ارائه دهد .
در بسیاری از موارد ، معمولاً متن قبل از بارگذاری فونت وب آماده است. مرورگر پیشاپیش فضا را برای متن ایجاد می کند حتی اگر فونت وب در دسترس نباشد ، در نتیجه مشکل Flash of Invisible Text ایجاد می شود .
این به جلوگیری از تغییرات طرح بندی غیر ضروری برای یک تجربه سریع و (طبق گوگل) کمک می کند.
Flash of Unstyled Text (FOUT) مشکلی مشابه FOIT است و همچنین به دلیل عدم بارگذاری فونت ها به موقع ایجاد می شود.
با این حال ، بازدیدکنندگان صفحه شما هنوز می توانند متن را در هنگام بارگیری صفحه بخوانند ، زیرا نزدیکترین فونت موجود برای نمایش متن استفاده می شود.
توجه داشته باشید که تأثیر FOUT بر عملکرد وب در مقایسه با FOIT کمتر مشهود است.
GTmetrix تمام فونت های وب اعلام شده در CSS را شناسایی می کند و بررسی می کند که آیا font-display
ویژگی برای هر فونت وب با هریک از مقادیر زیر مشخص شده است:
block
swap
fallback
optional
اگر GTmetrix حتی یک آدرس فونت وب بدون اظهارات فوق پیدا کند ، این ممیزی شروع می شود . با کلیک روی حسابرسی ، آدرس URL های فونت وب نمایان می شود.
چند راهکار وجود دارد تا اطمینان حاصل شود که متن در هنگام بارگذاری فونت وب قابل مشاهده است ، مانند:
می توانید با افزودن تگ پیوند زیر به هدر HTML خود ، فونت های وب را که در هنگام بارگیری صفحه بلافاصله مورد نیاز هستند بارگیری کنید:
<link rel="preload" href="/webfontname" as="font" type="font/format" crossorigin>
جایی که
font-display
font-display
ویژگی تعیین کننده چگونگی فونت در هنگام لود صفحه شما نمایش داده، بر اساس اینکه آیا آن دانلود شده است و آماده برای استفاده است. مقادیر زیر را می گیرد:
توضیح
برای اکثر مرورگرهای مدرن ، استفاده font-display: swap
از FOIT مشکل را حل می کند.
برای ملاحظه مطالب بیشتر در مورد صفحه نمایش فونت و سازگاری مرورگر آن اینجا را کلیک کنید
اگر از فونت های وب Google در صفحه خود استفاده می کنید ، می توانید font-display
با افزودن &display=swap
پارامتر در انتهای URL فونت وب خود در CSS ، عملکردی را اضافه کنید.
مثلا،
<link href = "googlewebfonturl & display = swap" rel = "stylesheet" >
جایی که googlewebfonturl آدرس فونت وب Google انتخابی شما است.