วิธีกำหนดขนาดตัวอักษรอย่างถูกต้อง

Question

ฉันพยายามหาspanองค์ประกอบที่มีความสูงตามที่กำหนดไว้ (ในตัวอย่างนี้23px) อย่างไรก็ตามเบราว์เซอร์จะเพิ่มพิกเซลบางส่วนให้กับองค์ประกอบ

ไม่มีpaddingและไม่มีmarginเป็นข้อความจริงที่ใหญ่กว่า ฉันจะรับความสูงของข้อความ (และด้วยspanความสูงด้วย) ได้23pxอย่างไร

ข้อกำหนด:

• ไม่มีการลองผิดลองถูก (หรือวิธีการอื่น ๆ ) เพื่อหาตัวเลขที่กำหนดเองข้าง 23px เพื่อให้ใช้งานได้
• ข้อความทั้งหมดต้องอยู่ภายในขอบของช่วง (ไม่ว่าข้อความจะอยู่ข้างในก็ตาม)
• วิธีการนี้จะต้องใช้งานได้โดยสัญชาตญาณหากมีการตัดข้อความ (เช่นขนาดองค์ประกอบจะเป็น 46px โดยมีสองบรรทัด 69px มีสามบรรทัดเป็นต้น)

span {
  font-size: 23px;
  line-height: 23px;
  border: red dashed 1px;
}

<span>This element is ...x28 (...x30 with border), but should be ...x23 (...x25 with border).</span>

Answer 1

ตอบโดย Alohci ในความคิดเห็น:

ตอนนี้ทำไม่ได้แล้ว คุณจะต้องทำการคำนวณตามเมตริกแบบอักษร 23px และแบบอักษรขึ้นและลง แต่ในปัจจุบัน CSS ไม่เปิดเผยเมตริกแบบอักษรสำหรับการคำนวณนั้น ฉันเชื่อว่ามีแผนที่จะเปิดเผยเมตริกแบบอักษรแม้ว่าฉันจะไม่แน่ใจว่าจะใช้รูปแบบใด ไม่มีเบราว์เซอร์ใดรองรับ