@font-face

@font-face ใน CSS3 จะช่วยให้เราสามารถนำฟ้อนต์ที่เราต้องการไปใช้ในเว็บได้ อย่างไรก็ตามปัจจุบันบราวเซอร์แต่ละชนิดก็รองรับชนิดของฟ้อนต์แตกต่างกัน เช่น IE ต้องการเฉพาะ .eot (Embedded OpenType)  ในขณะที่ Safari, Firefox, Chrome และ Opera รองรับทั้ง .ttf  (TrueType Font ) และ .otf  (OpenType PS) โดยสามารถดูตาราง Browser Supprot for @font-face ได้ที่นี่

อย่างไรก็ตามวันที่ 8 เม.ย. 53 ที่ผ่านมา Microsoft, Mozilla และ Opera ได้ยื่นข้อเสนอมาตรฐานรูปแบบฟ้อนต์ที่ใช้บนเว็บ WOFF (Web Open Font Format) กับ  W3C    ซึ่งคงต้องรออีกพักหนึ่งกว่าที่จะกลายมาเป็นมาตรฐานที่ใช้กันได้ทั่วไป   ดังนั้นในเวลานี้เราก็คงต้องใช้รูปแบบฟ้อนต์ที่บราวเซอร์ในปัจจุบันใช้งานได้ไปก่อน

รูปแบบของการเขียน @font-face มีดังนี้

@font-face {
   font-family: AnyFontName; /* required */
   src: source; /* required */
   font-weight: weight; /* optional */
   font-style: style; /* optional */
}

ตัวอย่างรูปแบบการกำหนด source ของ font

@font-face {
   font-family: AnyFontName;
   src: url('../fonts/fontname1.eot');
   src: local('fontname2'),
   url('../fonts/fontname3') format('opentype'),
   url('../fonts/fontname4') format('svg');
}

จากตัวอย่างข้างต้น  เราสามารถตั้งชื่อ  font-family ได้ตามต้องการ  ซึ่งจะมีการเรียกใช้ชื่อฟ้อนต์ที่ตั้งไว้ดังนี้

h3 {
   font-family: AnyFontName, arial, helvetica, sans-serif;
}

ข้อความที่อยู่ระหว่าง <h3> และ </h3> ก็จะถูกแสดงด้วยฟ้อนที่ชื่อ AnyFontName    แต่เนื่องจาก browser รองรับฟอนต์ได้ไม่เหมือนกัน โดยเฉพาะ IE จึงมีผู้ทำการทำสอบว่าจะเขียน @font-face ในรูปแบบใดจึงจะเหมาะสมที่สุด

Useful links:

http://snook.ca/archives/html_and_css/becoming-a-font-embedding-master
http://xmlgraphics.apache.org/batik/tools/font-converter.html
http://www.fontsquirrel.com/fontface/generator
http://code.google.com/p/ttf2eot/
http://webfonts.info/wiki/index.php?title=@font-face_browser_support