ใช้ font สวยๆ บนเว็บได้ง่ายๆ ด้วย Google web fonts
posted on 20 Mar 2011 11:47 by bongikairuสำหรับคนทำเว็บแล้ว จะยัด font สวยๆ ลงเว็บนี่เป็นเรื่องที่น่าเบื่อมาก เพราะเราไม่สามารถยัดมันลงไปได้ตรงๆ ต้องแปลงเป็นรูปภาพก่อน หรือไม่ก็ใช้ Flash ช่วย แต่ด้วยเทคโนโลยีตัวใหม่ (เอาจริง ๆ ก็ไม่ใหม่แล้วหละ) ที่ออกมานี่จะช่วยให้เราสามารถฝังฟอนต์ที่เราต้องการลงไปบนหน้าเว็บได้เลยทีเดียว
รู้จักกับ webfont
เอาเป็นว่า เราข้ามรายละเอียดทางเทคนิคไปเลยละกัน สรุปสั้น ๆ ง่าย ๆ ได้ว่า webfont ก็คือการเอาไฟล์ font ติดไปกับหน้าเว็บเพจด้วย ถ้าเครื่องของผู้ชมไม่มี font นั้น มันก็จะจัดการโหลดมาให้โดยอัตโนมัติเลย
รองรับ browser แค่ไหน
ถ้านับเฉพาะ browser ยุคปัจจุบันและก่อนหน้านิดหน่อย ก็สามารถพูดได้เต็มปากครับว่า 100% (แต่ทั้งนี้ ต้องมีไฟล์ให้ครบทุกรูปแบบด้วย เช่น IE6 ใช้ .eot ส่วน browser ใหม่ ๆ ใช้ ttf ธรรมดา) สำหรับส่วนการสร้าง webfont นี้มีเครื่องมืออยู่หลายตัวที่จะช่วยเรา ตัวนึงที่ผมแนะนำก็ที่นี่ครับ http://www.fontsquirrel.com/fontface/generator ใช้งานง่าย ใส่ไฟล์ลงไป download ไฟล์กลับมา ใส่ css ตามที่แนบมาด้วยก็ใช้งานได้แล้ว
แล้ว Google web fonts หละ ?
สำหรับวิธีการข้างบนนั้น อาจจะดูยุ่งยากไปหน่อยสำหรับคนที่เขียน blog ชาวบ้าน ๆ ทั้งการหา font ทั้งการแปลง font และไหนจะต้องหาที่ฝากไฟล์ font อีก Google เลยใจดี จัดที่ให้เราสามารถเรียก font ไปใช้ได้ทันทีโดยไม่ต้องแปลงเอง ไม่ต้องฝากไฟล์ font เองเลยจ้า [น่าเสียดายที่นังไม่มี font ไทย แต่คงอีกไม่นานแล้วหละ เนอะ]
วิธีใช้งานก็ง่ายแสนง่าย พอเข้าไปปุ๊ปก็เลื่อนๆ ดู ชอบ font ไหนก็คลิกเข้าไป แล้วก็กด Use this font มันก็จะแสดง code ที่ต้องใช้ออกมา จากนั้นก็นำ code ไปใส่ไว้ในหน้าเว็บเราได้เลยจ้า (ใช้ใน exteen กดตรง advance technique เพื่อเอา code แบบ @import ไปใช้นะจ๊ะ) ใครยังไม่เห็นภาพ ดูตัวอย่างข้างล่างนี้ได้เลยนะครับ
1. เลือก font
2. กด Use this font
3. กด Advance Technique
4. ก้อปปี้โค้ดในกล่องสีเทาจ้า
5. แปะโลด
6. save และใช้ได้เลยจ้า
<span style="font-family: 'Cabin Sketch'; font-size: 20px;">Test Cabin Sketch</span>
Test Cabin Sketch
ข้อควรระวัง: @import ใส่ไว้ก่อน code อื่นเสมอนะจ๊ะ
