Web Fonts กับคนทำเว็บ

ช่วงนี้งานที่เกียวกับการพัฒนาเว็บเข้ามาพอสมควรเลยครับ ไม่ค่อยได้มีเวลาดูหนังฟังเพลง หรือออกไปถ่ายรูปที่ไหนเท่าไหร่ เรื่องของการทำเว็บกับ 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
%d bloggers like this: