ตอนนี้ฟีเจอร์ปรับขนาดแบบอักษรของ CSS อยู่ในเกณฑ์พื้นฐานแล้ว

Rachel Andrew

เผยแพร่เมื่อวันที่ 23 กรกฎาคม 2024

พร็อพเพอร์ตี้ font-size-adjust ของ CSS พร้อมใช้งานใน Chrome แล้ววันนี้ และเป็นส่วนหนึ่งของ Baseline Newly Available พร็อพเพอร์ตี้นี้ช่วยป้องกันไม่ให้เลย์เอาต์เปลี่ยนเมื่อโหลดแบบอักษรสำรอง และช่วยให้มั่นใจว่าแบบอักษรสำรองจะอ่านออกได้เมื่อใช้กับแบบอักษรขนาดเล็ก font-size-adjust พร็อพเพอร์ตี้เป็นส่วนหนึ่งของ Interop 2024 จึงนับเป็นความสำเร็จอีกขั้นสำหรับความพยายามในการปรับปรุงความสามารถในการทำงานร่วมกันของแพลตฟอร์มเว็บ

ปัญหา

เมื่อเปรียบเทียบแบบอักษร 2 แบบที่ตั้งค่าไว้ให้มีขนาดเท่ากัน ข้อความที่แสดงอาจใช้พื้นที่ต่างกันมาก ขึ้นอยู่กับรูปร่างและขนาดของสัญลักษณ์ ตัวอย่างเช่น เดโมต่อไปนี้แสดงข้อความใน Verdana และ Arial โดยทั้ง 2 แบบตั้งค่าไว้ที่ 16 พิกเซล

ข้อความที่แสดงขนาด 16 พิกเซลใน Verdana และ Arial

ความแตกต่างของขนาดนั้นมาจากค่าสัดส่วน ซึ่งเป็นความสูงของตัวอักษรตัวพิมพ์เล็กเมื่อเทียบกับตัวอักษรตัวพิมพ์ใหญ่ในแบบอักษรนั้นๆ ซึ่งจะแตกต่างกันไปในแต่ละแบบอักษร

ซึ่งอาจทำให้เกิดปัญหา 2 อย่างเมื่อใช้แบบอักษรที่มีค่าแอสเปกต์อื่นเป็นแบบอักษรสำรอง ประการแรก พื้นที่ที่ใช้โดยแบบอักษรจะเปลี่ยนไป ประการที่ 2 คือแบบอักษรสำรองที่คุณเลือกอาจอ่านยากกว่าแบบอักษรที่ระบุไว้ก่อน โดยเฉพาะเมื่อใช้แบบอักษรขนาดเล็ก เนื่องจากความสูงสัมพัทธ์ของอักษรตัวพิมพ์เล็กกับตัวพิมพ์ใหญ่เป็นปัจจัยสำคัญในการอ่านออกเสียง

ประโยชน์ของ font-size-adjust

พร็อพเพอร์ตี้ font-size-adjust ช่วยให้คุณปรับแบบอักษรสำรองให้เข้ากับแบบอักษรแรกได้ดียิ่งขึ้น ตัวอย่างต่อไปนี้แสดงแบบอักษร 2 แบบที่เคยแสดงก่อนหน้านี้ โดยครั้งนี้แบบอักษรที่ 2 ได้รับการปรับให้ตรงกับแบบอักษรที่ 1

การใช้ font-size-adjust

ตัวอย่างนี้ใช้ค่าเดี่ยว ซึ่งเป็นตัวเลขที่จะปรับแบบอักษรโดยใช้เมตริกแบบอักษรเริ่มต้นของ ex-height อัตราส่วนนี้หมายถึงอัตราส่วนความสูงของ x-height ซึ่งเป็นความสูงของ x ตัวพิมพ์เล็กในแบบอักษรกับขนาดแบบอักษร นอกจากนี้ คุณยังระบุเมตริกแบบอักษรที่ใช้ได้ด้วย ในตัวอย่างถัดไป เราได้ปรับขนาดแบบอักษรให้เป็นมาตรฐานโดยใช้คีย์เวิร์ด ch-width นอกเหนือจากตัวเลข

การใช้ font-size-adjust กับเมตริกแบบอักษร ch-width

หากต้องการดูค่าที่เป็นไปได้ทั้งหมด โปรดดูเอกสารประกอบ MDN สําหรับ font-size-adjust

คุณควรตรวจสอบเว็บไซต์ที่ใช้แบบอักษรสำรองและดูว่าการปรับเปลี่ยนเล็กน้อยโดยใช้ font-size-adjust จะช่วยให้ผู้อ่านที่ใช้แบบอักษรสำรองได้รับประสบการณ์การใช้งานที่ดีขึ้นหรือไม่ โดยเฉพาะตอนนี้ที่ font-size-adjust พร้อมให้บริการแล้วในทุกที่