วิธีใช้งาน
- เลือกหน่วยของค่าที่มีอยู่ (pt, px, mm, em หรือ %) แล้วป้อนขนาด
- ระบบจะแสดงหน่วยอื่นทั้งหมดพร้อมกัน พร้อมภาพตัวอย่างในขนาดดังกล่าว
- สำหรับ em, rem และ % ให้ตั้งขนาดฟอนต์ฐาน โดยเบราว์เซอร์กำหนดค่าเริ่มต้นเป็น 16 px
คำอธิบายตัวเลือก
- พอยต์และพิกเซล
- พอยต์มีขนาด 1/72 นิ้ว และ CSS กำหนดให้พิกเซลมีขนาด 1/96 นิ้ว ดังนั้น 1 pt = 4/3 px และ 12 pt = 16 px
- มิลลิเมตร
- 1 pt = 25.4 ÷ 72 ≈ 0.353 mm ซึ่งเป็นขนาดจริงทางกายภาพของตัวฟอนต์ และใช้เมื่อพิมพ์
- em, rem และเปอร์เซ็นต์
- เป็นค่าทวีคูณของขนาดฟอนต์ฐาน เมื่อขนาดฐานเป็น 16 px, 1 em = 1 rem = 100% = 16 px = 12 pt
- ขนาดตัวอักษรจีน (号)
- โปรแกรมประมวลผลคำภาษาจีนตั้งชื่อขนาดแทนการระบุเป็นพอยต์ ตั้งแต่ 初号 (42 pt) จนถึง 八号 (5 pt) และคุณสามารถแปลงไปกลับกับขนาดเหล่านี้ได้
ขนาดที่พบบ่อย
| pt | px | em (ฐาน 16 px) |
|---|---|---|
| 9 | 12 | 0.75 |
| 10.5 | 14 | 0.875 |
| 12 | 16 | 1 |
| 14 | 18.67 | 1.1667 |
| 18 | 24 | 1.5 |
| 24 | 32 | 2 |
ขนาดบนเว็บเป็นพิกเซล พอยต์ และ rem
ใช้ค่าเริ่มต้นของเบราว์เซอร์ 16 px เป็นขนาดฐาน:
| พิกเซล | พอยต์ | rem / em | การใช้งานทั่วไป |
|---|---|---|---|
| 12 px | 9 pt | 0.75 rem | คำบรรยายภาพ เชิงอรรถ |
| 14 px | 10.5 pt | 0.875 rem | ข้อความขนาดเล็ก ป้ายกำกับ |
| 16 px | 12 pt | 1 rem | เนื้อความ |
| 18 px | 13.5 pt | 1.125 rem | เนื้อความขนาดใหญ่ ย่อหน้านำ |
| 20 px | 15 pt | 1.25 rem | หัวข้อเล็ก |
| 24 px | 18 pt | 1.5 rem | หัวข้อ |
| 32 px | 24 pt | 2 rem | ชื่อหน้า |
ควรใช้หน่วยไหน
pt (พอยต์) ใช้สำหรับงานพิมพ์และโปรแกรมประมวลผลคำ: 1 pt คือ 1/72 นิ้ว ข้อความ 12 pt จึงมีขนาดจริงเท่ากันบนเครื่องพิมพ์ทุกเครื่อง
px (พิกเซล CSS) ใช้สำหรับหน้าจอ: 1 px ถูกกำหนดเป็น 1/96 นิ้วที่การซูมปกติ ทำให้ 12 pt เท่ากับ 16 px
rem และ em เป็นหน่วยสัมพัทธ์ 1 rem คือขนาดฟอนต์ของราก (ปกติ 16 px) ส่วน 1 em คือขนาดฟอนต์ของเอลิเมนต์แม่ การใช้ rem กับข้อความทำให้คนที่ตั้งฟอนต์เริ่มต้นใหญ่ขึ้นในเบราว์เซอร์ได้ข้อความที่ใหญ่ขึ้นทุกที่
มิลลิเมตร มีประโยชน์เมื่อต้องจับคู่กับตัวอย่างที่พิมพ์: วัดความสูงของตัวพิมพ์ใหญ่ ขนาดเนื้อความจะประมาณ 1.4 เท่าของค่านั้น ขึ้นอยู่กับแบบตัวอักษร
คำถามที่พบบ่อย
12 pt เท่ากับกี่พิกเซล
16 px คูณจำนวนพอยต์ด้วย 4/3 เพื่อแปลงเป็นพิกเซล CSS หรือคูณจำนวนพิกเซลด้วย 0.75 เพื่อแปลงเป็นพอยต์
em กับ rem ต่างกันอย่างไร
rem อ้างอิงขนาดฟอนต์ของ root (html) ส่วน em อ้างอิงขนาดฟอนต์ขององค์ประกอบแม่ หากไม่ได้ตั้งขนาดฟอนต์ไว้ที่ใดเลย ทั้งคู่จะเท่ากับ 16 px
ทำไมขนาดข้อความที่วัดบนหน้าจอจึงไม่ตรงกับค่าที่แปลง
พิกเซล CSS เป็นหน่วยเชิงตรรกะที่กำหนดไว้ที่ 96 DPI ขนาดจริงบนหน้าจอขึ้นอยู่กับความหนาแน่นพิกเซลของจอและการซูมของระบบ พอยต์และมิลลิเมตรจะแม่นยำเมื่อใช้ในการพิมพ์เท่านั้น
ความเป็นส่วนตัว
เครื่องมือนี้ทำงานในเบราว์เซอร์ของคุณทั้งหมด ไฟล์และข้อความของคุณได้รับการประมวลผลบนอุปกรณ์ของคุณ และจะไม่ถูกอัปโหลดไปยังเซิร์ฟเวอร์ของเรา