از فلش متن نامرئی خودداری کنید

کیتی همپنیوس
Katie Hempenius
X

این آزمایشگاه کد به شما نشان می دهد که چگونه با استفاده از Font Face Observer، متن را فوراً نمایش دهید.

Font Face Observer را اضافه کنید

Font Face Observer اسکریپتی است که زمان بارگیری فونت را تشخیص می دهد. فایل fontfaceobserver.js قبلاً در فهرست پروژه ذخیره شده است، بنابراین نیازی به اضافه کردن جداگانه آن ندارید. با این حال، باید یک تگ اسکریپت برای آن اضافه کنید.

  • روی Remix to Edit کلیک کنید تا پروژه قابل ویرایش باشد.
  • یک تگ اسکریپت برای fontfaceobserver.js به index.html اضافه کنید: 
  <div class="text">Some text.</div>
  <script src="fontfaceobserver.js" type="text/javascript"></script>
</body>

از Font Face Observer استفاده کنید

ایجاد ناظر

برای هر خانواده فونتی که در صفحه استفاده می شود یک مشاهده گر ایجاد کنید.

  • اسکریپت زیر را بعد از اسکریپت fontfaceobserver.js اضافه کنید. این ناظران برای خانواده فونت Pacifico و Roboto ایجاد می کند: 
  <script src="fontfaceobserver.js" type="text/javascript"></script>
  <script type="text/javascript">
    const pacificoObserver = new FontFaceObserver('Pacifico');
    const robotoObserver = new FontFaceObserver('Roboto');
  </script>
<body>

اگر هرگز مطمئن نیستید که چه ناظر چهره فونتی را باید ایجاد کنید، فقط به دنبال اعلان های font-family در CSS خود بگردید. نام font-family این اعلان‌ها را به FontFaceObserver() ارسال کنید. نیازی به ایجاد ناظر فونت برای فونت های بازگشتی نیست.

به عنوان مثال، اگر CSS شما این بود:

font-family: "Times New Roman", Times, serif;

شما می توانید FontFaceObserver('Times New Roman') را اضافه کنید. Times و serif فونت های بازگشتی هستند، بنابراین شما نیازی به تعریف FontFaceObservers برای آنها ندارید.

تشخیص بار فونت

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

robotoObserver.load().then(function(){
  console.log("Hooray! Font loaded.");
});

robotoObserver.load() یک وعده است که با بارگیری فونت حل می شود.

سایت دمو از دو فونت مختلف استفاده می کند، بنابراین باید از Promise.all() استفاده کنید تا منتظر بمانید تا هر دو فونت بارگذاری شوند.

  • این قول را به اسکریپت خود، درست زیر FontFaceObservers که به تازگی اعلام کردید اضافه کنید: 
Promise.all([
  pacificoObserver.load(),
  robotoObserver.load()
]).then(function(){
  /* Do things */
});

✔️ ورود

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

<script type="text/javascript">
const pacificoObserver = new FontFaceObserver('Pacifico');
const robotoObserver = new FontFaceObserver('Roboto');

Promise.all([
  pacificoObserver.load(),
  robotoObserver.load()
]).then(function(){
  /* Do things */
});
</script>

کلاس fonts-loaded اعمال کنید

  • کامنت /* Do things */ در اسکریپت با این خط جایگزین کنید: 
document.documentElement.classList.add("fonts-loaded");

پس از بارگیری هر دو فونت، کلاس fonts-loaded به عنصر ریشه سند (برچسب <html> ) اضافه می کند.

✔️ ورود

اسکریپت تکمیل شده شما باید به شکل زیر باشد:

<script type="text/javascript">
  const pacificoObserver = new FontFaceObserver('Pacifico');
  const robotoObserver = new FontFaceObserver('Roboto');

  Promise.all([
    pacificoObserver.load(),
    robotoObserver.load()
  ]).then(function(){
    document.documentElement.className += " fonts-loaded";
  });
</script>

CSS را به روز کنید

صفحه شما باید طوری طراحی شود که در ابتدا از فونت سیستمی و پس از اعمال کلاس fonts-loaded از فونت های سفارشی استفاده شود.

  • CSS را به روز کنید: 
.header {
html.fonts-loaded .header {
  font-family: 'Pacifico', cursive;
}

.text
html.fonts-loaded .text {
  font-family: 'Roboto', sans-serif;
}

تأیید کنید

  • برای پیش نمایش سایت، View App را فشار دهید. سپس تمام صفحه را فشار دهید تمام صفحه .

اگر صفحه به این شکل است، پس Font Face Observer را با موفقیت پیاده سازی کرده اید و از شر "Flash of Invisible Text" خلاص شده اید.

عنوانی با فونت شکسته.