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 อีกที เพื่อถ้าหากโหลดฟอนต์มาไม่ได้ บราวเซอร์จะใช้ตัวถัดๆไปแสดงแทน