รับทําเว็บไซต์ รับทําseo
บทความที่น่าสนใจ

บทความ ที่น่าสนใจ

การใช้ 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 ครับ

     

     

     

     

    Step 9 : เราจ

     

     

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

     

     

     

     

    Step 10 : กลับไปค

     

     

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

     

     

     

     

    Step 11 : เลือ

     

     

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

     

     

     

     

    Step 12 : ที่ P

     

     

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

     

     

     

     

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

     

     

     

     

     

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

     

     

     

     

     

    Step 15: มะ มะ

     

     

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

     

     

     

     

    Step 16: เพิ่มขนาด

     

     

    ซะหน่อย ขนาดฟ้อนน่ะ ^..^

     

     

     

     

    Step 17 : OK เรี

     

     

    ยบร้อย