Css 3 ยอมให้กำหนด font เพิ่มได้เองนอกจากที่มีอยู่แล้ว ทำให้สามารถออกแบบหน้าเว็บสวย ๆ หรือจะเล่น typography อักษรศิลป์ได้มากขึ้น แต่ก็ยังเจอกับปัญหาเดิมคือ แต่ละ browser มันรับชนิดตัวอักษรได้ไม่เท่ากัน ถ้าดูจาก http://caniuse.com/fontface จะเห็นว่าตั้งแต่ ie8 มันก็ใช้ font-face ได้แล้ว แต่เฉพาะ Embedded OpenType (EOT) แต่ก็ไม่มีเจ้าอื่น ๆ ที่รับนามสกุลนี้เท่าไหร่เลย ที่มีความหวังที่สุดคือ True Type (TTF) และ OpenType (OTF) ก็ยังไม่ครบทุกบราวเซอร์ ปัญหานี้แก้ได้ง่าย ๆ โดยไปที่เว็บ Convert Fonts upload ไฟล์ fonts ที่เราต้องการใช้ หรือเข้าไปหาฟอนต์ที่เคยลงไว้ใน C:WindowsFonts เสร็จแล้วกด get @font-face จะได้ไฟล์ zip
สมมุติจะแปลง THSarabunNew เป็นนามสกุลอื่น ๆ ภายในจะมีไฟล์ตามนี้
thsarabunnew.css
เป็นตัวอย่าง css ให้เอาไปแปะในไฟล์ css สาเหตุที่มันทำงานได้ทุก ๆ บราวเซอร์
เพราะพี่แกเล่นเขียน css แบบนี้มาให้เลย
@font-face { font-family: 'THSarabunNewRegular'; src: url ('thsarabunnew.eot') ; src: url ('thsarabunnew.eot') format ('embedded-opentype') , url ('thsarabunnew.woff') format ('woff') , url ('thsarabunnew.ttf') format ('truetype') , url ('thsarabunnew.svg#THSarabunNewRegular') format ('svg') ; }ต่างจากตัวอย่าง (ในอุดมคติ) ของ w3c เยอะเลย เพื่อให้ browser compatibility มากที่สุด
และมีฟอนต์ที่แปลงมาให้แล้วอีก 4 ตัว
- thsarabunnew.ttf (TrueType)
- thsarabunnew.eot (Embedded OpenType)
- thsarabunnew.svg (Scalable Vector Graphics) เขียนมาเป็น code เลย อันนี้ไม่มีใครขยันทำเองแน่ ๆ
- thsarabunnew.woff (Web Open Font Format)
ตัวอย่างการใช้งาน กำหนดให้ใช้ฟอนต์สารบัญ
body { color:#c00000; font-family: 'THSarabunNewRegular', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; font-size: 14px; }สังเกต จะมีชื่อฟอนต์อื่นต่อหลัง THSarabunNewRegular อีกที เพื่อถ้าหากโหลดฟอนต์มาไม่ได้ บราวเซอร์จะใช้ตัวถัด ๆ ไปแสดงแทน