ดาวน์โหลด เว็บฟ้อนต์ ภาษาไทย เว็บฟอนต์สวยๆ webfont

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

เมือหลายวันก่อน ทำเว็บให้ลูกค้ารายหนึ่ง และเขาต้องการฟ้อนต์ให้แตกต่างจากทั่วไป เลยต้องไปหาวิธีการมาใช้ซะหน่อย การใช้งานเว็บฟ้อนต์นั้น จริงๆแล้วไม่ได้ยุ่งยากมากนักครับ และสามารถเรียกใช้ ด้วย CSS3 ได้เลย ที่สามารถใช้งานใน IE ได้แม้กระทั่งใน IE6 และบราวเซอร์ รุ่นใหม่ ทุกค่ายครับ

โดยขั้นแรกก็เราต้องนำฟอนต์ที่เราต้องการ นำไปแปลงให้เป็นชุดของฟอนต์สำหรับใช้ในเว็บเสียก่อน โดยเครื่องมือที่ใช้ง่ายที่สุดได้แก่ @font-face Kit Generator โดย Font Squirrel ซึ่งวิธีการตั้งค่าสำหรับฟอนต์ไทยจะต้องใช้โหมด EXPERT ส่วนที่สำคัญคือตั้ง Subsetting เป็น No Subsetting เพื่อให้ใช้ภาษาไทยได้ ดังภาพข้างล่างครับ แต่ผมได้เตรียมสำเร็จไว้ให้ท่านโหลดไปใช้ 17 ฟ้อนต์ครับ เตรียมไว้ในรูปแบบเว็บฟ้อนต์ และ css3 สามารถนำไปใช้ได้ทันทีครับ

webfont_00

จากนั้นคลิกปุ่ม Download your kit เมื่อแตกไฟล์ จะได้ไฟล์ ดังรูปข้างล่างนี้ครับ เมื่อแตกไฟล์แล้ว จะได้ประมาณนี้ครับ

webfont_05

เมื่อแตกไฟล์แล้ว จะได้ประมาณนี้ครับ

webfont_06

วิธีการใส่ ก็นำโค๊ดใส่ตรงสไตลชีสเราได้เลย เช่น

@font-face {

    font-family: 'Book_Akhanake';

    font-weight: normal;

    font-style:  normal;

    src: url('../fonts/book_akhanake-webfont/book_akhanake-webfont.eot'); /* IE9 Compat Modes */

    src: local('Book_Akhanake'),

         url('../fonts/book_akhanake-webfont/book_akhanake-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

         url('../fonts/book_akhanake-webfont/book_akhanake-webfont.woff') format('woff'), /* Modern browsers */

         url('../fonts/book_akhanake-webfont/book_akhanake-webfont.ttf') format('truetype'); /* Safari, Android, iOS */

}

ตัวอย่างฟ้อนต์ภาษาไทยที่ผมได้รวบรวมไว้ครับ สามารถดาวน์โหลดไปใช้ได้เลยwebfont_01

webfont_02

webfont_03

Download “font ภาษาไทย” ThaiWebFonts.zip – Downloaded 6968 times – 8 MB

ดาวน์โหลดเว็บฟ้อนภาษาไทยทั้งหมด

หากต้องการฟ้อนต์เพิ่มเติม ไปหาได้จากที่นี่ครับ http://www.f0nt.com/

Comments

comments