Home > Tip & Trick > ใช้ font สวยๆบนเว็บด้วย Web Fonts Manager

ใช้ font สวยๆบนเว็บด้วย Web Fonts Manager


Dreamweaver เครื่องมือสร้างเว็บไซต์ที่ได้รับความนิยมสูงสุด เพราะ Features ที่ช่วยให้คุณสร้างเว็บได้ง่ายขึ้น ไม่ต้องตั้งหน้าตั้งตา เขียน Html กันใน Text Editor ที่แทบไม่ได้มีเครื่องช่วยหายใจ อย่างการ Guide คำสั่งให้ผู้สร้างเพจเท่าไหร่นัก ใครขี้ลืมแบบผมใช้ Dreamweaver ง่ายกว่าเยอะครับ ตอนนี้ Update กันล่าสุดเวอร์ชั่น Dreamweaver CS6 ออกมาได้สักพัก พึ่งลองโหลดมาเทส เลยอยากจะเอา Features เจ๋งๆ มาแนะนำกันครับ

ผมว่าผมลองช้าไปเยอะ คนอื่นเทสกันไปหมดแล้ว แต่ก็ทามงายได้ เวอร์ชั่นเก่ามันก็ใช้งานได้อยู่ แต่… หมดยุคอย่างเห็นได้ชัด ถ้าคุณยังใช้ DW เวอร์ชั่นต่ำกว่า 5 ถือว่าเริ่มเชยละ เหตุผลคือไรเหรอ ง่ายๆ ยุคนี้มันยุค Mobile, Tablet ใครยังดักดานทำเว็บแล้วเทสแต่บน PC, Mac คงโบราณแล้วหละ อุ๊ย! เขาป่าวว่าใครนะตัว (^..^) ทำให้เกิดคำศัพท์ว่า Web Responsive คือการกำหนดขนาดให้แสดงผลบน Smart phone, Tablet และ PC/MAC ภายในเว็บเดียวกันได้ ไม่ต้องทำหลายเว็บ หลายขนาด ควบคุมโดย CSS …เก็ทนะ!

Dreamweaver CS6 มันมีไรให้เล่นมั่งล่ะ (โอ้ย เยอะแยะ)

1. Software พร้อมจัดหนัก HTML5 และ CSS3
2. ทำเว็บแบบ Responsive ง่ายขึ้นด้วย Fluid Grid Layout (Grid คือไกด์ไลน์ขนาดความกว้างของสัดส่วนต่างๆในเว็บไซต์แบบคอลัมน์)
3. Web fonts ฝังฟ้อนเข้าไปในเว็บได้ แล้ว Render ให้มี Style ที่เราต้องการได้โดยไม่ต้องทำ Font เป็นภาพ ไม่ทื่อ บื้อ เหมือนเว็บเก่าๆ
4. CSS Transitions นึกถึงการ Fade อ่ะ เช่นการเปลี่ยนสีหนึ่ง ไปอีกสีหนึ่ง
5. สนับสนุน PhoneGap สำหรับ Mobile development
6. jQuery Mobile ช่วยให้เว็บดูเหมือน App มากขึ้น บางคนก็เรียก Web App ไปเลย
7. CSS Transitions นึกถึงการ Fade อ่ะ เช่นการเปลี่ยนสีหนึ่ง ไปอีกสีหนึ่ง
8. Web fonts ฝังฟ้อนเข้าไปในเว็บได้ แล้ว Render ให้มี Style ที่เราต้องการได้โดยไม่ต้องทำ Font เป็นภาพ ไม่ทื่อ บื้อ เหมือนเว็บเก่าๆ
9. FTP Connection สำหรับอัพโหลดไฟล์ได้เลยในตัว
10. มีระบบเชื่อมกับ Adobe Business Catalyst (มีระบบสำเร็จรูปสามารถนำมาใช้ได้ โดยไม่ต้องพัฒนาเอง หรือให้บริการพื้นที่ Hosting ไฟล์งานของคุณได้ทันที มีฟรี และเสียตัง)
11. CSS3 สามารถทำเงาให้ฟ้อนได้ , หมุนวัตถุ เช่นภาพวางเอียงๆได้

โอยอื่นๆลองไปเล่นกันดูครับ เอาละ เริ่ม…zzZzZ

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

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

แต่ไม่ใช่ว่าอยู่ๆ จะเอาฟ้อนในเครื่องอัพขึ้น 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 ครับ

Step 9 : เราจะเห็นชื่อฟ้อนปรากฏขึ้น คุณมาถูกทางแล้ว คลิก Done

Step 10 : กลับไปคลิกเมนู Modify > Font Families เพื่อเลือกฟ้อนสไตล์ ให้กับตัวอักษร

Step 11 : เลือกชื่อ Font เข้ามาใน Font list แล้วคลิก Ok

Step 12 : ที่ Properties เลือกชื่อ Font ที่นำเข้ามาอยู่ใน Font list

Step 13 : Dreamweaver จะถามเราว่า จะตั้งชื่อ Class ว่าไรอ่ะ ก็ตั้งไป ผมตั้งเป็น testThaiFont (ใช้ชื่อไรก็ได้ที่คุณเข้าใจอ่ะ)

Step 14: กด Live เพื่อตรวจดูการแสดงผล ถ้าไม่กด Font มันจะไม่เปลี่ยนนะจ๊ะ

Step 15: มะ มะ มา แว้วววววว แต่มันเล็กไปหน่อยป่ะ

Step 16: เพิ่มขนาดซะหน่อย ขนาดฟ้อนน่ะ ^..^

Step 17 : OK เรียบร้อย

ดูแล้วเป็นไง นี่แค่ฟีเจอร์ใหม่เอามานำเสนอแค่เรื่องเดียว ยังมีเรื่องเจ๋งๆ อื่นๆ ของเวอร์ชั่น CS6 ติดตามตอนต่อไปจ้ะ ^..^

Related Articles


Share
Categories: Tip & Trick
Tags:

About the author

นาย ณัฐพงศ์ พันธุศิลป์ (กอล์ฟ) Website Manager Unicorn Max Co.,Ltd.

Website : http://www.unicornmax.com

Facebook : http://www.facebook.com/unicornmax

Twiter :