มาม๊ะๆ มาใส่ฟอนต์(ไทย)ให้เว็บเรากัน CSS3+@font-face

หลายท่านอาจะเคยลองใช้กันแล้วนะครับ สำหรับ @font-face ใน CSS3 แต่ส่วนใหญ่จะเป็นการนำฟอนต์ที่มีอยู่แล้วจากเว็บไซต์ต่างๆ เช่น Google font API แต่ปัญหาก็คือ ในเว็บฟอนต์ เหล่านั้นไม่มีฟอนต์ภาษาไทย ทำยังไงดี

วันนี้หละเราจะขอนำเสนอ วิธีการใส่ฟอนต์ภาษาไทยในเว็บ

วิธีการใส่ฟอนต์ภาษาไทยในเว็บไซต์ของคุณ

อันดับแรกเราต้องทำการเลือกฟอนต์ที่ถูกใจ ใช่เลย…กันก่อน ซึ่งปัจจุปันก็มีให้โหลดกันฟรี เยอะแยะ อาทิ ในเว็บ f0nt.com หากท่านโหลดมาแล้วก็ควรจะเห็นคุณค่ากันหน่อยนะครับ เพราะ คนทำทำมาเหนื่อยยาก ลำบากแสนเข็น

ข้อควรระวัง ระวังอย่าไปใช้ฟอนต์ สุ่ม 4 สุ่ม 5 มิฉะนั่นอาจจะเป็นอย่างกรณี การเก็บค่าบริการการใช้ฟอนต์ย้อนหลัง แต่ใน f0nt.com ฟรีแน่นอน

หลังจากนั้นก็มา generate font กันก่อน เข้าไปที่เว็บนี้ www.fontsquirrel.com/fontface/generator

สำคัญตรงที่วงกลมสีแดงจะทำให้สามารถใช้ฟอนต์ไทยได้ อย่าลืม ติ๊กที่ agreement จากนั้นก็ Download your kit
ซึ่งท่านจะได้ไฟล์ดังนี้

วิธีการใช้งาน คือ ให้ทำ นำไฟล์ eot, woff, ttf และ svg ใส่ในโฟล์เดอร์และใส่ลงไปในเว็บของท่าน
ส่วนของโค้ด เปิดไฟล์ stylesheet.css แล้ว copy โค้ดไปใส่ใน stylesheet หลักของเว็บ แล้วระบุ path ให้ถูกต้อง ง่ายคือ ระบุที่อยู่ฟอนต์นั่นเอง

ส่วนของโค้ด css ก็ใส่ font-family ไปได้เลย

p { font-family: ‘supermarketregular’, Arial, sans-serif; }

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

ที่มา blog.u-blue.com

sanyaindy

เป็นเว็บบล็อกเล็กๆ ที่สอนกราฟิก และงานออกแบบพื้นฐาน และนำเสนอผลงานสร้างแรงบันดาลใจในการออกแบบ รวมไปถึงงาน DIY ซึ่ง Blogger เพียงแค่นักศึกษาไอที ที่มีใจรักในงานออกแบบ รักการเป็นบล็อกเกอร์และ ฝันว่าสักวัน จะเป็นเป็นเจ้าของเว็บไซต์ที่ทุกคนรู้จัก

You may also like...