ตัวแปลง PT เป็น PX

ตัวแปลง PT เป็น PX แปลงพอยต์เป็นพิกเซล — และแปลงพิกเซลกลับเป็นพอยต์ — สำหรับทั้งงานบนหน้าจอและงานพิมพ์ ตัวแปลงส่วนใหญ่ให้ตัวเลขเดียวตามอัตราส่วน CSS คงที่ 1pt = 1.3333px คำตอบนี้ถูกต้องในเบราว์เซอร์ แต่ผิดในเกือบทุกกรณีอื่น เพราะพอยต์เป็นหน่วย ทางกายภาพ และจำนวนพิกเซลภายในขึ้นอยู่กับความละเอียดของเอาต์พุต เครื่องมือนี้ให้ทั้งสองค่า: ค่า CSS ที่เบราว์เซอร์จะแสดงผลจริง และค่าพิกเซลของอุปกรณ์ที่ 72, 150, 300, 600 หรือ DPI ที่กำหนดเอง พร้อมขนาดทางกายภาพจริงเป็นมิลลิเมตรและนิ้วบนไม้บรรทัดจริง

สูตร PT เป็น PX

หนึ่งพอยต์นิยามไว้ว่าเท่ากับหนึ่งส่วนเจ็ดสิบสองของนิ้วพอดี หนึ่งนิ้วมีจำนวนพิกเซลเท่ากับความละเอียดเอาต์พุต เมื่อนำข้อเท็จจริงทั้งสองมารวมกัน จึงได้สูตรการแปลงดังนี้:

บนเว็บ ความละเอียดไม่ใช่ตัวแปร ข้อกำหนด CSS กำหนดให้ 1in = 96px ดังนั้นเบราว์เซอร์จะใช้ 96 เสมอ และสูตรจึงกลายเป็นค่าคงที่:

นี่คือเหตุผลที่ 12pt เท่ากับ 16px ในทุกเบราว์เซอร์และทุกอุปกรณ์ ไม่ว่าจะเป็นหน้าจอแล็ปท็อป 1× หรือหน้าจอโทรศัพท์ 3× พิกเซล CSS เป็นหน่วยอ้างอิง ไม่ใช่พิกเซลฮาร์ดแวร์

หนึ่งนิ้ว สามหน่วย

วิธีที่ง่ายที่สุดในการจำแนกหน่วยเหล่านี้คือจำไว้ว่าทั้งหมดอธิบายระยะทางทางกายภาพเดียวกัน แถบแต่ละแถบด้านล่างกว้างหนึ่งนิ้วพอดี:

ตารางแปลง PT เป็น PX

คอลัมน์เว็บคือค่าที่ควรใช้สำหรับ CSS ส่วนคอลัมน์ 300 DPI คือค่าที่ควรใช้เมื่อส่งออก PDF เป็นรูปภาพแรสเตอร์ จัดวางไฟล์พิมพ์ หรือกำหนดขนาดข้อความในบิตแมปที่จะนำไปพิมพ์

ทำไมขนาดพอยต์เดียวกันจึงให้จำนวนพิกเซลต่างกัน

นี่คือเรื่องเดียวที่ทำให้หลายคนสับสน จึงควรอธิบายให้ชัดเจน: ขนาดทางกายภาพไม่เคยเปลี่ยน 12pt เท่ากับหนึ่งส่วนหกของนิ้วเสมอ สิ่งที่เปลี่ยนคือความละเอียดในการสุ่มตัวอย่างนิ้วนั้น

• 72 DPI — ความละเอียดหน้าจอ Macintosh ในอดีต ซึ่งเลือกไว้อย่างเจาะจงให้ 1pt = 1px ยังคงเป็นค่าเริ่มต้นในกระบวนการสร้างรูปภาพรุ่นเก่าบางระบบ จึงเป็นเหตุผลที่บางครั้งข้อความ 12pt ส่งออกมาเพียง 12 พิกเซล
• 96 DPI — ค่าเริ่มต้นของ Windows และความละเอียดอ้างอิงที่ใช้กำหนด CSS นี่คือคำตอบสำหรับเว็บและเป็นค่าที่เบราว์เซอร์ใช้
• 150 DPI — คุณภาพงานพิมพ์แบบร่าง หรืองานขนาดใหญ่ที่ตั้งใจให้อ่านจากระยะไกล
• 300 DPI — มาตรฐานงานพิมพ์เชิงพาณิชย์ คำบรรยาย 12pt ในเอาต์พุต 300 DPI ต้องใช้ความสูง 50 พิกเซล ไม่ใช่ 16
• 600 DPI — ลายเส้นละเอียด งานพิมพ์คุณภาพสูง และเอาต์พุตเลเซอร์ที่ต้องรักษาเส้นบาง

หากคุณเคยส่งออกงานศิลป์ด้วย “ขนาดที่ถูกต้อง” แล้วพบว่าตัวอักษรนุ่มและเป็นเม็ด อัตราส่วนนี้มักเป็นสาเหตุ: เลย์เอาต์วัดเป็นพอยต์ แต่แรสเตอร์สร้างที่ 72 หรือ 96 DPI แทนที่จะเป็น 300

ขนาดพอยต์วัดอะไรจริง ๆ

ฟอนต์ 12pt ไม่ได้หมายความว่าตัวอักษรที่มองเห็นสูง 12 พอยต์ ขนาดพอยต์อธิบาย em square — ตารางออกแบบที่มองไม่เห็นซึ่งใช้วาดแบบตัวอักษร ตัวอักษรจะกินพื้นที่ในตารางนั้นมากน้อยเพียงใดขึ้นอยู่กับนักออกแบบฟอนต์ทั้งหมด จึงเป็นเหตุผลที่ฟอนต์สองแบบซึ่งตั้งขนาดพอยต์เท่ากันอาจดูมีสเกลแตกต่างกันมาก

ควรใช้ pt หรือ px ใน CSS?

สำหรับสไตล์บนหน้าจอ ให้ใช้ px หรือ rem พอยต์เป็นหน่วยสัมบูรณ์ใน CSS เช่นเดียวกับ px จึงมีข้อจำกัดด้านการเข้าถึงแบบเดียวกัน: ข้อความที่กำหนดขนาดด้วย pt จะไม่สนใจการตั้งค่าขนาดฟอนต์ของเบราว์เซอร์ผู้เข้าชม การใช้ pt ยังทำให้เกิดความสับสน เพราะเพื่อนร่วมงานที่อ่านสไตล์ชีตอาจคิดว่าเป็นพอยต์ทางกายภาพของอุปกรณ์เอาต์พุต ทั้งที่ไม่ใช่

จุดที่ pt เหมาะสมจริง ๆ คือสไตล์ชีตงานพิมพ์ เพราะเอาต์พุตวัดเป็นนิ้วจริง:

@media print {
  body { font-size: 11pt; line-height: 1.45; }
  h1   { font-size: 24pt; }
  h2   { font-size: 18pt; }
  .no-print { display: none; }
}

เบราว์เซอร์จะเทียบพอยต์เหล่านั้นกับขนาดกระดาษจริงเมื่อสร้างงานพิมพ์ ดังนั้นเนื้อหา 11pt จึงออกมาบนกระดาษเป็น 11pt จริง ซึ่งเป็นขนาดเดียวกับที่โปรแกรมประมวลผลคำสร้าง

แปลงเอกสาร Word หรือ InDesign เป็นเว็บ

1. นำขนาดพอยต์จากสไตล์ชีตของเอกสารมาใช้โดยตรง — โดยทั่วไปคือเนื้อหา 11pt หัวข้อย่อย 16pt และหัวข้อใหญ่ 24pt
2. วางค่าทั้งหมดลงในช่องค่าในครั้งเดียว คั่นด้วยจุลภาค และคงความละเอียดไว้ที่ 96
3. อ่านค่าจากคอลัมน์พิกเซล CSS: 11pt กลายเป็น 14.67px, 16pt กลายเป็น 21.33px และ 24pt กลายเป็น 32px
4. ปัดเป็นสเกลที่สะอาดก่อนนำไปใช้งานจริง ตัวอักษรงานพิมพ์ยอมรับเศษส่วนแปลก ๆ ได้ แต่สเกลตัวอักษรบนเว็บอ่านง่ายกว่าที่พิกเซลเต็มหรือครึ่งพิกเซล ดังนั้น 14.67px มักปัดเป็น 15px หรือ 16px
5. แปลงค่าพิกเซลสุดท้ายเป็น rem หากระบบการออกแบบของคุณใช้หน่วยสัมพัทธ์

หน่วย CSS แบบสัมบูรณ์ที่เกี่ยวข้อง

พอยต์เป็นหนึ่งในกลุ่มเล็ก ๆ ของหน่วยสัมบูรณ์ที่ CSS กำหนดโดยอิงกับนิ้ว 96 พิกเซลเดียวกัน เมื่อเข้าใจทั้งกลุ่มแล้ว การแปลงจะเป็นเรื่องง่าย:

• 1in = 96px = 72pt = 6pc = 25.4mm
• 1pc (ไพกา) = 12pt = 16px
• 1cm = 37.795px ≈ 28.35pt
• 1mm = 3.7795px ≈ 2.835pt
• 1Q (หนึ่งในสี่มิลลิเมตร) = 0.945px

วิธีใช้ตัวแปลงนี้

1. เลือกทิศทาง: pt → px หรือ px → pt
2. ป้อนค่าของคุณ: หนึ่งตัวเลขหรือสเกลตัวอักษรทั้งชุดที่คั่นด้วยจุลภาคหรือเว้นวรรค (สูงสุด 20 ค่าในครั้งเดียว) ระบบยอมรับและละเว้นหน่วยท้าย เช่น 12pt
3. ตั้งค่าความละเอียดเอาต์พุต: คงไว้ที่ 96 DPI สำหรับ CSS และงานเว็บ หรือแตะชิปเพื่อเลือก 72, 150, 300 หรือ 600 DPI
4. คลิกแปลง: อ่านผลลัพธ์ การเปรียบเทียบ DPI ตัวอย่างข้อความตามขนาดจริง ไม้บรรทัดมิลลิเมตร และบันไดอ้างอิง
5. คัดลอก CSS: ปุ่มเดียวจะคัดลอกการประกาศ font-size ทุกบรรทัด โดยเก็บค่าพอยต์ต้นฉบับไว้ในคอมเมนต์

คำถามที่พบบ่อย

ฉันจะแปลง pt เป็น px ได้อย่างไร?

คูณค่าพอยต์ด้วยความละเอียดเอาต์พุตแล้วหารด้วย 72 เพราะหนึ่งพอยต์เท่ากับหนึ่งส่วนเจ็ดสิบสองของนิ้ว บนเว็บความละเอียดคงที่ที่ 96 DPI ดังนั้น px = pt × 1.3333 ตัวอย่างเช่น 12pt เท่ากับ 16px

12pt มีกี่พิกเซล?

ใน CSS และเบราว์เซอร์ทุกชนิด 12pt เท่ากับ 16px พอดี ในงานพิมพ์หรือไฟล์รูปภาพที่ 300 DPI ตัวอักษร 12pt เดียวกันมีความสูง 50 พิกเซล และที่ 600 DPI มีความสูง 100 พิกเซล เพราะจำนวนพิกเซลจะเพิ่มตามความละเอียด ในขณะที่ขนาดทางกายภาพยังเท่าเดิม

1pt เท่ากับ 1.3333px เสมอหรือไม่?

ใน CSS จะเท่ากับ 1.3333px เสมอ เพราะข้อกำหนด CSS กำหนดให้หนึ่งนิ้วเท่ากับ 96 พิกเซลพอดี แต่ไม่เป็นจริงสำหรับเอาต์พุตแรสเตอร์: ที่ 300 DPI หนึ่งพอยต์เท่ากับ 4.1667 พิกเซลของอุปกรณ์ และที่ 72 DPI หนึ่งพอยต์เท่ากับหนึ่งพิกเซลพอดี

pt และ px แตกต่างกันอย่างไร?

พอยต์เป็นหน่วยตัวอักษรทางกายภาพที่เท่ากับหนึ่งส่วนเจ็ดสิบสองของนิ้ว ใช้ในงานพิมพ์ โปรแกรมประมวลผลคำ และงานจัดพิมพ์ ส่วนพิกเซลเป็นหน่วยแสดงผล ใน CSS พิกเซลก็อิงกับระยะทางกายภาพหนึ่งส่วนเก้าสิบหกของนิ้วเช่นกัน จึงทำให้สองหน่วยนี้แปลงด้วยอัตราส่วนคงที่บนเว็บ แต่ไม่ใช่ในไฟล์รูปภาพ

ควรใช้ pt หรือ px ใน CSS?

ใช้ px หรือ rem สำหรับสไตล์บนหน้าจอ และเก็บ pt ไว้สำหรับสไตล์ชีตงานพิมพ์ พอยต์เป็นหน่วยทางกายภาพแบบสัมบูรณ์ ดังนั้นข้อความที่กำหนดด้วย pt จะไม่สนใจการตั้งค่าขนาดฟอนต์ของเบราว์เซอร์ผู้เข้าชม ภายในบล็อก @media print pt เป็นหน่วยที่เหมาะสม เพราะเอาต์พุตวัดจริงเป็นนิ้ว

ควรใช้ DPI เท่าใดสำหรับงานพิมพ์?

300 DPI เป็นมาตรฐานสำหรับงานพิมพ์เชิงพาณิชย์และเอาต์พุตคุณภาพภาพถ่าย 150 DPI ใช้ได้สำหรับงานร่างและงานขนาดใหญ่ที่อ่านจากระยะไกล ส่วน 600 DPI ใช้กับลายเส้นละเอียดและงานพิมพ์คุณภาพสูง ให้ตั้งค่าความละเอียดตามค่าที่เครื่องพิมพ์หรือกล่องโต้ตอบการส่งออกของคุณต้องการ

ทำไมข้อความ 12pt จึงไม่สูง 12 พอยต์บนหน้าจอ?

ขนาดพอยต์อธิบาย em square ของฟอนต์ ซึ่งเป็นตารางออกแบบที่ใช้วาดตัวอักษร ไม่ใช่ความสูงของอักขระใดอักขระหนึ่ง โดยทั่วไปความสูงตัวพิมพ์ใหญ่มีประมาณ 70% ของขนาด em และความสูง x ของตัวพิมพ์เล็กประมาณ 50% ดังนั้นตัวพิมพ์ใหญ่ 12pt จึงสูงประมาณ 8.4pt

อัตราส่วนพิกเซลของอุปกรณ์เปลี่ยนการแปลง pt เป็น px หรือไม่?

ไม่เปลี่ยน บนหน้าจอ 2× หรือ 3× เบราว์เซอร์ยังรายงาน 12pt เป็น 16 พิกเซล CSS แล้วจึงแสดง 16 พิกเซล CSS เหล่านั้นโดยใช้พิกเซลฮาร์ดแวร์ 32 หรือ 48 พิกเซล พิกเซล CSS เป็นหน่วยอ้างอิง ดังนั้นตัวเลขในสไตล์ชีตจะไม่เปลี่ยน พิกเซลฮาร์ดแวร์ที่เพิ่มขึ้นเพียงทำให้ขนาดเดิมดูคมชัดขึ้น

แหล่งข้อมูลเพิ่มเติม

• หน่วยความยาว CSS - MDN
• ความยาวสัมบูรณ์ - ค่า CSS ของ W3C