web font loading recipes
1.0.0
การสาธิตมากมายสำหรับกลยุทธ์การโหลดแบบอักษรเว็บที่แตกต่างกัน บางส่วนของสิ่งเหล่านี้รวมอยู่ในคู่มือที่ครอบคลุมเกี่ยวกับกลยุทธ์การโหลดแบบอักษรบางส่วนของพวกเขา มีการทดลอง มากขึ้น
การสาธิตจัดขึ้นที่ https://www.zachleat.com/web-fonts/demos/
เนื่องจากฟอนต์เว็บเป็นการเพิ่มประสิทธิภาพแบบก้าวหน้าและด้วยการสนับสนุนที่เพิ่มขึ้นสำหรับ API ตัวอักษร CSS เราสามารถตั้งตารอเวลาที่เราไม่จำเป็นต้องอินไลน์โพลีฟิลเข้าสู่ส่วนหัว (สำหรับการโหลดแบบอักษรที่เร็วขึ้น) สูตร API แบบอักษร CSS ที่ง่ายขึ้นนั้นเป็นค่าเริ่มต้น แต่เวอร์ชันโพลีฟิลด์จะรวมอยู่ในการรองรับเบราว์เซอร์ที่กว้างขึ้น - โดยเฉพาะอย่างยิ่งเฉพาะเวอร์ชันโพลีฟิลที่จะแสดงตัวอักษรเว็บใน Internet Explorer และเว็บเบราว์เซอร์ Edge (ซึ่งไม่ได้รองรับ API
font-display: swap@font-face descriptorpreload<link> แท็กfont-display: swap with preload<link> แท็กและ css : @font-facefont-display และ preloadคล้ายกับข้างต้น แต่ไม่ได้ใช้คลาส - ใช้เฉพาะ API ตัวอักษร CSS เท่านั้น สิ่งนี้ไม่จำเป็นต้องมีการดัดแปลง CSS ใด ๆ ที่ฉีดเว็บฟอนต์โดยใช้ JS โดยทางโปรแกรม ฉันเห็นวิธีนี้ครั้งแรกในคู่มือ WebFont จาก @bramstein
.style.fontFamily วิธีการ (ใช้งานได้ดีกับหนึ่งครอบครัวต่อหน้า) ก่อนที่จะเห็นสิ่งนี้ในทวีตจาก @simevidasโหลดสองขั้นตอนโดยใช้ไฟล์ตัวอักษรโรมันหนึ่งไฟล์ในขั้นตอนแรก (พร้อมการสังเคราะห์แบบอักษร)
preload<link> แท็กและ JavaScript : CSS Font Loading APIfont-display: optional ด้วย JavaScriptpreload พร้อมกับ polyfill ทางเลือกที่เลียนแบบตัวอักษร font-display: optional<link> แท็กและ JavaScript : CSS Font Loading API และ FontFaceObserver Polyfillสิ่งเหล่านี้ไม่จำเป็นต้องใช้กลยุทธ์การโหลดด้วยตัวเอง แต่เป็นการปรับปรุงเพิ่มเติมที่คุณสามารถเลเยอร์ด้านบนและจับคู่กับกลยุทธ์ที่มีอยู่
ยกเลิกการใช้แบบอักษรเว็บด้วยความเร็วการเชื่อมต่อที่ช้า
prefers-reduced-motion ยกเลิกการใช้แบบอักษรเว็บเมื่อผู้ใช้เปิดใช้งาน Reduce Motion
save-data การตั้งค่าของผู้ใช้ การยกเลิกแบบอักษรเว็บเมื่อผู้ใช้เปิดใช้งานโหมด Data Saver
คุณอาจเห็นโพสต์บล็อกในบางจุด
font-display: optionalC'mon. -
เบราว์เซอร์เก่าใช้ในการแสดงผลโดยไม่ต้องหมดเวลาซึ่งในทางปฏิบัติทำให้เว็บฟอนต์เป็นจุดหนึ่งของความล้มเหลว การใช้ WOFF2 จะตัดมัสตาร์ดไปยังเบราว์เซอร์สมัยใหม่ที่มีเวลาหมดเวลาสามวินาทีสำหรับแบบอักษรเว็บ เรากำลังต่อต้านข้อความที่ไม่สามารถมองเห็นได้ที่นี่ แต่วิธีการนี้คุ้มค่าที่จะกล่าวถึง
font-synthesis ไม่ใช่ผลิตภัณฑ์สุดท้ายที่ดี
<style> การฉีด สิ่งใดก็ตามที่ใช้ JavaScript เพื่อฉีด <style> ใหม่ด้วยบล็อก @font-face ภายใน ค่าทาสีที่เลวร้ายจริงๆ - หลีกเลี่ยงสิ่งนี้ สิ่งนี้ใช้ในวิธี URI ข้อมูลแบบอะซิงโครนัสด้านบน แต่ก็เป็นเรื่องธรรมดาในวิธีการที่มีประสิทธิภาพแย่ลงเช่นกัน
font-display: optional และ preloadpreload ด้วย font-display: optional คือ Anti-Patternfont-display (ผสมค่า font-display ผ่าน font-family )วิธีนี้ไม่ได้มีการสนับสนุนข้ามเบราว์เซอร์ในปัจจุบัน ฉันหวังว่าสิ่งนี้จะเปลี่ยนไป - เรียนรู้มากขึ้น
swap / 3 optional ) นี่เป็นสิ่งที่คนทั่วไปลอง - พวกเขาโหลด CSS แบบอะซิงโครนัส (และเฉพาะ CSS) เฮ็คฉันใช้พฤติกรรมนี้ก่อนที่ฉันจะเริ่มศึกษาการโหลดเว็บแบบอักษร
@supports และ font-displayfont-displayfont-display (และทำงานได้ดีโดยไม่ต้องพึ่งพา JS)@supports ไม่ทำงานกับตัวอธิบายแบบอักษรfont-family ใส่ฟอนต์เว็บ font-family สองตัวขึ้นไปในสแต็ค font-family เดี่ยว
ล้มเหลว : อัลกอริทึมการจับคู่แบบอักษรเลือกตัวอักษรเว็บแรกที่ตรงกับและพยายามโหลด (ไม่สนใจครอบครัวฟอนต์เว็บที่ตามมา) แม้ว่าคุณ preload ขั้นตอนแรกของเซตย่อย แต่ก็จะเปลี่ยนไปเนื่องจากลำดับความสำคัญของการสั่งซื้อ font-family
รหัส
การสาธิต
UPDATE : ในขณะที่คุณสามารถลดปัญหาข้างต้นด้วย font-display บางทีการแก้ไขลำดับของการสั่งซื้อแบบ font-family และ @font-face การสั่งซื้อยังคงมีปัญหาในการลบแบบอักษรเว็บย่อยที่ไม่จำเป็นออกจากหน้าหลังจากรุ่นที่ใหญ่กว่าได้โหลด คุณสมบัติตัวอักษรที่เกิดขึ้นกับร่ายมนตร์ที่ข้ามขอบเขตไฟล์ตัวอักษรเหล่านี้จะถูกทำลาย (kerning, ligatures, et cetera) ที่เกี่ยวข้องคุณไม่สามารถลบวัตถุ FontFace ที่จับคู่ CSS ได้โดยใช้ API แบบอักษร CSS (ตามข้อกำหนด)
** โปรดทราบว่าวิธีการเหล่านี้จะ fout ใน Internet Explorer และ Edge โดยใช้ประโยชน์จากพฤติกรรมการโหลดแบบอักษรเริ่มต้น
