การใช้ Web Font Manager ใน Dreamweaver CS6 อย่างละเอียด !!!

วันนี้ผมข้อพูดถึงขั้นตอนการใช้ Web Font Manager หนึ่งใน feature ใหม่ๆ ร้อนแรงของ Dreamweaver CS6 อย่างละเอียดนะครับ เนื่องจากบ้านเราตอนนี้เริ่มตื่นตัวเรื่อง Web Font Manager กันมาก

ถ้าหากคุณเข้าเว็บไซต์ แนว HTML5 +CSS3 หน้าโล่งๆขาวๆ คลีนๆ ฟ้อนแปลกๆที่แสดงบนหน้าเว็บ พอเอาเม้าส์ Cursor ไปลูบๆดู อุ๊บ๊ะ ไม่ใช่รูป แต่มันเป็น Font สวยๆแปลกตาออกไปจากเว็บกากๆ เอ้ย เว็บเก่าๆ จะทำให้เว็บคุณดูเก๋ น้ำหนักเบา แบบเท็กซ์ ไร้กราฟฟิค มาถ่วงแบนด์วิธเว็บคุณ (จะแสดงเฉพาะ Browser ใหม่ๆ ที่หนับหนุน เล่น Chrome, Firefox ละเห็นแน่ ^..^) อ้ะ

ในวงการ Web Font Manager เขาเรียกว่าเป็นการ “ฝังฟ้อนท์” ลงบนเว็บ ซึ่งจะทำได้เฉพาะ CSS3 เท่าน้าน…

แต่ไม่ใช่ว่าอยู่ๆ จะเอาฟ้อนใน Web Font Manager ใน เครื่องอัพขึ้น Server แล้วเรียกมาใช้ได้ มันต้องมีกระบวนการแปลงให้เข้ากับมาตรฐานเว็บก่อน ซึ่งจะมีเว็บไซต์ที่สามารถอัพโหลด Font ขึ้นไป Convert ได้เลยไม่ยาก

เว็บที่ใช้ Convert font
http://www.fontsquirrel.com/fontface/generator
http://fontface.codeandmore.com/

หลัง Convert เราจะได้ฟ้อนเพิ่มมาในนามสกุลต่างๆ เพื่อให้สามารถแสดงผลได้ในหลาย Browser (ที่สนับสนุน CSS3 แนะนำ Chrome และ Firefox)

ตอนนี้เรามาดูความหมายของนามสกุลฟ้อนท์ ชนิดต่างๆกันนิดนึง

TTF : ไฟล์ฟ้อนที่ไม่แสดงใน IE และ iPhone (Firefox 3.5+ , Opera 10+, Safari 3.1+, Chrome 4.0.249.4+)
EOT : แสดงใน IE อย่างเดียว (Internet Explorer 4+)
WOFF (Web Open Font Format) : ฟ้อนสำหรับ Firefox 3.6+, Internet Explorer 9+, Chrome 5+
SVG : ฟ้อนสำหรับแสดงใน iPad and iPhone

ทีนี้ เรามาทดสอบกันดีกว่า ด้วยภาษาไทยของเรา และแน่นอน ผมก็ลองไปหาฟ้อนถูกลิขสิทธิ์มาสักฟ้อน ที่ไหนดีล่ะ ใน www.f0nt.com ของ Free สไตล์ไทยๆ เพียบเลย

แต่ผมขออนุญาติแนะนำ Font Free จาก มหาวิทยาลัยขอนแก่น ผมชอบฟ้อนมีเอกลักษณ์ดี

เอาละทีนี้มาเริ่มกันเลย!!!

Step 1 : คลิก Open

Step 2 : กำหนดช
นิด Web page เป็น HTML5

Step 3 : ลองพิม
พ์ภาษาไทยดูครับ

Step 4 : คลิก
ที่ Modify > Web Fonts (ใหม่ล่าสุดมีเฉพาะใน CS6 เท่านั้น)

Step 5 : คลิก Add Font…

Step 6 : คลิ ก Folder ของ Font EOT (เลือกโฟลเดอร์ชนิดอื่นก็ได้ แต่ต้องเป็น Folder ที่เราได้ทำการ Convert font เรียบร้อยแล้วน
ะ) > ติ๊กถูกตรงเลข 2 เพื่อบอกว่า เรามีสิทธิใช้ฟ้อนนี้จริงๆนะ

Step 7 : เลือกไฟ
ล์นามสกุล eot (ก็เห็นตัวเดียว ไม่ต้องบอกก็ได้เนอะ อิอิ)

Step 8 : ถ้า หา
กฟ้อน Convert ถูกต้องตรงมาตรฐานสากล 555+ มันจะดึง Font นามสกุลอื่นที่ Convert แล้วใน Folder เดียวกันมาด้วยทีเดียว ไม่ต้องเลือกทีละ Font ครับ