تجنب وميض النص غير المرئي

Katie Hempenius
Katie Hempenius

يوضّح لك هذا الدرس التطبيقي كيفية عرض النص على الفور باستخدام 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;
}

تأكيد

  • لمعاينة الموقع الإلكتروني، اضغط على عرض التطبيق. ثم اضغط على ملء الشاشة ملء الشاشة.

إذا كانت الصفحة تبدو على هذا النحو، يعني ذلك أنّك نفّذت Font Face Observer بنجاح وتخلصت من "وميض النص غير المرئي".

عنوان بخط مكتوب