faux pas
1.0.0
สคริปต์เพื่อเน้นองค์ประกอบที่ไม่ตรงกันอย่างไม่ถูกต้องกับ @font-face block ซึ่งอาจส่งผลให้เกิดการเรนเดอร์แบบตัวหนาหรือเทียม ทำงานแบบสแตนด์อโลน - ไม่มีการพึ่งพา
ต้องการสิ่งนี้ในบรรทัดคำสั่ง? ตรวจสอบ node-faux-pas
นอกจากนี้ยังมีหน้าทดสอบที่ครอบคลุมมากขึ้น
เมื่อคุณรวมบล็อก CSS @font-face ในหน้าของคุณคุณจะระบุ font-family font-weight และ font-style ภายในบล็อกนั้น เมื่อคุณใช้ตัวอักษรเว็บคุณจะระบุคุณสมบัติเดียวกันเหล่านั้นในองค์ประกอบในหน้าของคุณ ในขณะที่คุณจำเป็นต้องจับคู่ค่าของ font-family อย่างแน่นอนเพื่อใช้ตัวอักษรเว็บ font-weight และ font-style ไม่จำเป็นต้องจับคู่ที่แน่นอน สิ่งนี้สามารถนำไปสู่พฤติกรรมที่ไม่คาดคิดขณะที่เบราว์เซอร์ใช้สิ่งที่มีอยู่แม้ว่ามันจะไม่ใช่การจับคู่ที่ดีก็ตาม
นอกจากนี้หากองค์ประกอบของคุณต้องการ font-weight น้อยกว่าหรือเท่ากับ 500 แต่บล็อก @font-face ของคุณมีตัวแปรแบบอักษรของคุณที่เป็นตัวหนาเท่านั้นเบราว์เซอร์จะพยายามสังเคราะห์ตัวอักษรเว็บตัวหนาสำหรับคุณ การเรนเดอร์สังเคราะห์นี้มักจะเป็นส่วนย่อย การสังเคราะห์เดียวกันเกิดขึ้นเมื่อคุณต้องการตัวเอียง แต่ไม่มีตัวอักษรเว็บตัวเอียง พฤติกรรมนี้สามารถควบคุมได้ด้วยคุณสมบัติ font-synthesis หากเบราว์เซอร์รองรับ
faux-pas ช่วยคุณโดยการบันทึกและรายงานการเรนเดอร์ที่ไม่ตรงกันและการเรนเดอร์ faux เหล่านี้เพื่อให้คุณสามารถแก้ไขรหัสที่ละเมิด
มีให้ใน NPM เป็น fg-faux-pas :
npm install --save-dev fg-faux-pas
faux-pas.js และ faux-pas.init.js (เคล็ดลับ: ใช้ไฟล์ init ของคุณเองเพื่อเปลี่ยนตัวเลือกการกำหนดค่า)node-faux-pas console: true : ใช้ console เพื่อส่งออกข้อมูลการบันทึกเต็มรูปแบบ (คำเตือนสำหรับองค์ประกอบและข้อผิดพลาดที่ไม่ตรงกันสำหรับการเรนเดอร์เทียม)highlights: true : เพิ่มสไตล์เฉพาะให้กับองค์ประกอบที่ไม่ตรงกัน/เทียมบนหน้าสำหรับการตรวจสอบด้วยภาพmismatches: true : ความไม่ตรงกันอาจไม่ใช่การเรนเดอร์เทียมแม้ว่าจะเป็นการกำหนดค่าผิดพลาด - ตัวเลือกนี้ช่วยให้คุณปิดใช้งานคำเตือนเหล่านี้ได้ อะไรก็ตามที่รองรับ CSS Font Loading API:
ใช้ gulp เพื่อสร้างไฟล์เอกสาร HTML ใหม่ (อัปเดต bookmarklet โดยอัตโนมัติด้วยรหัสล่าสุด)
