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

Katie Hempenius
Katie Hempenius
X

يوضّح لك هذا الدرس التطبيقي كيفية عرض النص على الفور باستخدام Font Face Observer.

إضافة Font Face Observer

Font Face Observer هو نص برمجي يرصد تحميل الخط. تم حفظ ملف fontfaceobserver.js من قبل في دليل المشروع، لذا لا تحتاج إلى إضافته بشكل منفصل. ومع ذلك، عليك إضافة علامة نص برمجي لها.

  • انقر على إنشاء ريمكس لتعديل لجعل المشروع قابلاً للتعديل.
  • أضِف علامة نص برمجي لـ 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;
}

تأكيد

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

إذا كانت الصفحة تبدو كالتالي، فهذا يعني أنك نفذت بنجاح أداة مراقبة واجهة الخط وتخلصت من "فلاش النص غير المرئي".

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