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

Katie Hempenius
Katie Hempenius
X

يظهر لك هذا التمرين المعملي الخاص بالرموز كيفية عرض النص فورًا باستخدام واجهة الخط المراقب:

إضافة أداة مراقبة واجهة الخط

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

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

استخدام أداة "مراقبة واجهة الخط"

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

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

  • أضِف النص البرمجي التالي بعد النص البرمجي fontfaceobserver.js. يؤدي هذا إلى إنشاء مراقبي "منطقة المحيط الهادئ" و"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;
}

إثبات الهوية

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

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

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