gatsby omni font loader
v2.0.2
npm install gatsby-omni-font-loader react-helmet
หรือ
yarn add gatsby-omni-font-loader react-helmet
เพิ่มตัวอย่างต่อไปนี้ลงในอาร์เรย์ปลั๊กอิน gatsby-config.js
{
/* Include plugin */
resolve : "gatsby-omni-font-loader" ,
/* Plugin options */
options : {
/* Font loading mode */
mode : "async" ,
/* Enable font loading listener to handle FOUT */
enableListener : true ,
/* Preconnect URL-s. This example is for Google Fonts */
preconnect : [ "https://fonts.gstatic.com" ] ,
/* Self-hosted fonts config. Add font files and font CSS files to "static" folder */
custom : [
{
/* Exact name of the font as defied in @font-face CSS rule */
name : [ "Font Awesome 5 Brands" , "Font Awesome 5 Free" ] ,
/* Path to the font CSS file inside the "static" folder with @font-face definition */
file : "/fonts/fontAwesome/css/all.min.css" ,
} ,
] ,
/* Web fonts. File link should point to font CSS file. */
web : [ {
/* Exact name of the font as defied in @font-face CSS rule */
name : "Staatliches" ,
/* URL to the font CSS file with @font-face definition */
file : "https://fonts.googleapis.com/css2?family=Staatliches" ,
} ,
] ,
} ,
} | ตัวเลือก | คำอธิบาย | ค่าเริ่มต้น |
|---|---|---|
| โหมด | สามารถตั้งค่าเป็น async (ค่าเริ่มต้น) หรือ render-blocking ในโหมด async แบบอักษรจะถูกโหลดอย่างเหมาะสม แต่มองเห็นได้ง่าย ในโหมด render-blocking ปิดกั้นจะเกิดขึ้นในบางกรณีที่หายาก แต่ไฟล์ตัวอักษรจะกลายเป็นการปิดกั้นการแสดงผล | async |
| ขอบเขต | สามารถตั้งค่าเป็น body (เริ่มต้น) หรือ html ตั้งค่าองค์ประกอบเป้าหมายสำหรับชื่อคลาส HTML ที่จะนำไปใช้กับ | ร่างกาย |
| enablelistener | ทำงานในโหมด async เปิดใช้งานตัวอักษรตัวอักษรเพื่อจัดการกับแฟลชของข้อความที่ไม่ได้อยู่ หากเปิดใช้งานคลาส CSS จะถูกนำไปใช้กับ HTML เมื่อการโหลดแบบอักษรแต่ละแบบเสร็จสิ้น | เท็จ |
| ช่วงเวลา (V1 เท่านั้น) | ใช้งานได้ถ้า enableListener เป็น true ช่วงเวลาการฟังแบบอักษร (ใน MS) ค่าเริ่มต้นคือ 300ms แนะนำ:> = 300ms | 300 |
| หมดเวลา (V1 เท่านั้น) | ใช้งานได้ถ้า enableListener เป็น true ค่าการหมดเวลาการฟังแบบอักษร (ใน MS) ค่าเริ่มต้นคือ 30s (30000ms) ผู้ฟังจะไม่ตรวจสอบแบบอักษรที่โหลดหลังจากหมดเวลาอีกต่อไปฟอนต์จะยังคงถูกโหลดและแสดง แต่ไม่ต้องจัดการกับ Fout | 30000 |
| กำหนดเอง | การกำหนดค่าแบบอักษรโฮสต์ตัวเอง เพิ่มไฟล์ตัวอักษรและไฟล์ CSS แบบอักษรลงในโฟลเดอร์ static อาร์เรย์ของ {name: "Font name", file: "https://url-to-font-css.path"} วัตถุ | [] |
| เว็บ | Web Fonts Config ลิงค์ไฟล์ควรชี้ไปที่ไฟล์ CSS แบบอักษร อาร์เรย์ของ {name: "Font name", file: "https://url-to-font-css.path"} วัตถุ | [] |
| การเชื่อมต่อล่วงหน้า | URL ที่ใช้สำหรับ meta preconnect URL พื้นฐานที่โฮสต์ ไฟล์แบบ อักษร | [] |
| โหลดล่วงหน้า | URL เพิ่มเติมที่ใช้สำหรับเมตาโหลดล่วงหน้า PRELOAD สำหรับ URL ที่ให้ไว้ในแอตทริบิวต์ file ของแบบ custom และ web จะถูกสร้างขึ้นโดยอัตโนมัติ | [] |
โหลดรูปแบบฟอนต์และไฟล์ในโหมดลำดับความสำคัญต่ำ หากคุณต้องการเพิ่มแบบอักษรในแบบที่แสดงให้จัดการกับ fout ด้วยตัวคุณเองและตรวจสอบให้แน่ใจว่าเวลาในการแสดงผลของหน้านั้นต่ำคุณควรใช้โหมด async
ข้อดี: ประสิทธิภาพการแสดงเนื้อหาจะปรากฏขึ้นก่อนที่จะดาวน์โหลดไฟล์แบบอักษรและแยกวิเคราะห์
จุดด้อย: ต้องจัดการกับ fout
โหลดสไตล์ฟอนต์และไฟล์ในโหมดจัดลำดับความสำคัญสูง หากคุณต้องการใช้ปลั๊กอินนี้เป็นวิธีง่ายๆในการเพิ่มฟอนต์ในโครงการของคุณเช่นเดียวกับที่คุณทำในโครงการอื่น ๆ โดยไม่ต้องเพิ่มประสิทธิภาพการทำงานและการจัดการกับ FOUT คุณควรใช้โหมด render-blocking
ข้อดี: มาร์กอัปแบบง่าย ๆ Fout จะไม่เกิดขึ้นในกรณีส่วนใหญ่
จุดด้อย: รูปแบบฟอนต์และไฟล์ฟอนต์สามารถชะลอเวลาในการทาสีเนื้อหาแรก
เมื่อโหลดแบบอักษรแบบอะซิงโครนัสแฟลชของข้อความที่ไม่ได้รับการรักษา (FOUT) อาจเกิดขึ้นได้เนื่องจากแบบอักษรโหลดไม่กี่นาทีหลังจากหน้าจะปรากฏขึ้นต่อผู้ใช้
เพื่อหลีกเลี่ยงสิ่งนี้เราสามารถใช้ CSS เพื่อจัดรูปแบบตัวอักษรทางเลือกเพื่อให้ตรงกับขนาดตัวอักษรความสูงของเส้นและระยะห่างจดหมายของแบบอักษรหลักที่โหลด
เมื่อ enableListener: true ถูกตั้งค่าในการกำหนดค่าปลั๊กอินใน gatsby-config.js คลาส HTML จะถูกเพิ่มเข้าไปในองค์ประกอบ <body> เนื่องจากตัวอักษรถูกโหลด
รูปแบบชื่อคลาส HTML จะอยู่ในรูปแบบต่อไปนี้ wf-[font-family-name] เมื่อฟอนต์ทั้งหมดถูกโหลด wf-all
คุณสามารถใช้ตัวจับคู่สไตล์ตัวอักษรเพื่อปรับฟอนต์ทางเลือกที่สมบูรณ์แบบและการกำหนดค่า CSS ทางเลือก
นี่คือตัวอย่างว่าองค์ประกอบ body จะมีลักษณะอย่างไรหลังจากโหลดแบบอักษรทั้งหมด (ขึ้นอยู่กับการกำหนดค่า)
< body
class =" wf-lazy-monday wf-font-awesome-5-brands wf-font-awesome-5-free wf-staatliches wf-all "
> </ body > interval และ timeoutwf-[font-family-name] เพื่อหลีกเลี่ยงการผสมการตั้งชื่อ อย่าลังเลที่จะรายงานปัญหาที่คุณพบและรู้สึกอิสระที่จะมีส่วนร่วมในโครงการโดยการสร้างคำขอดึง
ยินดีต้อนรับและชื่นชม!
ขอบคุณสำหรับการบริจาคของคุณ!
Henrik • Lennart • Francis Champagne • Hugo
ขอบคุณสำหรับการสนับสนุน!
สตูดิโอหุ่นยนต์
