ห้องทดลองโค้ดนี้จะแสดงวิธีแสดงข้อความทันทีโดยใช้ 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 เป็นแบบอักษรสำรอง คุณจึงไม่จำเป็นต้องประกาศ FontFaceObserver สำหรับแบบอักษรดังกล่าว
ตรวจหาการโหลดแบบอักษร
โค้ดสำหรับตรวจหาการโหลดแบบอักษรจะมีลักษณะดังนี้
robotoObserver.load().then(function(){
console.log("Hooray! Font loaded.");
});
robotoObserver.load()
คือสัญญาที่จะแก้ไขเมื่อแบบอักษรโหลด
เว็บไซต์เดโมใช้แบบอักษร 2 แบบ คุณจึงต้องใช้ Promise.all()
เพื่อรอจนกว่าแบบอักษรทั้ง 2 แบบจะโหลดเสร็จ
- เพิ่มสัญญานี้ลงในสคริปต์ด้านล่างเซิร์ฟเวอร์ FontFaceObserver ที่คุณเพิ่งประกาศไป
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>
) เมื่อโหลดแบบอักษรทั้ง 2 แบบแล้ว
✔️ เช็คอิน
สคริปต์ที่เสร็จสมบูรณ์แล้วควรมีลักษณะดังนี้
<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 สำเร็จแล้ว และลบ "Flash ของข้อความที่มองไม่เห็น"