ห้องทดลองโค้ดนี้แสดงวิธีแสดงข้อความทันทีโดยใช้ แบบอักษร ผู้สังเกตการณ์
เพิ่ม Font Face Observer
Font Face Observer เป็นสคริปต์
ซึ่งจะตรวจจับเมื่อแบบอักษรโหลดขึ้น
fontfaceobserver.js
มีการบันทึกไฟล์ลงในไดเรกทอรีโครงการแล้ว คุณจึงไม่ต้องเพิ่มไฟล์ดังกล่าว
แยกกัน อย่างไรก็ตาม คุณต้องเพิ่มแท็กสคริปต์สำหรับ URL ดังกล่าว
- คลิกรีมิกซ์เพื่อแก้ไขเพื่อทำให้โปรเจ็กต์แก้ไขได้
- เพิ่มแท็กสคริปต์สำหรับ
fontfaceobserver.js
ลงในindex.html
:
<div class="text">Some text.</div>
<script src="fontfaceobserver.js" type="text/javascript"></script>
</body>
ใช้ Font Face Observer
สร้าง 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')
เวลาและ Serif คือ
แบบอักษรสำรอง คุณจึงไม่ต้องประกาศ FontFaceObserver สำหรับแบบอักษรนั้น
ตรวจหาจำนวนแบบอักษร
โค้ดสำหรับการตรวจสอบการโหลดแบบอักษรมีลักษณะดังนี้
robotoObserver.load().then(function(){
console.log("Hooray! Font loaded.");
});
robotoObserver.load()
เป็นสัญญาที่จะแก้ไขเมื่อแบบอักษรโหลดขึ้น
เว็บไซต์สาธิตใช้แบบอักษร 2 แบบที่แตกต่างกัน คุณจึงต้องใช้ Promise.all()
เพื่อรอจนกว่าแบบอักษรทั้งสองจะโหลดเสร็จ
- เพิ่มคำสัญญานี้ลงในสคริปต์ใต้ 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 สำเร็จแล้ว สังเกตและลบ "Flash of Invisible Text" อีกต่อไป