Sponsered link
หลายท่านคงอยากจะหาฟอนต์ไทยสวยๆ มาใส่เว็บของเราแต่ไม่รู้วิธีการใช้งาน วันนี้ค่ะเราจะมาสอนการเอาฟอนต์ภาษาไทยใส่ลงในเว็บมีขั้นตอนง่ายๆดังนี้
Sponsered link
1.เราต้องทำการเลือกฟอนต์ที่เราชอบก่อน ซึ่งปัจจุปันก็มีให้โหลดกันฟรีมากมาย ยกตัวอย่างจากเว็บนี้ f0nt.com เมื่อได้แล้วก็ทำการดาวน์โหลดฟอนต์แลัวทำการแตกซิปไฟล์รอไว้
ตัวอย่างฟอนต์
2.จากนั้นทำการ generate font ไปที่เว็บนี้ http://www.fontsquirrel.com/tools/webfont-generator อัพโหลดฟอนต์ของเราขึ้นไป
ดังตัวอย่าง
Sponsered link
***ตรงสี่เหลี่ยมสีแดง จะต้องเลือกที่นี่เพื่อให้สามารถใช้ฟอนต์ไทยได้ จากนั้นทำการดาวน์โหลดเลยค่ะ
3.เมื่อได้ไฟล์ที่โหลดมาแล้วทำการแตกซิปไฟล์ แล้วนำไฟล์ eot, woff, ttf และ svg ใส่ในโฟล์เดอร์ในเว็บที่เราต้องการ จากนั้น coppy โค้ดที่ไฟล์ stylesheet.css ที่เราได้มาไปใส่ในไฟล์ style.css ของเว็บเราแล้วเปลี่ยน path ให้ตรงตามที่เรานำฟอนต์ไปวางไว้
@font-face { font-family: 'max_pinjohnv2regular'; src: url('max_pinjohn_v2-webfont.eot'); src: url('max_pinjohn_v2-webfont.eot?#iefix') format('embedded-opentype'), url('max_pinjohn_v2-webfont.woff2') format('woff2'), url('max_pinjohn_v2-webfont.woff') format('woff'), url('max_pinjohn_v2-webfont.ttf') format('truetype'), url('max_pinjohn_v2-webfont.svg#max_pinjohnv2regular') format('svg'); font-weight: normal; font-style: normal; }
4.ส่วนในโค้ด css เราก็เรียกชื่อฟอนต์ได้เลย ดังตัวอย่าง
Sponsered link
h1{font-family:'max_pinjohnv2regular';}
เพียงแค่นี้เว็บของคุณก็จะสวยขึ้น ไม่ยากเลยใช่ไหมละค่ะ ลองทำกันดูนะ
Sponsered link