คุณสมบัติ font-size-adjust

คุณสมบัติ font-size-adjust ช่วยให้ ควบคุมขนาดฟอนต์ได้ โดยที่ค่าของ font-size ยังคงเดิม (ทำให้ใหญ่ขึ้นหรือเล็กลง)

การใช้งาน: สมมติใน font-family กำหนดฟอนต์สองตัวคั่นด้วยเครื่องหมายจุลภาค เช่น Georgia, "Times New Roman" สมมติว่า คอมพิวเตอร์ของผู้ใช้ไม่มีฟอนต์ Georgia - ในกรณีนี้ "Times New Roman" จะถูกนำมาใช้แทน อย่างไรก็ตาม เราจะเจอปัญหา - ด้วยค่า font-size ที่เท่ากัน ฟอนต์จะดูมีขนาดแตกต่างกัน ในตัวอย่าง ด้านล่าง ทั้งสองย่อหน้าได้รับการกำหนด font-size เป็น 16px แต่มี font-family ที่ต่างกัน ดูความแตกต่างของขนาด:

html<p style="font-size: 16px; font-family: Georgia;">
  Lorem ipsum dolor sit amet.
</p>
<p style="font-size: 16px; font-family: 'Times New Roman';">
  Lorem ipsum dolor sit amet.
</p>

Результат:

สิ่งนี้เกิดขึ้นเนื่องจากขนาดที่แสดงผลของฟอนต์ ขึ้นอยู่กับปัจจัยหลักไม่ใช่คุณสมบัติ font-size ซึ่งกำหนดเพียงขนาดรวมของฟอนต์เท่านั้น แต่ขึ้นอยู่กับอัตราส่วนระหว่างค่าของคุณสมบัติ font-size และค่าของ x-height (x-height คือความแตกต่างระหว่างขนาดของตัวพิมพ์เล็ก "x" และตัวพิมพ์ใหญ่ "X" สำหรับฟอนต์ใดฟอนต์หนึ่ง)

อัตราส่วนนี้เรียกว่า aspect ของฟอนต์ และคำนวณได้จากสูตร: aspect = font-size / x-height.

ปัญหาขนาดนี้ได้รับการแก้ไขโดยคุณสมบัติ font-size-adjust (ช่วยให้สามารถเปลี่ยน aspect ของฟอนต์ได้) ซึ่ง จะทำให้ฟอนต์ที่สองมีขนาดการมองเห็นเท่ากับฟอนต์แรก

มาทำให้ฟอนต์ Times New Roman มีขนาดเท่ากับ Georgia กัน เราทราบค่า aspect ของ Georgia - คือ 0.5 (ดูตารางด้านล่าง)

กำหนด font-size-adjust สำหรับข้อความ ที่ใช้ Times New Roman เป็นค่า 0.5 และจะเห็นว่าข้อความที่สองมีขนาด เท่ากับข้อความแรกแล้ว:

html<p style="font-size: 16px; font-family: Georgia;">
  Lorem ipsum dolor sit amet.
</p>
<p style="font-size: 16px; font-family: 'Times New Roman'; font-size-adjust: 0.5;">
  Lorem ipsum dolor sit amet.
</p>

Результат:

ไวยากรณ์

cssตัวเลือก {
  font-size-adjust: ตัวเลข | none;
}

ค่า

ค่าเริ่มต้น: none

จะหาค่า aspect สำหรับฟอนต์ได้อย่างไร?

ดูข้อความจากข้อกำหนด W3C: อัตราส่วนสัดส่วน (aspect) สำหรับ ฟอนต์ที่เลือกสามารถคำนวณได้โดย เปรียบเทียบข้อความเดียวกัน แต่ใช้ ค่า font-size-adjust ที่ต่างกัน หากค่า คุณสมบัตินี้ถูกปรับให้เหมาะสมแล้ว เมื่อใช้ขนาดฟอนต์ เดียวกัน ข้อความจะยังคงเหมือนเดิมสำหรับทุก ฟอนต์ที่ใช้ในหน้า

นี่คือค่า aspect ที่ทราบสำหรับ บางฟอนต์: Georgia - 0.5, Times New Roman - 0.46, Verdana - 0.58

ตัวอย่าง

เปรียบเทียบลักษณะของข้อความด้วยค่า font-size-adjust ที่ต่างกัน แต่มี font-size และ font-family เหมือนกัน:

html<p style="font-size: 16px; font-family: 'Times New Roman';  font-size-adjust: none;">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p style="font-size: 16px; font-family: 'Times New Roman';  font-size-adjust: 0.5;">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p style="font-size: 16px; font-family: 'Times New Roman';  font-size-adjust: 0.6;">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>

Результат:

ตัวอย่าง . การใช้งานในชีวิตจริง

โค้ดด้านล่างทำให้ในกรณีที่ผู้ใช้ ไม่มีฟอนต์ Georgia ในคอมพิวเตอร์ ฟอนต์ Times New Roman ที่ถูกใช้งานแทน จะมีขนาดเท่ากับ Georgia:

html<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elitorire
  aenean a dapibus magna, ac interdum nisl suspendisse egetile.
</p>

cssp {
  font-size: 16px;
  font-family: Georgia, "Times New Roman";
  font-size-adjust: 0.5;
}

Результат: