يوضّح لك هذا الدرس التطبيقي كيفية عرض النص على الفور باستخدام 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;
}
تأكيد
- لمعاينة الموقع الإلكتروني، اضغط على عرض التطبيق. ثم اضغط على ملء الشاشة .
إذا كانت الصفحة تبدو على هذا النحو، يعني ذلك أنّك نفّذت Font Face Observer بنجاح وتخلصت من "وميض النص غير المرئي".