במעבדת הקוד הזו תלמדו איך להציג טקסט באופן מיידי באמצעות משפחת גופנים 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
. הפעולה הזו יוצרת צופים באוקיינוס השקט ו-"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
לרכיב הבסיסי (root) של המסמך (החלק
<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 לצפות ב-"Flash של טקסט בלתי נראה" ולהיפטר מ'הבהוב של טקסט בלתי נראה'.