Tutorial

ปรับ Font ในเว็บให้ดูสวยขึ่นด้วย Font Smoothing กับ CSS เพียงบรรทัดเดียว

By Arnon Puitrakul - 22 October 2020 - 1 min read min(s)

ปรับ Font ในเว็บให้ดูสวยขึ่นด้วย Font Smoothing กับ CSS เพียงบรรทัดเดียว

Font ถือว่าเป็นเหมือนหน้าตาของเว็บ มันใช้บอกสไตล์ บอกอารมณ์ของเว็บเราได้มากมายตามที่เราต้องการ โดยเฉพาะเวลาที่เราจะทำเว็บ แล้วเราก็จะ Design มันในโปรแกรมต่าง ๆ เช่นเรา เราใช้ Sketch ในการออกแบบ แต่พอทำเว็บออกมาจริง ๆ แล้ว ทำไมหน้าตา Font ของเว็บจริง กับ ที่ Design ไว้มันไม่เหมือนกัน ทั้ง ๆ ที่เราตั้งค่า Font Family ถูกแล้วนะ วันนี้เราจะพาทุกคนไปรู้จักกับการทำ Font Smoothing ด้วย CSS กัน

Font Smoothing คืออะไร ?

Pixel
พื้นที่ในกรอบสีดำมีขนาด 5x5 pixel

ในโลกของคอมพิวเตอร์ เราแสดงผลกันโดยใช้หน่วยที่เล็กที่สุดคือ Pixel สมมุติว่า เราบอกว่า ภาพนี้มีขนาด 5x5 Pixel ก็คือ ภาพนี้มีความ กว้างทั้งหมด 5 Pixel และ ยาวทั้งหมด 5 Pixel

ทีนี้ ถ้าเราต้องการที่จะเขียนตัว A ลงไป ในภาพนี้ละ เราจะทำยังไง ตรงส่วนที่เป็นเส้นตรง ก็ไม่น่าจะมีปัญหา เราก็สามารถ ระบายไปตรง ๆ ได้เลย แต่ปัญหามันจะเกิดที่พวกส่วนที่เป็น 45 องศา คือ ส่วนที่เป็นสามเหลี่ยมของตัว A เราจะวาดมันลงไปในช่องที่เป็น 90 องศาได้ยังไง อื้ม....

งั้นเราใส่เป็นช่องตามแนวทะแยงละกัน ก็ดูน่าจะดีที่สุดแล้ว แต่ปัญหาคือ เมื่อเราดูภาพรวม ๆ เห๋ ทำไมตัว A เรามันดูแปลก ๆ นะ มันหยัก ๆ ไปหมด นั่นเพราะ ตอนที่เราวาด เราวาดทะแยงขึ้นไปเรื่อย ๆ นั่นเอง เลยทำให้มันดูหยัก ๆ ไปหมด

ปัญหานี้ไม่ได้เกิดแค่ในเรื่องของ Font เท่านั้น แต่เกิดในการแสดงผลเกือบทั้งหมดเลย ส่วนที่เราน่าจะได้เห็นเยอะมากในปัจจุบันคือ เกม เพราะเกมมันก็ต้องใช้ Graphic เยอะมากเนอะ เพื่อให้ออกมาเป็นเกมที่เราเห็นกัน เครื่องต้องวาดเส้น แสง และ เงา ออกมาให้เราเห็นผ่านจอ เลยไม่แปลกที่จะเจอปัญหาการแสดงผลแล้วขอบมันมีความหยักเกินขึ้น

วิธีการแก้ปัญหาคือ การทำสิ่งที่เรียกว่า Antialising หรือภาษาไทยเราเรียกว่า การลดรอยหยัก ถ้าเราเล่นเกม เวลาเราเข้าไปใน Settings ของเกม เราอาจจะเคยได้เห็นพวกตัวเลือกของ Antialising ว่ามันมีหลายแบบ หลายเทคนิคมาก ๆ เช่น FXAA และ MSAA ปัญหาของ Font เราไม่ได้ยากขนาดนั้น เพราะเราไม่ได้วาด Frame ใหม่เยอะมาก ไม่จำเป็นที่ต้องใช้วิธีที่มีความเร็วอะไรมาก และ Font เองก็ไม่ได้มีความซับซ้อนมากอีกเช่นกัน

ใน Font เอง ถ้าเราเอาสั้น ๆ ง่าย ๆ คือ เราก็จะทำการหลอกตาคนด้วยการเดิม Pixel ที่อยู่รอบ ๆ ด้วย Pixel ที่มีความเข้มที่น้อยกว่า เมื่อเราดูภาพรวม เราจะเห็นว่า มันดูเรียบเนียนมากขึ้น และดูอ่านง่ายกว่าเยอะ พวกเทคนิคลึก ๆ เราขอไม่เขียนละกัน มันจะยาว

Font Smoothing ด้วย CSS

ในการแสดงผลของเว็บเอง เราก็จะใช้พวก CSS ในการจัดหน้า การใส่ลักษณะต่าง ๆ ในหน้าเว็บของเรา ซึ่งก็มีส่วนของ Font Smoothing เช่นกัน

-webkit-font-smoothing: antialiased;
-mox-osx-font-smoothing: greyscale;

เราเพียงแค่เอา Style ด้านบนนี้ไปเติมให้กับ Font แต่ละส่วนที่อยู่ในเว็บของเราได้เลย ถ้าเราใช้ทั้งเว็บก็อาจจะไปแปะใน html หรือ body เลยก็ได้ หรือ ถ้าเราอยากที่จะระบุเจาะจงมาก ๆ ก็อยู่ที่เราเลย ไม่ว่ากัน

จากหัวเรื่อง เราบอกว่า บรรทัดเดียว ตอนนี้มา 2 บรรทัด จะฟาดเราอะเดะ ฮั่นแน่ ดูออกแหละ จริง ๆ ถ้าเว็บของเราไม่ได้เผื่อว่า คนที่ใช้งานเว็บของเราจะใช้ The Next IE ที่ชื่อว่า Safari ใช้งาน เราก็ใช้งานแค่บรรทัดแรกก็ได้แล้ว

CSS Font Smoothing

จากที่เห็น ก็คือ เว็บของเรา เราเอาไปแปะไว้ที่ html เลย เพราะเราต้องการทำ Font Smoothing ทั้งเว็บ ทุกส่วน ไม่ได้สนว่าจะไม่ Smooth ส่วนไหน

สรุป : ใส่ได้ใส่ เราว่าดี

Font Smoothing Result

ภาพนี้ เป็นตัวอย่างของการใส่ Font Smoothing และ ไม่ใส่ในเว็บของเราเอง ดูเผิ่น ๆ อาจจะเหมือนกันเลย แต่ ถ้าเราสังเกตุอันที่มันไม่ได้ทำ Font Smoothing มันจะแอบหนากว่านิ๊ดนึง แต่อันที่ทำไปแล้ว มันจะดูบางกว่า แต่มันดูคม ดูเรียบ กว่าเยอะ

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

ทำให้เราสนับสนุนให้ใส่ไว้ก็ดี ทำให้อ่านง่ายกว่าเดิม ส่วนพวกเรื่อง Performance เราว่ามันมีอยู่แล้วละ เพราะการทำพวก Antialising มันต้องมีการคำนวณเพิ่มเติมแน่นอน แต่จากการใช้งาน ทั้งบน Desktop และ Mobile ในปัจจุบัน เราไม่เห็นความแตกต่างแล้วละ