ใช้ฟอนต์ภาษาไทยสวยๆในเว็บด้วย 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 ดังภาพ

Font Genetator

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

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

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

Font files

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

@font-face {
 font-family: 'THMaliGrade6Regular';
 src:url('/path/th_mali_grade6-webfont.eot');
 src:url('/path/th_mali_grade6-webfont.eot?iefix') format('eot'),
     url('/path/th_mali_grade6-webfont.woff') format('woff'),
     url('/path/th_mali_grade6-webfont.ttf') format('truetype'),
     url('/path/th_mali_grade6-webfont.svg#webfontCXAunSZT') 
     format('svg');
 font-weight: normal;
 font-style: normal;
}
body{
  font-family: THMaliGrade6Regular, Tahoma, sans-serif;
}

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

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

 

การใช้ Google Font API

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

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

h1 { 
   font-family: 'Michroma', arial, serif; 
}

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

h1 { 
   font-family: 'Michroma','THMaliGrade6Regular', serif; 
}

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

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

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

Posted on:


27 Comments

  1. kanogwan chainatr, June 19, 2011:

    ชอบตัวหนังสือน่ารักๆค่ะ

  2. kanogwan chainatr, June 19, 2011:

    ^^

  3. sarto, July 2, 2011:

    ความรู้อีกแล้ว ^_^

  4. ikenggg, July 13, 2011:

    ขอบคุณนะครับ หาตั้งนานว่าทำยังไง

  5. jui248, July 20, 2011:

    ใช้กะ IE9 ไม่ได้เหรอครับ

    ไม่ support Browser ตัวไหน เวอร์ชัน ไหนบ้างอ่ะ
    ใช้กับ FF , Chrome ได้

  6. nice, July 20, 2011:

    @jui248
    Browser support ตามนี้เลย
    Chrome 0.3+
    Firefox 3.5+
    Internet Explorer 4+
    Opera 10+
    Safari 3.1+

  7. mine, August 18, 2011:

    เห็นคุณ nice บอกว่า support ทุก browser ตามที่แจ้งไว้ จริงๆ มันก็แสดงผลได้ทุก brower ค่ะ แต่แปลกตรงที่ รูปแบบที่ได้ มันไม่เหมือนกัน ทั้ง ๆที่ ใช้ font ชนิดเดี่ยวกัน แล้วจะแก้ปัญหาแบบนี้ได้ยังยังไงค่ะ รบกวนด้วยค่ะ

    ขอบคุณค่ะ

  8. nice, August 18, 2011:

    ตอบ @mine จ้า

    อย่างที่เขียนไว้ในโพสว่าแต่ละบราวเซอร์มันจะแสดงผลต่างกันไป ซึ่งมันเกิดจากหลายสาเหตุ เช่น การเรนเดอร์ตัวหนังสือของระบบปฎิบัติการ(ใน WinXP จะมีตั้งการเรนเดอร์ฟอนต์เป็น ClearType หรือ Normal) ถ้าเจอเครื่องที่ไม่ได้เปิด ClearType ตัวหนังสืออาจจะเละไปเลย ซึ่งอันนี้เราก็ไปบังคับคนใช้เว็บให้เปิดไม่ได้

    นอกจากนั้นก็ยังมีขนาดของตัวหนังสือ ความต่างกับของสีตัวหนังสือกับพื้นหลัง(ถ้าต่างกันน้อย ก็อาจจะแสดงผลได้ไม่ดีในบางบราวเซอร์)

    เพราะงั้นเวลาทำก็ต้องทดสอบเยอะๆ บนทุกๆบราวเซอร์และระบบปฎิบัติการเท่าที่จะทำได้ วิธีแก้อาการด๋อยโดยปกติคือเพิ่มขนาดและความเข้มของสีตัวหนังสือ ถ้ามันไปไม่ไหวจริงๆอาจจะต้องเลือกฟอนต์อื่น (ภาษาไทยเท่าที่เจอมาพบว่ายังมีปัญหาอยู่มาก ถ้าจะให้ไม่ปวดหัวมากแนะนำให้ใช้เฉพาะในส่วนของ Heading ที่ตัวใหญ่ ชัดเจน ก็จะเจอปัญหาน้อยหน่อย)

  9. jenny, September 3, 2011:

    งงค่ะ ตรงต้องเปลี่ยน path ที่อยู่ของไฟล์ฟอนต์ให้ถูกต้อง ดูไม่เป็นอ่ะค่ะว่าต้องเปลี่ยนตรงไหน
    แต่ก็เป็นความรู้ดี ขอบคุณค่ะ ถ้ามีโอกาสจะลองทำดู

  10. sineenad Grinseesuk, November 8, 2011:

    ฏ้ตัวหนังสือ มีหลายเเบบดีค่ะ เเร้วตัวหนังสือที่สวยมันมีเยอะ เลือกไม่ถูกเลย ว่าอันไหนดี สวยไปหมดเลย กดไลต์ไห้เลย

  11. P1N9, December 1, 2011:

    พอดีผมทำตามวิธีนี้อ่ะครับ ภาษาอังกฤษก็แสดงตามปกติ แต่มีปัญหาตรงภาษาไทยอ่ะครับ ทำไมมันถึงไปใช้ tahoma อ่ะครับ ใช้ฟอนต์ PSLKandaModernExtraRegular (ตัวลงมันเป็น psl162) โค้ดก็ตามนี้ครับ รบกวนช่วยตรวจทานทีครับ ขอบคุณครับ
    —————————————————————————————

    Font Testing!

    @font-face
    {
    font-family : ‘PSLKandaModernExtraRegular’ ;
    src : url(‘psl162-webfont.eot’) ;
    src : url(‘psl162-webfont.eot?#iefix’) format(‘embedded-opentype’),
    url(‘psl162-webfont.woff’) format(‘woff’),
    url(‘psl162-webfont.ttf’) format(‘truetype’),
    url(‘psl162-webfont.svg#PSLKandaModernExtraRegular’) format(‘svg’) ;
    font-weight : normal ;
    font-style : normal ;
    }
    body
    {
    font-family : PSLKandaModernExtraRegular, Tahoma, sans-serif ;
    margin-left : 10% ;
    margin-top : 0% ;
    margin-right : 10% ;
    margin-bottom : 0% ;
    background : #dcdcdc ;
    }

    ทดสอบจ้า
    ได้หรือเปล่าวะ
    ต้องได้สิน่า
    What the fuck ?

  12. nice, December 1, 2011:

    @P1N9

    ปัญหาที่เจอบ่อยๆก็คือ path ที่เรียกไปหาฟอนต์ผิด ตรง url(‘psl162-webfont.eot’) ;
    ให้คิดว่าชื่อไฟล์ฟอนต์ใน url() มันเรียกเหมือนเวลาเราใช้รูปภาพในเว็บ เช่น ถ้าเขียนในไฟล์ style.css แล้วโครงสร้างโฟลเดอร์เป็น

    * style.css
    * fonts/
    * * psl162-webfont.eot

    ก็ต้องเรียกไปหาฟอนต์โดยตรง url จะเป็น url(‘fonts/psl162-webfont.eot’) ; เป็นต้น

  13. P1N9, December 1, 2011:

    @nice
    ผมโยนฟอนต์ลงไปในโฟลเดอร์ที่อยู่เดียวกับไฟล์ Html ที่ผมใส่ลงไปอ่ะครับ แล้วก็ค่อนข้างเช็คหลายรอบเรื่องที่อยู่ของไฟล์

    ปัญหาที่พบตอนนี้คือ ตัวอักษรภาษาอังกฤษแสดงฟอนต์psl-162 ถูก แต่ภาษาไทยแสดงฟอนต์เป็น tahoma แทนที่จะเป็น psl-162 อ่ะครับ ผมใช้ UTF-8 ในการแสดงภาษาไทยบนเว็บ ไม่แน่ใจเหมือนกันว่าปัญหาอยู่ที่ตรงนี้หรือเปล่า แต่ที่ลอง TIS-620 กับ Windows-874 ก็ให้ผลลัพธ์เหมือนกันครับ

    ขอบคุณครับ

  14. P1N9, December 1, 2011:

    @nice
    ผมลองทดสอบกับฟอนต์ “รวม 13 ฟอนต์ไทยแห่งชาติในรูปแบบ Webfont เพื่อใช้แสดงผลในเว็บไซต์” และทำตามที่ทางบล็อกนี้ได้แนะนำ แล้วไม่พบปัญหาครับ คาดว่าน่าจะเกิดจากตัวฟอนต์เองหรือเปล่าไม่แน่ใจเหมือนกันครับ

    ชอบคุณครับ

  15. P1N9, December 1, 2011:

    *ขอบคุณครับ

  16. mamaart, January 26, 2012:

    ทำแล้วทำยังไงก็ไม่ได้อะคะ เช็คดูแล้วชื่อ font กับ path ก็ถูกนะ งง อะ

  17. Ek Mekong, May 10, 2012:

    @P1N9
    ผ่านมาเห็น แม้ว่าจะหลายเดือนแล้ว ก็เถอะ , ตอนที่ gen ใน fontsquirrel.com ตอนตั้งค่าต้องดูที่ Subsetting: ด้วยนะครับ ต้องตั้งเป็น no subsetting ไม่งั้นส่วนที่เป็นตัวอักษรไทยจะไ่ม่มีเลย
    ผมก็เคยเผลอเรอตรงนี้ งมตั้งนาน แต่ถ้าทำตามนี้แล้วยังไม่แก้อาการได้ คงต้องรอท่านอื่นมาตอบครับ

  18. Ek Mekong, May 10, 2012:

    @Ek Mekong
    อีกอย่างหนึ่ง ณ เวลาที่กำลังโพสอยู่นี้ Firefox ไม่อ่าน font-face ครับ มันไม่ยอมแสดงผล, มีวิธีแก้ง่ายๆ ก็คือ เพิ่มส่วนที่พิมพ์ข้างล่างเพิ่มไปในไฟล์ .htaccess ครับ

    Header set Access-Control-Allow-Origin “*”

    รายละเอียดเรื่องนี้อ่านเพิ่มได้ที่ http://stackoverflow.com/questions/2856502/css-font-face-not-working-with-firefox-but-working-with-chrome-and-ie

  19. nice, May 10, 2012:

    @Ek Mekong
    อาจจะใช่จริงๆด้วย ไม่ทันนึกเรื่องบอกให้คุณ @P1N9 ตั้งค่า No subsetting เพราะในบทความมีรูปประกอบการตั้งค่า No subsetting ไว้ชัดเจน (วงสีแดงไว้เลย) เลยคิดว่าเค้าคงตั้งตามที่กำหนดแล้ว

    @Ek Mekong
    เรื่อง Access Control Origin นั้นจะเป็นใน Firefox เมื่อเรียกใช้ฟอนต์ที่มาจากเว็บอื่นเท่านั้น (คนละ Domain กับไฟล์ CSS) อันนี้ไม่ใช่ bug แต่เป็นนโยบายเรื่องความปลอดภัย ถ้าเรียกใช้ฟอนต์จาก Domain เดียวกันจะสามารถใช้งาน font-face ได้เป็นปกติใน Firefox

  20. Anonymous, May 18, 2012:

    @nice ถามหน่ยครับโค๊ดใน head มันมี

    body{
    font-family: ‘KrungsriSimpleMediumRegular’;
    }

    จะลบออกก็ไม่ได้ เพราะหน้าเพจนึงมีหลายฟอนต์ และหลายรูปแบบ ตัวหนา ธรรมดา บาง อะไรแบบนี้ งงครับ เวลาGen ออกมาแล้วโค๊ดตัวนี้ไม่ใส่ใน css หว่า

  21. เวลาลบไม่ได้ค่ะ

  22. rrttt, May 23, 2013:

    ลองนี่ดูจะgenออกมาเป็น จาวา.js

    http://cufon.shoqolate.com/generate/

    http://cufon.shoqolate.com/generate/

    http://cufon.shoqolate.com/generate/

  23. ttt, May 28, 2013:

    ความรู้ขอบคุณมมากครับ

  24. Toni, August 11, 2013:

    ขอบคุณครับ กำลังหาวิธีพอดีเลยครับ

  25. kae, January 25, 2014:

    เสียเงินเหรอค่ะ ทำไมให้จ่ายเงินนะค่ะ

  26. nice, February 21, 2014:

    โปรแกรมแปลงฟอนต์ไม่เสียเงิน แต่ฟอนต์บางตัวที่มีลิขสิทธิ์ก็ต้องเสียเงินซื้อน๊า

  27. Khla, April 11, 2014:

    ขอบคุณมากครับ

3 Trackbacks

  1. Pingback: เปลี่ยนบ็อคให้ใช้ฟอนต์ TH Sarabun PSK | Priesdelly's Blog on October 27, 2011
  2. Pingback: รวม 13 ฟอนต์ไทยแห่งชาติในรูปแบบ Webfont เพื่อใช้แสดงผลในเว็บไซต์ | thought snippets on November 6, 2011
  3. Pingback: การใช้ Google Font API | 92YEARS | ท้องฟ้า และเทคโนโลยี on December 3, 2013

Leave a comment