ผมเคยเขียนเกี่ยวกับเรื่องการใช้ฟ้อนท์บนเว็บไซต์ครั้งหนึ่งแล้ว ในเรื่อง Cufon ใช้ฟ้อนท์บนเว็บไซต์ตามใจคุณ เป็นการใช้ jquery เพื่อ generate text font ให้เป็นภาพ .png (ซึ่งสามารถคลิกไปอ่านรายละเอียดได้ที่นี่)

การใช้ cufon ช่วยในการใช้ฟ้อนท์ตามที่เราต้องการ ก็เป็นทางเลือกที่ดีที่หลายๆเลือกใช้อยู่ (select2web ก็ใช้เหมือนกัน) แต่ข้อจำกัดหนึ่งของ cufon คือ เมื่อไรก็ตามที่ข้อความที่เราใช้ cufon สร้างให้เป็นภาพ หากเป็นลิงค์ หรือข้อความที่อยู่ในแท็ก a เวลาเอาเมาสท์ไป hover มันเปลี่ยนสี คือไม่สามารถใช้คำสั่ง hover กับ cufon ได้นั่นเอง !!

วันนี้ไม่ได้มานำเสนอวิธีทำ hover ให้ cufon ครับ แต่มีวิธีใช้ฟ้อนท์บนเว็บไซต์ตามใจคุณ อีกวิธีหนึ่ง นั่นคือ

@font-face

@font-face เป็นการ import ฟ้อนท์ที่เราต้องการมาใช้บนเว็บไซต์ โดยระบุพาธให้ถูกต้อง

@font-face {
    font-family: Graublauweb;
    src: url(‘Graublauweb.eot’); /* IE9 Compatibility Modes */
    src: url(‘Graublauweb.eot?’) format(‘eot’),  /* IE6-IE8 */
    url(‘Graublauweb.woff’) format(‘woff’), /* Modern Browsers */
    url(‘Graublauweb.ttf’)  format(‘truetype’), /* Safari, Android, iOS */
    url(‘Graublauweb.svg#svgGraublauweb’) format(‘svg’); /* Legacy iOS */
}

#content h2 {

    font-family: ‘Graublauweb‘;
font-size:24px;
}

เพื่อให้ @font-face ใช้ได้ทุกบราวเซอร์ ไฟล์ฟ้อนท์ที่ import เข้ามาใช้ก็ต้องตอบสนองได้ทุกบราวเซอร์เช่นกัน จากตัวอย่างข้างต้นจะเห็นว่า ฟ้อนท์ชื่อ Graublauweb มีหลายนามสกุล และแต่ละนามสกุลก็ซัพพอร์ตบราวเซอร์แตกต่างกัน (ตามที่คอมเมนต์ไว้)

และจากตัวอย่าง css ด้านบน ข้อควา่มที่อยู่ในแท็ก h2 จะกลายเป็นฟ้อนท์ตามที่เรา import เข้ามา ก็คือคือ  Graublauweb

จริงๆบทความนี้ก็มีเท่านี้แหละครับ เพียงเท่านี้เว็บไซต์ของท่านก็จะมีฟ้อนท์แปลกๆได้ตามใจคุณแล้วละ

แต่ที่อยากจะบอกเล่าต่ออีกนิ๊ดนึง เพื่อความง่าย สะดวก 

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

มาดูวิธีทำกันเลยครับ

1. หาฟ้อนท์ที่ชอบๆ มา 1 ตัว (มากกว่านั้นได้) นามสกุล .ttf

2. คลิกไปที่เว็บไซต์ http://www.font2web.com/ (เว็บนี้ไม่ได้เป็นอะไรก็ select2web.com นะครับ แม้ชื่อจะละม้ายกันก็ตาม)

3. ในหน้าเว็บจะมีฟอร์มสำหรับupload file ให้ท่าน browse แล้วเลือกฟ้อนท์ที่เตรียมไว้ในข้อ 1 เสร็จแล้วคลิกปุ่ม Convert & Download

ท่านจะได้ไฟล์ .zip มาตัวหนึ่ง ในนั้นมีสิ่งที่ท่านต้องการครบถ้วน ตั้งแต่ไฟล์ fonts.css, demo.html และไฟล์ฟ้อนท์นามสกุลๆต่างครบถ้วนกระบวนความ

ทีนี้เราก็สามารถเอาฟ้อนท์ไปใช้บนเว็บได้ตามใจแล้วละ อีกทั้งซัพพอร์ตทุกบราวเซอร์ และที่สำคัญ สามารถ hover ได้อย่างไร้ปัญหา!!

วัชรเมธน์ ชิษณุคุปต์ ศรีเนธิโรทัย

Programmer, Blogger

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