เครื่องมือค้นหาจำนวนมากจะจัดอันดับหน้าเว็บตามความเหมาะกับอุปกรณ์เคลื่อนที่ แบบอักษรที่เล็กกว่า 12 พิกเซลจะอ่านได้ยากในอุปกรณ์เคลื่อนที่ และอาจต้องซูมเข้าเพื่อแสดงข้อความในขนาดที่อ่านสบายตา
วิธีที่การตรวจสอบขนาดแบบอักษรของ Lighthouse ไม่สำเร็จ
Lighthouse จะแจ้งหน้าเว็บที่มีขนาดแบบอักษรเล็กเกินกว่าจะอ่านได้โดยง่ายในอุปกรณ์เคลื่อนที่ ดังนี้
![การตรวจสอบ Lighthouse แสดงหน้าเว็บมีขนาดแบบอักษรที่อ่านไม่ออก](https://developer.chrome.google.cn/static/docs/lighthouse/seo/font-size/image/lighthouse-audit-showing-38ff49780439c.png?authuser=9&hl=th)
Lighthouse จะแจ้งหน้าที่ข้อความอย่างน้อย 40% มีขนาดแบบอักษรเล็กกว่า 12 พิกเซล เมื่อหน้าเว็บไม่ผ่านการตรวจสอบ Lighthouse จะแสดงผลลัพธ์ในตารางที่มี 4 คอลัมน์ ดังนี้
แหล่งที่มา | ตําแหน่งแหล่งที่มาของชุดกฎ CSS ที่ทําให้ข้อความที่อ่านไม่ออก |
ตัวเลือก | ตัวเลือกของชุดกฎ |
% ของข้อความในหน้า | เปอร์เซ็นต์ของข้อความในหน้าเว็บที่ได้รับผลกระทบจากชุดกฎ |
ขนาดแบบอักษร | ขนาดที่คำนวณได้ของข้อความ |
วิธีแก้ไขแบบอักษรที่อ่านไม่ออก
ตรวจสอบขนาดแบบอักษรใน CSS ตั้งแบบอักษรให้มีขนาดอย่างน้อย 12 พิกเซลบนข้อความอย่างน้อย 60% บนหน้าเว็บ
วิธีแก้ไขการกำหนดค่าวิวพอร์ตที่ขาดหายไป
หาก Lighthouse รายงาน Text is illegible because of a missing viewport config
ให้เพิ่มแท็ก <meta name="viewport" content="width=device-width, initial-scale=1">
ลงใน <head>
ของเอกสาร
ดูข้อมูลเพิ่มเติมที่โพสต์ไม่มีแท็ก <meta name="viewport">
ที่มี width
หรือ initial-scale
แหล่งข้อมูล
ซอร์สโค้ดสำหรับการตรวจสอบเอกสารไม่ใช้ขนาดแบบอักษรที่อ่านง่าย