Home » lab72 » Currently Reading:

lab72: custom fonts

June 25, 2010 lab72 7 Comments

lab72 เป็นโครงการที่เรามีเอาไว้สำหรับทดลองเทคโนโลยี หรือ เทคนิคใหม่ๆ ที่เราได้คิดค้น ศึกษา ลอกชาวบ้าน ต่างๆนานา โดยหวังว่าวันหนึ่งเราจะสามารถนำสิ่งที่คิดได้นี้มาใช้ให้เป็นประโยชน์กับลูกค้าของเราอย่างสูงสุด (พูดแล้วฟังดูดีมากๆ) โดยที่ผ่านมาเราในอดีต เรามีการทดลองเช่น flashpaper, css (ยุคแรกๆ), การคัดกรองเฉพาะข้อมูลที่สำคัญออกมาพิมพ์เมื่อเรากดปุ่ม print โดยลบเอาปุ่ม “print this page” ออก, ปัญหาตัวอักษร “ญ” กับ flash และอื่นๆอีกมากมาย ทีมพัฒนาก็มีทั้งทีม rgb72 เราเอง และบางครั้งก็มีทีมเพื่อนๆ ที่เข้ามาร่วมแชร์ไอเดียและเทคโนโลยีต่างๆด้วย โดย lab72 นี้เป็นสิ่งที่เรามีอยู่นานแล้ว เพียงแต่ไม่เคยได้พูดถึงกัน

วันนี้เราจะมาพูดถึงการศึกษาล่าสุดของเรากัน

ก่อนหน้านี้หากเราต้องการใช้ตัวอักษรที่มีหน้าตาแตกต่างออกไปจากตัวอักษรที่มีอยู่ในเครื่อง (ซึ่งแสนจะน่าเบื่อ) เราต้องไปทำตัวอักษรเหล่านั้นใน Photoshop จากนั้นจึง export ออกมาเป็นรูป

ล่าสุด ทีม coding ของ rgb72 ได้ศึกษาเรื่องการใช้ custom font หรือการนำแบบตัวอักษรที่นอกเหนือจากแบบที่มีอยู่ในเครื่องคอมพิวเตอร์ทุกเครื่องมาใช้โดยอาศัย JavaScript และ CSS มาช่วย โดยตัวอักษรที่เราใช้ทดลองในครั้งนี้เป็นตัวอักษร ภาษาไทย หลากหลายรูปแบบ

ผลจากการทดลองแล้วพบว่า สามารถแสดงรูปแบบตัวอักษรออกมาได้สวยงามดีมาก จะติดปัญหาหนึ่งคือปัญหา “สระลอย” โดยเฉพาะเมื่อขนาดของตัวอักษรนั้นใหญ่ขึ้น ก็จะยิ่งเห็น สระลอย ชัดเจนยิ่งขึ้น

วันนี้ลองเอาภาพ capture หน้าจอเมื่อ test custom font มาให้ได้ดูกันครับ

** หากใครพอจะทราบการแก้ปัญหาสระลอยได้ สามารถแจ้งมาได้นะครับ **

  • http://sleepydesign.com katopz

    http://code.google.com/p/sleepytypetool/

    หลักการง่ายๆ คือ replace ตัวที่ผิดเป็นตัวที่ถูก โดยแบ่งแยกตามประเภทของ font และโปรแกรมที่จะเอาไปใช้ คำสั่งที่ใช้เป็นคำสั่งพื้นฐาน สามารถแปลงเป็นภาษาอื่นๆ ได้

  • http://iannnnn.com iannnnn

    ในฟอนต์.คอมมีพูดถึงการใช้ sIFR (เอาแฟลชดึง Custom Font มาแสดงในหน้าเว็บ)
    แบบแก้สระลอยแล้วด้วยครับ ถึงจะเป็นสูตรโบราณไปนิด
    แต่แก้ปัญหาไม้เอกไม้โทได้ก็แจ่มแมวละ :D

    เพียงแต่ว่า ตอนนี้เว็บล่มอยู่ครับ T-T

  • http://www.rgb72.com sittipong

    เอ.. สงสัยผมจะเขียนอะไรผิดไปแน่ๆเลย จะบอกว่า ที่ test กันอยู่นี่คือทำ custom font ใน HTML ไม่ใช่ Flash อ่ะครับ อย่างไรก็ตามกำลังจะ tweet ไปบอกคุณ iannnnn พอดีเลยว่า.. มี font iannnnn นี่แหละที่ display ออกมาได้ perfect จริงๆ font อื่นจะมีปัญหาบ้างเช่น ดูใน firefox ไม่ได้, สระลอยเฉพาะใน Mac, หรือบาง font สระ “อือ” จะถูกตัดด้านบนออก ประมาณนี้

  • http://www.rgb72.com sittipong

    ว่าแต่ f0nt.com ทำไมล่มครับ .. สงสัยคนจะเข้าเยอะมาก เอามาไว้ที่ผมมั้ยครับ?

  • http://sleepydesign.com katopz

    @iannnnn sIFR อันนี้ป่าว http://reweblog.blogspot.com/2006/03/blog-post.html มันก็ code ฉานน่ะแหละ กิ้วๆ ;)

    @sittipong เป็นปัญหาของนักพัฒนา HTML/JS แล้วล่ะครับ อิๆ ถ้า javascript หรือ css อ้าง table font Unicode ได้ก็แปลง code as3 -> js ได้เลยครับ ยืนยันว่า code ในนั้น “สามารถแปลงเป็นภาษาอื่นๆ ได้”

  • Pingback: Tweets that mention lab72: custom fonts | blog72 -- Topsy.com

  • Cheerlab

    เนื่องจากเป็นปัญหาที่ตาราง unicode ของฟอนต์ชุดนี้ครับ
    และฟอนต์ชุดนี้ ชื่อ SMB Advance ใช่ไหมครับ 555+

Search This Site:



rgb72 on Facebook

คำศัพท์ Internet วันละคำ

ASP (คำที่เกี่ยวข้อง: asp, .net, php, SQL server, mySQL)
- Active Server Pages ภาษาในการเขียน program พัฒนาโดยบริษัท Microsoft ตัว program มีหน้าที่เชื่อมต่อระหว่างเว็บไซต์และระบบฐานข้อมูล โดย asp นั้นจะสามารถติดต่อได้กับฐานข้อมูลสองประเภทคือ Microsoft Access และ Microsoft SQL Server

72's Friends

Useful Links

Related Articles:

Logo สวยด้วย Helvetica

August 22, 2010





Heveltica อีกแล้วววววว.. ใครต่อใครก็ชมกันหนักหนา ชอบกันมากมาย ไอ้ font ที่ชื่อ Helvetica เน๊ยะ บางคนว่าสวยงามมากมาย บางคนยังแยกไม่ออกด้วยสายตาได้ระหว่าง Helvetica กับ Arial .. (แต่หลายคนบอกได้ด้วยความรู้สึก .. เท่ซะงั้น) วันนี้ไปขอข้อมูลมาจากเว็บ webdesignerdepot.com ในหัวข้อ 40 Excellent Logos Created with Helvetica ที่รวบรวม logo ดังๆ ที่สร้างโดยใช้ font Helvetica มาให้ได้ดูกัน รวมๆกันแล้วจะเห็นว่า Helvetica นี่ บางครั้งแค่พิมพ์ลงไปเฉยๆ ก็เป็น logo ได้แล้ว