CSS font-face with embeded font

ปกติถ้าเราใช้ css คำสั่ง font-family หรือ font-face เครื่องที่เปิดต้องมีฟอนต์นั้นด้วยจึงจะเห็น แต่บางที่เราต้องการใช้ฟอนต์แปลกๆ ที่เครื่องคนอื่นไม่ค่อยมี

ตัวอย่างนี้เป็นการแสดงฟอนต์เป็นบาร์โค้ดโดยที่เครื่องที่เปิดไม่มีฟอนต์บาร์โค้ด

เขียน CSS ตามนี้

@font-face
{
font-family: barcodeFont;
src: url('code128.eot'); /* IE */
src: local('code128'), url('code128.ttf') format('truetype');
}

.barcode {
font-family:barcodeFont;
font-size: 28px
}

ไปหาไฟล์ code128.ttf มาก่อน แล้ว copy ไฟล์ฟอนต์ code128.ttf ไปไว้ในโฟลเดอร์เดียวกันกับไฟล์ css นี้ด้วย ทีนี้พอใช้
<span class="barcode">*1081009*</span>
ก็จะแสดงเป็นบาร์โค้ดที่ใช้เครื่องยิงบาร์โค้ดยิงได้


แต่สำหรับ IE มันยุ่งยากนิดนึงใช้ไฟล์ฟอนต์ .ttf ธรรมดามันไม่ได้ ต้องแปลงเป็น .eot ก่อน
ดาวน์โหลดโปรแกรม ttf2eot มาก่อนจาก http://code.google.com/p/ttf2eot/
ดาวน์โหลดตัวที่เป็น zip พอแตกออกมาก็เอาตัว ttf2eot.exe ไปไว้ในโฟลเดอร์เดียวกับฟอนต์ แล้วใช้ command prompt ใช้คำสั่ง

ttf2eot.exe code128.ttf code128.eot

แค่นี้ก็จะได้ไฟล์ code128.eot ออกมา

ถ้าสั่ง print แล้วมันไม่ออกเป็นบาร์โค้ด ก็ครอบ css ด้วย


@media screen,print
{
...
}

เวลาอัพโหลดขึ้นเซิร์ฟเวอร์ อย่าลืมอัพโหลดไฟล์ code128.ttf กับ code128.eot ไปด้วยล่ะ