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

كاتي هيمبينيوس
"كاتي هيمبينيوس"
X

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

إضافة Font Face Monitorer

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

  • انقر على إنشاء ريمكس لتعديله ليصبح المشروع قابلاً للتعديل.
  • إضافة علامة نص برمجي من fontfaceobserver.js إلى index.html:
  <div class="text">Some text.</div>
  <script src="fontfaceobserver.js" type="text/javascript"></script>
</body>

استخدام Font Face Monitorer

إنشاء المراقبين

قم بإنشاء مراقب لكل مجموعة خطوط يتم استخدامها على الصفحة.

  • أضِف النص البرمجي التالي بعد النص البرمجي 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 هي خطوط احتياطية، لذلك لن تحتاج إلى تعريف FontFaceMonitorers عنها.

رصد تحميل الخط

تبدو التعليمات البرمجية لاكتشاف تحميل الخط كما يلي:

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

يعد الرمز robotoObserver.load() ضمانًا يتم حله عند تحميل الخط.

يستخدم الموقع الإلكتروني التجريبي خطين مختلفين، لذا عليك استخدام Promise.all() للانتظار حتى يتم تحميل كلا الخطين.

  • أضف هذا الوعد إلى النص، مباشرة أسفل FontFaceMonitorers الذي أعلنته للتو:
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 Monitorer والتخلص من "فلاش النص غير المرئي".

عنوان بخط تدوين.