woff2 feature test

โครงการนี้ถูกเก็บถาวรและที่เก็บข้อมูลจะไม่ได้รับการดูแลอีกต่อไป

WOFF2-feature-test

การทดสอบคุณสมบัติอย่างง่ายสำหรับรูปแบบตัวอักษร WOFF2

• มีให้บริการใน NPM เป็นการ woff2-feature-test

ใช้เคส

เนื่องจากเราใช้ loadCSS เพื่อโหลดสไตล์ชีทที่มีรูปแบบทั้งหมดของเราทั้งหมดเป็นข้อมูล URIs เราจำเป็นต้องมีวิธีในการพิจารณาว่ารูปแบบ WOFF2 นั้นรองรับในเบราว์เซอร์หรือไม่

 var fontFile = "/url/to/woff.css";

// Use WOFF2 if supported
if( supportsWoff2 ) {
	fontFile = "/url/to/woff2.css";
}

loadCSS( fontFile );

ความต้องการ

1. ต้องไม่ทำการร้องขอ HTTP ไปยังเซิร์ฟเวอร์ระยะไกลสิ่งใดก็ตามที่ใช้ไฟล์ทดสอบระยะไกลออกไปแล้ว
2. ชอบวิธีการแบบซิงโครนัสกับแบบอะซิงโครนัสเราต้องการให้มันดำเนินการและผลลัพธ์ที่จะพร้อมใช้งานทันที
3. มากกว่าการอนุมาน มีข้อเสนอแนะว่าเราสามารถอนุมานได้ตามการมีอยู่ของ FONT LOAKING API เนื่องจากในปัจจุบันตรงกับการสนับสนุนสำหรับ WOFF2 แต่จะเกิดอะไรขึ้นถ้าเบราว์เซอร์ใช้ FONT LOAKING API แต่ไม่ได้ใช้ WOFF2 สถานการณ์นี้ดูเหมือนจะเป็นไปได้อย่างสิ้นเชิงและเราไม่ต้องการข้อดีที่ผิดพลาดใด ๆ

เข้าใกล้

เราใช้ตัวอักษรโหลด API เพื่อโหลดข้อมูล WOFF2 ที่ว่างเปล่าและดูว่าสถานะชุดตัวอักษรกำลังโหลดหรือไม่ หากพยายามโหลดรูปแบบจะได้รับการสนับสนุน หากไม่เป็นเช่นนั้นรูปแบบจะไม่ได้รับการจดจำ (ดูการทดสอบที่ล้มเหลวโดยเจตนาด้วยรูปแบบจินตภาพ)

การสาธิต

หากเบราว์เซอร์ใช้รูปแบบ WOFF2 ในที่สุด แต่ไม่ได้ใช้ FONT LOADING API สคริปต์นี้จะรายงานค่าลบที่ผิดพลาด (ซึ่งเป็นที่นิยมสำหรับสถานการณ์บวกเท็จที่อธิบายไว้ข้างต้น)

ข้อ จำกัด

โปรดทราบว่าหากคุณใช้ส่วนหัวนโยบายความปลอดภัยของเนื้อหาที่เข้มงวดบน font-src นั่นอาจทำให้เกิดปัญหากับการทดสอบคุณสมบัตินี้

คุณจะต้องตรวจสอบให้แน่ใจว่านโยบายความปลอดภัยของเนื้อหาของคุณอนุญาตให้ข้อมูล URIS

ตัวอย่างเช่น gitHub.com (ไม่ใช่ gitHub.io) ใช้ Content-Security-Policy:default-src *; font-src assets-cdn.github.com; ซึ่งปฏิเสธข้อมูล uri @font-face ของเรา

ภาคผนวก

การแก้ไขก่อนหน้านี้ของสคริปต์นี้สามารถพบได้ในส่วนสำคัญ