เมื่อผสมชุดแบบอักษรต่างๆ เช่น เมื่อแทรกข้อมูลโค้ดในบรรทัด หรือเปลี่ยนชุดแบบอักษรสำหรับธีมต่างๆ ความแตกต่างของ "ความสูง x" (ความสูงของตัวอักษรพิมพ์เล็ก) อาจทำให้แบบอักษรหนึ่งดูเล็กหรือใหญ่กว่าแบบอักษรอื่นมาก ซึ่งอาจทำให้อ่านยากและเลย์เอาต์เปลี่ยนไป
พร็อพเพอร์ตี้ font-size-adjust ช่วยให้คุณปรับขนาดภาพของข้อความให้เป็นมาตรฐานได้โดยการปรับขนาดแบบอักษรตามเมตริกแบบอักษรที่เฉพาะเจาะจง (โดยปกติคือความสูงของตัว x)
ขั้นตอนการติดตั้งใช้งาน
- บังคับ: ใช้
font-size-adjustกับองค์ประกอบที่ความสอดคล้องของแบบอักษรเป็นสิ่งสำคัญ เช่น คอนเทนเนอร์ที่ใช้แบบอักษรบนเว็บหรือบล็อกที่มีชุดแบบอักษรผสมกัน - บังคับ: ใช้คีย์เวิร์ด
from-fontกับองค์ประกอบเพื่อจับคู่ขนาดแบบอักษรในองค์ประกอบที่ฝังกับสัดส่วนของแบบอักษรหลักโดยอัตโนมัติ - บังคับ: ใช้ค่าการลบล้างสัดส่วนภาพที่เป็นตัวเลขที่เฉพาะเจาะจงสำหรับ
font-size-adjust(เช่นfont-size-adjust: 0.5) เพื่อปรับสัดส่วนให้เป็นมาตรฐานอย่างอิสระเมื่อสัดส่วนแบบอักษรที่อิงตามมาจากธีมที่แตกต่างกัน
ตัวอย่าง: การปรับความสูงของตัวอักษรพิมพ์เล็กให้เป็นมาตรฐานโดยอัตโนมัติ
การใช้ from-font เป็นแนวทางที่มีประสิทธิภาพมากที่สุด โดยจะดึงสัดส่วนภาพของความสูง x จากแบบอักษรแรกที่ใช้ได้และนำไปใช้กับแบบอักษรในองค์ประกอบย่อย
.content-area {
font-family: "MyCustomWebFont";
/* Automatically extract and apply x-height ratio from MyCustomWebFont */
font-size-adjust: from-font;
}
.content-area span{
font-family: "MyOtherCustomWebFont"
}
ตัวอย่าง: การระบุความสูงของตัวอักษรพิมพ์เล็กที่เฉพาะเจาะจง
เมื่อแบบอักษรที่จะปรับไม่ใช่แบบอักษรย่อยของแบบอักษรที่จะใช้เป็นฐานของขนาด ให้ระบุค่าที่จะปรับความสูงของตัวอักษรพิมพ์เล็ก
.theme{
font-family: Verdana, sans-serif;
}
.theme.alternate{
font-family: Times;
/* Set to the aspect ratio (x-height / font-size) of the primary font */
font-size-adjust: 0.51;
}
กลยุทธ์สำรอง
บังคับ: ในเบราว์เซอร์ที่ไม่รองรับ font-size-adjust แบบอักษรจะแสดงผลตามค่า font-size ปกติ คุณต้องระบุกลยุทธ์สำรองที่ถูกต้องสำหรับเบราว์เซอร์ที่ไม่รองรับโดยใช้บล็อก @supports เพื่อลดปัญหานี้
- ใช้
@supports not (font-size-adjust: from-font)เพื่อตรวจหาการรองรับfont-size-adjustและระบุรูปแบบสำรอง (เช่น ความสูงของบรรทัดหรือขนาดแบบอักษรที่ปรับแล้ว) - เลือกแบบอักษรที่มีความสูงของตัวอักษรพิมพ์เล็กใกล้เคียงกับแบบอักษรหลัก
- ใช้การลบล้าง
font-sizeและline-heightที่เฉพาะเจาะจงสำหรับชุดแบบอักษรสำรองและชุดแบบอักษรที่ฝังอยู่
/* Feature detection for font-size-adjust */
@supports not (font-size-adjust: from-font) {
.content-area {
/* Manual adjustment for browsers without support (if needed) */
line-height: 1.6;
font-size: 1.2rem;
}
}