[CSS] วิธีแก้ CSS3 @font-face ความสูงไม่เท่ากันใน Windows กับ Mac OS

ล่าสุดเจอปัญหาแปลก ๆ ที่ไม่คิดว่าจะเจอ คือใช้ฟ้อนต์จาก f0nt.com มาทำ CSS3 @font-face แล้วฟ้อนต์แสดงผลใน Windows กับ Mac OS ความสูงไม่เท่ากัน ทั้งที่อยู่ใน Browser เดียวกัน (Firefox)

วิธีแก้ คือ เวลาที่เราแปลงฟ้อนต์เป็น CSS3 @font-face ผ่าน FontSquirrel Web Font Generator

ให้เลือก Expert แล้ว ต้องติ๊กถูกตรง Fix Vertical Metrics เสมอ (มันจะติ๊กให้อยู่แล้วถ้าเลือก Expert) ตั้งค่าตามนี้เลย

fontsquirrel-fix-height

เพียงเท่านี้ฟ้อนต์ก็จะสูงเท่ากันสวยงามทั้ง Windows / Mac

Leave a Reply

Your email address will not be published. Required fields are marked *