CSS3 การใช้คำสั่ง @font-face และวิธีการแปลงฟอนท์ให้ใช้ในเว็บ

คำสั่งที่น่าสนใจของ CSS3 ในการปรับแต่งหน้าตาเว็บไซต์อีกอย่างหนึ่งก็คือการจัดการหน้าตาของ font หรือแบบตัวอักษรที่เราต้องการให้แสดงผลในแบบต่างๆ นอกเหนือไปจาก font พื้นฐานที่มีอยู่แล้วในเครื่องของผู้อ่านแต่ละคน -- ฟอนท์พื้นฐานก็เช่น Tahoma, Arial เป็นต้น

ใน CSS3 คำสั่งเกี่ยวกับการแสดงผลรูปแบบฟอนท์ จะใช้คำสั่ง @font-face ตามนี้

แต่กรณีที่เราต้องการใช้ Font อื่นๆ ที่คิดว่าไม่ได้มีอยู่ในเครื่องของผู้ใช้ทั่วไป เราก็จะต้องเอาไฟล์ฟอนท์ อัพโหลดขึ้นไปอยู่ในเซอร์ โดยกำหนด ชื่อ font-family และกำหนดที่อยู่ของ font (ด้วยที่อยู่ url)

ส่วนกรณีที่เราต้องการเอาไฟล์ฟอนท์ที่มีอยู่ ให้สามารถเอาไปใช้งานในเว็บไซต์ อาจต้องมีกระบวนการแปลง font เสียก่อน -- วิธีเช็คว่า font ที่เรามีอยู่ใช้ได้หรือไม่ ก็คือลองอัพโหลดขึ้นไปในเซิร์ฟเวอร์ แล้วเลือก font-family และ source ของฟอนท์ที่เราจะใช้ ถ้าไม่แสดงผลก็ต้องกลับมาแปลงฟอนท์ก่อนใช้งาน

วิธีการแปลงฟอนท์ สามารถทำได้โดยเข้าไปที่หน้าเพจ @font-face Generator ของเว็บ http://www.fontsquirrel.com/fontface/generator

จากนั้นก็ทำการเลือก font ที่ต้องการแปลงเอาไปใช้งาน

แล้วก็สั่ง Generate และ Download ออกมา เอาไปอัพโหลดใส่ในเซิร์ฟเวอร์ของเรา เพื่อใช้งานต่อไป

หลังจากกำหนด @font-face ให้กับ tag ที่ต้องการใช้เรียบร้อย จะได้ผลออกมาดังนี้

หมายเหตุ: กรณีที่เราใช้ความสามารถของ CSS3 จะต้องคำนึงถึงผู้ชมเ็ว็บด้วย คือถ้าจะให้แสดงผลได้อย่างถูกต้อง ผู้ที่เข้ามาชมเว็บไซต์จะต้องใช้เบราว์เซอร์รุ่นใหม่ ที่รองรับการใช้งาน CSS3 ด้วยเช่นกัน