ช่วงนี้งานที่เกียวกับการพัฒนาเว็บเข้ามาพอสมควรเลยครับ ไม่ค่อยได้มีเวลาดูหนังฟังเพลง หรือออกไปถ่ายรูปที่ไหนเท่าไหร่ เรื่องของการทำเว็บกับ CSS น่าจะกลายเป็นเรื่องปรกติธรรมดาไปแล้ว การจัดรูปแบบการแสดงผลของข้อความต่างๆผ่าน id และ class ก็ไม่พ้นเรื่องของการแสดงผลตัวอักษร ซึ่งเจ้านายหรือลูกค้ามักจะอยากให้ใช้ตัวอักษรสวยๆ พิเศษๆที่ไม่ใช่มาตราฐานของการทำเว็บ สุดท้ายถ้าต่อรองไม่ได้ก็ต้องมาหาวิธีซึ่งหวยก็จะมาออกที่การนำ Web Fonts มาใช้งาน
ไปได้อ่านบทความเกี่ยวกับการนำ Web Fonts มาใช้งานบนเว็บไซต์ก็เลยขอเอามาเล่าสู่กันฟังคราวๆไว้แบบนี้ครับว่า วิธีการเอาฟอนต์เฉพาะมาใช้บนเว็บมีสองทางใหญ่ๆ คือผ่าน @font-face {} ซึ่งเป็น CSS ที่ใช้สำหรับ import font หรือ ผ่าน Web font service ซึ่งเป็นสคริปที่แปลงตัวอักษรให้อยู่ในรูปแบบของรูปภาพตัวอย่างเช่น Google font directory หรือโปรแกรม Cufon
ในบทความยังว่าไว้อีกว่า ปัญหาหลักๆของ @font-face หลักๆก็คือเรื่องของลิขสิทธ์ และชนิดของไฟล์ฟอนต์ที่หลากหลายแตกต่างกันไปตาม browser ยี่ห้อต่างๆ ลองดูตัวอย่างโค้ทดูครับ
@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; }
credit: www.select2web.com สำหรับตัวอย่างโค้ทครับ
ในโค้ทมีทั้งไฟล์นามสกุล eot, woff, ttf, off ซึ่งทั้งหมดนี้เป็นฟอนต์ตัวเดียวกัน แต่ต้องแยกเผื่อไว้สำหรับ browser ต่างๆกันไป ถึงจะมีเครื่องมือในการสร้างไฟล์เหล่านี้เช่น font2web แต่ก็อย่าลืมว่าฟอนต์ที่ใช้ต้องได้รับอนุญาตให้เอามาใช้บนเว็บนะครับ
อันที่จริงก่อนหน้า @font-face ยังคงมี technology ที่ช่วยในการแทนที่ตัวอักษรให้อยู่ในรูปแบบของรูปภาพผ่าน javascript ซึ่งเราเรียกว่า Web font service อยู่ซึ่งการทำงานของมันก็คือฟอนต์นั้นก็เป็น script นึงซึ่งใช้สำหรับสร้างภาพของตัวอักษรในการแสดงผล เนื่องจากว่ามันเป็นสคริป จึงตัดปัญหาเรื่องความหลากหลายของ browser ออกไปได้ โดยแต่ละฟอนต์ ก็จะมีไฟล์ script แยกไฟล์ไว้สามารถไปดึงมาใช้จากเว็บไซต์ที่ให้บริการตัวอย่างเช่น google font directory ได้ หรือจะเก็บไว้บนโฮสของตัวเองก็ได้
บริการซึ่งใช้กันอย่างแพร่หลายยังคงมีปัญหาสำหรับเราๆท่านๆกันอยู่หนึ่งข้อก็คือ service พวกนี้เป็นเว็บเมืองนอกครับ ไหนเลยจะมี font ภาษาไทยให้เราใช้กัน ทางออกของผมเองก็คือใช้ชุดโปรแกรม Cufon ในการเข้ามาช่วยการตั้งค่าแสดงผลตัวอักษร ซึ่งถ้าสนใจก็สามารถถามอากู๋ได้ไม่ยากครับ
จะว่าไปการแสดงผลตัวอักษรบนเว็บในปัจจุบันแทบจะไม่ได้จำกัดอยู่เฉพาะฟอนต์มาตราฐานแล้วครับ การนำเอา Web fonts เข้ามาใช้เริ่มกลายเป็นเรื่องปรกติธรรมดาไปแล้ว เทคโนโลยีที่มีอยู่ก็สามารถนำมาใช้ได้อย่างมีประสิทธิภาพมาก ขึ้นอยู่กับวิธีการที่ถนัดมากกว่าครับ
อ้างอิง: http://www.topdesignmag.com/working-with-web-fonts-what-do-you-need-to-know/
เพิ่มเติมเกี่ยวกับ Cufon http://www.select2web.com/jquery/font-on-web-by-cufon.html
เพิ่มเติมเกี่ยวกับ @font-face http://www.select2web.com/general/font-face-and-useful.html