@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