Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 109,038

HOME > Graphic for Web > Forum > font-size จะเป็น em pt px หรือ % ดี เห่อๆ มาดูตารางเปรียบเทียบกันครับ


 

font-size จะเป็น em pt px หรือ % ดี เห่อๆ มาดูตารางเปรียบเทียบกันครับ

 
Topic : 042828



โพสกระทู้ ( 875 )
บทความ ( 1 )

สมาชิกที่ใส่เสื้อไทยครีเอท

สถานะออฟไลน์
Twitter


น่าจะมีประโยชน์เลยเก็บมาฝากกัน

http://sureshjain.wordpress.com/2007/07/06/53/



Tag : - - - -
Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2010-05-13 13:43:46 By : peterxp View : 7259 Reply : 9
 

 

No. 1



โพสกระทู้ ( 212 )
บทความ ( 0 )



สถานะออฟไลน์


ขอบคุณครับ ผม
Date : 2010-05-13 16:48:29 By : rod
 

 

No. 2



โพสกระทู้ ( 10 )
บทความ ( 0 )



สถานะออฟไลน์



Date : 2010-06-24 10:56:45 By : nid5620
 

 

No. 3



โพสกระทู้ ( 12 )
บทความ ( 0 )



สถานะออฟไลน์


ขอบคุณครับ
Date : 2010-08-02 23:37:31 By : zeaous
 

 

No. 4



โพสกระทู้ ( 1 )
บทความ ( 0 )



สถานะออฟไลน์


ใจจ้า
Date : 2010-08-11 10:02:38 By : roo_of_3
 

 

No. 5



โพสกระทู้ ( 74,059 )
บทความ ( 838 )

สมาชิกที่ใส่เสื้อไทยครีเอท

สถานะออฟไลน์
Twitter Facebook

ผมล่ะใช้มั่วเลยครับ อันไหนด็ได้สบายตาก็อันนั้นแหละ
Date : 2010-08-11 10:07:00 By : webmaster
 

 

No. 6



โพสกระทู้ ( 2 )
บทความ ( 0 )



สถานะออฟไลน์


ขอบคุณมากครับ
Date : 2010-09-15 13:51:50 By : zenith191
 

 

No. 7



โพสกระทู้ ( 3,468 )
บทความ ( 0 )

สมาชิกที่ใส่เสื้อไทยครีเอท

สถานะออฟไลน์
Twitter

ผมใช้ em อ่ะ ตอนนี้ ไม่รู้เหมือนกันว่าอันไหนมันดีกว่า

แต่รู้ว่า em มันถ่ายทอดกันได้ สบายๆ


ประวัติการแก้ไข
2010-09-15 16:56:11
Date : 2010-09-15 16:29:38 By : pjgunner.com
 

 

No. 8



โพสกระทู้ ( 1 )
บทความ ( 0 )



สถานะออฟไลน์
Twitter

ขอบคุณครับ
Date : 2010-11-06 10:03:17 By : nottthing
 

 

No. 9



โพสกระทู้ ( 4,764 )
บทความ ( 8 )



สถานะออฟไลน์


ขออภัยที่ขุดกระทู้เก่า

พอดีช่วงนี้กำลังออกแบบ typography + layout เลยศึกษาเพิ่มเติมแล้วมาเจอกระทู้นี้พอดี.
เลยอยากเอาความรู้ที่มีอยู่(และหลายคนอาจรู้แล้วก็ขอให้ข้ามไป) ขอเอามาแบ่งปันโดยย่อ.

หน่วย px (pixel)
มันเป็นหน่วยที่ตายตัว เหมาะสำหรับใช้กับ layout หรืออะไรที่จะให้มันตายตัวไปเลยเพราะเราจะไม่ต้องการให้ผู้ใช้ปรับขนาด font size ในเบราเซอร์แล้ว layout ทะลักไปซ้ายทีขวาที.

หน่วย em (emphemeral unit), rem (root em)
เป็นหน่วยที่สัมพันธ์กับ parent กล่าวคือถ้ากำหนด font size ที่ <body> เป็น 100% โดยที่เบราเซอร์ใช้ค่าฟอนต์ขนาดเดิมคือ 16 แล้วกำหนดสมมุติว่า
Code
p {
    font-size: 1em;
}

ก็จะได้ขนาดฟอนต์ของ <p> เป็น 16 pixels แต่ถ้าเอา <div>...</div> หุ้ม <p> ไว้ แล้วกำหนดขนาดฟอนต์ของ <div> เป็น 20px
Code
<div style="font-size: 20px;">
    <p>paragrahp</p>
</div>

ขนาดของ p ก็จะเป็นไปตาม parent คือ div ก็จะเป็น 20 pixels ไปด้วยเนื่องจาก div ซึ่งเป็น parent มีขนาด 20px.
แต่ถ้ากำหนด p เสียใหม่เป็น 1rem; ก็จะกลับมาเป็น 16 pixels ตาม root element คือ <body> ยกเว้นแต่ว่าผู้ใช้เปลี่ยนขนาดฟอนต์ที่เบราเซอร์จาก 16 เป็นอย่างอื่น.

หน่วย %
หน่วยนี้ก็เป็นหน่วยที่ทำงานสัมพันธ์กับ parent เหมือนกัน แต่ว่าแนะนำให้ใช้กับ <html> (font-size), <body> (font-size), <table>, <td>, <th> เท่านั้น เนื่องจากมันคำณวนยากและไม่ค่อยเหมาะสำหรับนำมาใช้กับ layout ที่ต้องการขนาดตายตัวหรือไม่ค่อยเหมาะกับการใช้กับขนาดฟอนต์ทั่วไป ที่ต้องการคำณวนให้มันง่ายกว่า. คือใช้ให้ตรงตามจุดประสงค์นั่นเอง.


ข้อมูลเพิ่มเติม:
http://pxtoem.com/ เว็บสำหรับคำณวน pixel เป็น em หรือ rem
http://www.siamhtml.com/%E0%B8%84%E0%B8%A7%E0%B8%B2%E0%B8%A1%E0%B9%81%E0%B8%95%E0%B8%81%E0%B8%95%E0%B9%88%E0%B8%B2%E0%B8%87%E0%B8%82%E0%B8%AD%E0%B8%87-font-size-%E0%B9%81%E0%B8%9A%E0%B8%9A-percent-em-px-pt/ em vs px vs %
http://thaicss.com/px_and_em/ px & em


ประวัติการแก้ไข
2017-06-27 13:05:36
2017-06-27 13:06:22
Date : 2017-06-27 13:04:07 By : mr.v
 

   

ค้นหาข้อมูล
   
 

แสดงความคิดเห็น
Re : font-size จะเป็น em pt px หรือ % ดี เห่อๆ มาดูตารางเปรียบเทียบกันครับ
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
 Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)





ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2025 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่