px หรือ em


เมื่อเราทำเว็บไซต์ ขึ้นมา หลายๆคน อาจจะคุ้นชินกับการ กำหนด font ในไฟล์ .css ใ้ห้เป็น 10pt บ้าง 12px หรือ 14px ซึ่งเป็นการ fix font ไม่ให้ขยายใหญ่ด้วยการกด ที่ menu ของ browser view/textsize เพราะจะทำให้ layout ของเราเละเทะนั่นเอง แต่ IE7 และ FF ได้ทำให้ผู้ใช้กด ctrl+ เพื่อขยายฟ้อนต์ได้แล้ว แม้ว่าคุณจะล็อกไว้ก็ตาม แต่ในขณะนี้(วันที่เขียนเรื่องนี้อยู่) ก็ยังมีคนอีกจำนวนมากเลยทีเดียว ที่ยังใช้ IE6 อยู่ หรือต่ำกว่า ก็จะไม่สามารถขยาย font ได้ หากเค้าสายตาไม่ค่อยดี ก็คงจะเลิกดูเว็บคุณไปเลย เพราะตัวหนังสือเ็ล็กเกินไป ดังนั้น ทางเลือกในการกำหนด font ก็มีอยู่หลายตัวด้วยกัน เริ่มจาก

  • px ก็คือหน่วย pixel นั่นเอง มือโฟโต้ชอป ก็คงคุ้นเคยกันดีอยู่ เป็นหน่วยการวัด ขนาด ความละเอียดพื้นที่หน้าจอ
  • em ย่อมาจาก emphasize คือ ขนาดจำนวนเท่า เช่น h1{fon-size:1.5em} h2{fon-size:1.4em} h3{fon-size:1.3em}
    ก็จะได้ว่า h1 มีขนาด 1.5 เท่า h2 มีขนาด 1.4 เท่า แล้วมันเท่าของอะไรล่ะ มันคือจำนวนเท่าของ body ครับ ถ้าคุณกำหนด ที่ body ไว้เป็น 14px h1 ก็จะใหญ่เป็น 1.5 เท่าของ 14px และถ้าคุณกำหนดไว้ 1em มันก็จะได้เท่ากับ 14px เท่าเดิม ถ้าคุณไม่ได้กำหนดขนาด font ไว้ที่ body ค่า default ของมันก็น่าจะอยู่ที่ 16px
  • pt มาจาก point มืออิลัสเตรเตอร์ ก็คงคุ้นเคยกันดี 10pt ก็มีขนาดพอๆกับ 12px มักเป็นขนาดของฟ้อนต์ในงาน สิ่งพิมพ์แต่ใช้กับเว็บก็ได้เหมือนกัน เมื่อก่อนผมก็ชอบใช้
  • % เปอร์เซ็นต์ ใช้บ่อยกับ layout แบบ liquid layout ก็คือ เปลี่ยนแปลงตามหน้าจอนั่นเอง หากจะใช้ กำหนดขนาด font ที่ body ขนาดกำลังดีก็จะอยู่ที่ประมาณ 76%ครับ
  • ex คือ x-height ค่าความสูงของตัวอักษร x
  • pc picas; 1pc=12pt

Related Articles

  • Share/Bookmark
Categories: เริ่มต้นกับ CSS
Tags:

About the author

Webmaster ของเว็บนี้และ www.toysmile.com กับ www.wondercutie.com ความสามารถ : web design, graphic design, CSS, PHP programming, wordpress, magento ตอนนี้กำลังสนใจ : การออกแบบ ตัวการ์ตูน คาแรคเตอร์ ^^

Website : http://www.divland.com

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

Twiter : http://twitter.com/divland


  1. April 9th, 2007 at 10:03 | #1

    ดีครับ เขียนได้ดี ชอบๆ กระจ่าง:d

  2. Nut
    April 12th, 2007 at 10:54 | #2

    แล้วถ้าใน body กำหนดขนาดเป็น 1em มันจะเท่ากับกี่ px ครับ

  3. utt
    April 12th, 2007 at 13:01 | #3

    ผมว่าก็คงได้เท่าเดิมแหละครับ ลองเลยครับ เพื่อความกระจ่าง :x

  4. Offline
    December 24th, 2008 at 10:27 | #4

    บางครั้งผมก็เลือกไม่ถูกว่าจะใช้ระหว่าง px, em , pt ดี ตอนนี้ก็ยังเป็นแบบนั้นอยู่ สรุปว่าถ้าเราเขียน CSS ที่เป็นข้อความสำหรับอ่านอย่างเดียวไม่เน้น Fix อันไหนจะเหมาะที่สุดครับ

  5. Frank
    March 21st, 2009 at 14:53 | #5

    สุดยอดเลยครับ ละเอียด และกระจ่าง มากๆเลยครับ
    ขอบคุณพี่มากๆเลยครับ : )

  6. December 6th, 2009 at 17:51 | #6

    Thank you for good information

  7. December 6th, 2009 at 17:52 | #7

    แบบนี้ต้องลองครับ

  1. No trackbacks yet.