ใช้ฟอนต์ภาษาไทยสวยๆในเว็บด้วย CSS3 @font-face

นานมาแล้วที่เราชาวคนทำเว็บต้องทนใช้ฟอนต์ภาษาไทยในตระกูล Web Safe Font(MS Sans Serif, Tahoma, etc…) และถ้าอยากใช้ฟอนต์สวยๆก็ต้องจำใจทำตัวหนังสือให้เป็นรูปภาพ ซึ่งถึงจะใช้ได้แต่ก็มีข้อเสียมากมาย เช่น

คอมพิวเตอร์อ่านไม่ออก ไม่รู้ว่าเป็นตัวหนังสือ
ทำให้เว็บมีขนาดใหญ่ ใช้เวลาโหลดนานขึ้น
ก๊อปปี้ตัวหนังสือไม่ได้
แก้ไขข้อความยาก ต้องเสียเวลาทำภาพใหม่
ฯลฯ

แต่ข้อจำกัดเหล่านี้ก็กำลังจะหมดไป ด้วยคุณสมบัติใหม่ของ CSS3 @font-face ที่จะทำให้เราสามารถนำตัวฟอนต์สวยๆมาใส่ในเว็บไซต์ได้ และจะยังมคุณสมบัติเหมือนตัวหนังสือทั่วไปทุกประการ

Update: โพสใหม่ รวม 13 ฟอนต์ไทยแห่งชาติในรูปแบบ Webfont เพื่อใช้แสดงผลในเว็บไซต์ สำหรับคนที่ต้องการฟอนต์ที่ดาวน์โหลดแล้วใช้งานได้เลย

วิธีการใช้ @font-face

วิธีใช้จริงๆแล้วไม่ได้ยากมากมาย เนื่องจาก @font-face นี้เป็นหนึ่งในไม่กี่อย่างของ CSS3 ที่สามารถใช้งานใน IE ได้แม้กระทั่งใน IE6 เลยทีเดียว โดยขั้นแรกก็เอาฟอนต์ที่เราชื่นชอบมาแปลงเป็นชุดของฟอนต์สำหรับใช้ในเว็บเสียก่อน โดยเครื่องมือที่ใช้ง่ายที่สุดได้แก่ @font-face Kit Generator โดย Font Squirrel ซึ่งวิธีการตั้งค่าสำหรับฟอนต์ไทยจะต้องใช้โหมด EXPERT ดังภาพ

ส่วนที่สำคัญคือตั้ง Subsetting เป็น No Subsetting เพื่อให้ใช้ภาษาไทยได้

โดยฟอนต์ที่ใช้เป็นตัวอย่างนี้คือฟอนต์ TH Mali Grade 6 (ด.ญ. มะลิ ป.6) ออกแบบโดย คุณสุดารัตน์ เลิศสีทอง มาจากชุด 13 ฟอนต์ฟรีมาตรฐาน จากสำนักงานส่งเสริมอุตสาหกรรมซอฟต์แวร์แห่งชาติ (SIPA)13 ฟอนต์ฟรีมาตรฐาน จากสำนักงานส่งเสริมอุตสาหกรรมซอฟต์แวร์แห่งชาติ (SIPA)

เมื่อตั้งค่าเรียบร้อยก็กด Download ด้านล่าง และจะได้ไฟล์มาดังนี้

โดยการนำไปใช้งานก็ไม่ยาก เพียงแค่นำไฟล์สกุล eot, woff, ttf และ svg ใส่ในโฟลเดอร์ใดๆในเว็บ และคัดลอกโค้ทจากไฟล์ stylesheet.css ไปยังไฟล์ stylesheet หลัก จากนั้นก็เปลี่ยน path ที่อยู่ของไฟล์ฟอนต์ให้ถูกต้อง เช่น

`01`	`@font-face {`

`02`	`font-family:` `'THMaliGrade6Regular';`

`03`	`src:url('/path/th_mali_grade6-webfont.eot');`

`04`	`src:url('/path/th_mali_grade6-webfont.eot?iefix')` `format('eot'),`

`05`	`url('/path/th_mali_grade6-webfont.woff')` `format('woff'),`

`06`	`url('/path/th_mali_grade6-webfont.ttf')` `format('truetype'),`

`07`	`url('/path/th_mali_grade6-webfont.svg#webfontCXAunSZT')`

`08`	`format('svg');`

`09`	`font-weight:` `normal;`

`10`	`font-style:` `normal;`

11 }

12 body{

`13`	`font-family: THMaliGrade6Regular,` `Tahoma,` `sans-serif;`

14 }

ดูตัวอย่างการนำไปใช้งานจริง

จากนี้ไปส่วนที่สำคัญคือการทดสอบในเว็บบราวเซอร์ต่างๆ เนื่องจากแต่ละฟอนต์จะแสดงผลในแต่ละบราวเซอร์ได้ไม่เหมือนกัน

การใช้ Google Font API

นอกจากการทำฟอนต์ดังที่กล่าวมาแล้ว ยังมีวิธีง่ายๆอีกอย่าง คือการใช้ฟอนต์จาก Google Font API โดยไปที่ http://www.google.com/webfonts คลิกยังฟอนต์ที่ต้องการ และคลิก Use this font จากนั้นทำการคัดลอกโค้ทมาไว้ภายใน เช่น

เมื่อต้องการนำไปใช้ก็เพียงแค่เพิ่มฟอนต์ลงใน CSS เช่น

1 h1 {

`2`	`font-family:` `'Michroma',` `arial,` `serif;`

3 }

แต่ฟอนต์จาก Google Font API นี้ยังใช้ภาษาไทยไม่ได้ หากต้องการจะใช้ฟอนต์สำหรับภาษาไทยและอังกฤษแตกต่างกันก็ทำได้ง่ายๆโดยเพิ่มฟอนต์ทั้งสองลงใน Font Stack โดยให้ฟอนต์ภาษาอังกฤษมาก่อน เช่น

1 h1 {

`2`	`font-family:` `'Michroma','THMaliGrade6Regular',` `serif;`

3 }

เมื่อบราวเซอร์เรียกใช้งานก็จะพยายามเรียกฟอนต์ Michroma ก่อน และหากพบตัวหนังสือภาษาไทย และฟอนต์ดังกล่าวไม่สามารถแสดงผลได้ มันก็จะทำการเรียกฟอนต์ต่อไป ซึ่งก็คือ THMaliGrade6Regular มาใช้ในการแสดงผลภาษาไทยนั้นเอง

เพียงเท่านี้ก็สามารถใช้งานฟอนต์สวยๆในเว็บไซต์ได้ โดยไม่ต้องทนอยู่ในข้อจำกัดของ Web Safe Font อีกต่อไป

Update: โพสใหม่ รวม 13 ฟอนต์ไทยแห่งชาติในรูปแบบ Webfont เพื่อใช้แสดงผลในเว็บไซต์ สำหรับคนที่ต้องการฟอนต์ที่ดาวน์โหลดแล้วใช้งานได้เลย