css font ตัวช่วยจัดการเรื่อง font ทั้งหลายของ css

css font ตัวช่วยจัดการเรื่อง font ทั้งหลายของ css

คนที่ได้จัดหน้าเว็บด้วย css มาระยะหนึ่งจะรู้ว่าเรื่อง font เป็นเรื่องที่น่าปวดหัวไม่น้อย เพราะว่าแต่ละระบบมักจะแสดงต่างกันไปไม่ตรงตามที่เราตั้งค่า

วิธีนี้เราแก้ได้ง่ายมากๆ เหมือนการแก้ไขด้วย css reset ตามในบทความก่อนเลย แต่คราวนี้เป็น font reset css ก็ไม่ปาน

เราต้องเข้าใจอย่างนึงครับ ว่าธรรมชาติของ web browser เค้ากำเนิดเกิดมาจากที่แต่งต่างกัน ดังนั้นคุณลักษณะ ก็เลยเกิดมาไม่เหมือนกันด้วย เหมือนกับคนไทย รูปร่างหน้าตาไม่เหมือนคนอเมริกาอย่างไรอย่างนั้นแหล่ะ ดังนั้นเวลาที่จะจับมาแต่งหน้าทำผม ก็เลยทำวิธีเดียวกันไม่ได้ หรือทำวิธีเดียวกัน ก็ได้ไม่เหมือนกันอีก

ดังนั้นการแก้ไขปัญหา เลยเหมือนการจับเอามาแก้ไขตกแต่ง ให้มีคุณลักษณะที่เป็นพื้นฐานเหมือนกันก่อน เวลาเอามาแต่งจะได้ออกมาหน้าตาเหมือนกัน

เรื่อง font เป็นเรื่องที่น่าหวดหัวสำหรับหลายๆคนแน่นอน เพราะว่า fix ขนาดแล้ว แต่สุดท้ายก็ออกมาได้ผลที่ไม่เหมือนกันอีกจนได้

วันนี้เราขอเสนอ CSS font ซึ่งหน้าที่ของมันก็คือการ reset ขนาดตัวหนังสือแต่ละ browser ให้ออกมามีหน้าตาและขนาดที่เหมือนกัน

โดยผมเอง ใช้ YUI อยู่ครับ ลองเปิดดูมีวิธีการใช้พร้อมตัวอย่างแนะนำเอาไว้อยู่แล้ว

อันนี้คือภาพตัวอย่างก่อนการใช้ font reset ครับ คือโค้ดแบบดิบๆเลย


จะเห็นว่า google chrome กับ internet explorer แสดงขนาด font ที่ไม่เท่ากัน ทั้งๆที่เป็นข้อความเดียวกันจากหน้าเว็บเดียวกัน ดังนั้นเราจึงเอา css font เข้ามาช่วยได้ผลดังนี้


เนียนเลยมั้ยครับ หน้าตาและขนาดออกมาเท่ากันเลย ทีนี้ เราจะเอาไปตั้งค่าขนาด font เป็นเท่าไรก็แล้วแต่เราแล้วครับ ซึ่ง ถ้าใช้ของ YUI เหมือนที่ผมแนะนำเนี่ย เอามาตั้งขนาด font ให้เป็น 0.8-0.9 em ของ font Tahoma ก็กำลังสวยครับ ไม่เล็ก และไม่ใหญ่จนเกินไป

ของเค้าดีจริงครับ อิๆๆ

การเอา css font มาใช้ ทาง yahoo แนะนำว่า ควรเพิ่มและลดขนาดโดยใช้เป็น % หรือ อัตราส่วน(em)

Create: Modify : 2010-06-08 22:51:24 Read : 12839 URL :