การใช้ font-face ในหน้าเว็บ

สวัสดีครับ พ่อยก แม่ยกทั้งหลาย วันนี้มาแบบ สั้นๆ ง่ายๆ ห้วน ๆ ด้วนๆ เพราะสันดานมันฟ้อง “อะไรก็ได้ ง่ายๆ”

เราจะมา เอา “ตัวหนังสือ” เข้าไปใส่ในหน้าเว็บกัน

IE7 และ IE8 ก็ใช้ได้ด้วย แต่จริงๆ แล้วบราวเซอร์ทั้งสองตัวนี้ รองรับการ @font-face {} มานานแล้วนะครับ ที่ไม่ค่อยใช้กันเพราะว่า มันไม่รับ font แบบ .TTF (TrueType) แม่เจ้ารู้จักแต่ .EOT (OpenType) นี่มาตรฐาน M$ เค้าหละ

วิธีการใช้งานก็ปกติ ธรรมดา แค่เราต้องเอา Font ที่เป็น .ttf ที่มี ไปแปลงเป็น .eot เสียก่อน

เมื่อได้ Font ฟรีมาแล้ว ย้ำ ฟ้อนท์ ฟรี (อย่าไปขโมยใครมาให้เขาจับได้ เดี๋ยวเสียหมา) เอาฟ้อนท์ที่ได้ ไปแปลงเพศก่อน TTF to EOT Font Converter เมื่อได้มาแล้ว ให้เพิ่มตัวหนังสือเข้าเว็บ แบบข้างล่างนี้

@font-face {
 font-family: PSPimpdeedIINew;
 src: url("PSPimpdeedIINew.eot"); /* EOT file for IE */
}
@font-face {
 font-family: PSPimpdeedIINew;
 src: url("PSPimpdeedIINew.ttf") /* TTF file for CSS3 browsers */
}
.ตัวหนังสือ  * { font-family: PSPimpdeedIINew;}

แค่นี้หละครับ ไปหละ

ขอขอบพระคุณ พส. พิมพ์ดีด ๒ ใหม่ จาก f0nt.com