CSS ปรับขนาดสำหรับ @font-face

เมื่อโหลดแบบอักษรเว็บ ตอนนี้คุณสามารถปรับขนาดแบบอักษรเพื่อปรับขนาดแบบอักษรของเอกสารให้เป็นมาตรฐานและป้องกันไม่ให้เลย์เอาต์เปลี่ยนเมื่อสลับระหว่างแบบอักษร

Adam Argyle

พิจารณาการสาธิตต่อไปนี้ซึ่ง font-size เป็น 64px ที่สอดคล้องกัน และความแตกต่างเพียงอย่างเดียวระหว่างส่วนหัวแต่ละรายการเหล่านี้คือ font-family ตัวอย่างทางด้านซ้ายไม่ได้ปรับขนาดและมีขนาดสุดท้ายไม่สอดคล้องกัน ตัวอย่างทางด้านขวาใช้ size-adjust เพื่อให้แน่ใจว่า 64px เป็นขนาดสุดท้ายที่สอดคล้องกัน

โพสต์นี้จะอธิบายคำอธิบายแบบอักษรของ CSS ใหม่ที่ชื่อ size-adjust นอกจากนี้ ยังแสดงวิธีแก้ไขและปรับขนาดแบบอักษรให้เป็นมาตรฐานเพื่อให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ราบรื่นขึ้น ระบบการออกแบบที่สอดคล้องกัน และเลย์เอาต์หน้าเว็บที่คาดการณ์ได้มากขึ้น กรณีการใช้งานที่สำคัญอย่างหนึ่งคือการเพิ่มประสิทธิภาพการแสดงผลแบบอักษรของเว็บเพื่อป้องกันการเปลี่ยนแปลงเลย์เอาต์สะสม (CLS)

ต่อไปนี้คือการสาธิตแบบอินเทอร์แอกทีฟของพื้นที่ปัญหา ลองเปลี่ยนแบบตัวพิมพ์ด้วยเมนูแบบเลื่อนลง แล้วสังเกตผลลัพธ์

1. ความแตกต่างของระดับความสูงในผลลัพธ์
2. เนื้อหาที่น่าตกใจมีการเปลี่ยนแปลง
3. พื้นที่เป้าหมายแบบอินเทอร์แอกทีฟที่เคลื่อนไหว (เมนูแบบเลื่อนลงจะกระโดดไปมา)

วิธีปรับขนาดแบบอักษรด้วย size-adjust

ข้อมูลเบื้องต้นเกี่ยวกับไวยากรณ์

@font-face {
  font-family: "Adjusted Typeface";
  size-adjust: 150%;
  src: url(some/path/to/typeface.woff2) format('woff2');
}

1. สร้างแบบตัวพิมพ์ที่กำหนดเองชื่อ Adjusted Typeface
2. ใช้ size-adjust เพื่อปรับขนาดแต่ละอักขระเป็น 150% ของขนาดเริ่มต้น
3. มีผลเฉพาะกับแบบอักษรที่นำเข้ารายการเดียว

ใช้แบบตัวพิมพ์ที่กำหนดเองด้านบนดังนี้

h1 {
  font-family: "Adjusted Typeface";
}

การลด CLS ด้วยการสลับแบบอักษรอย่างราบรื่น

ใน GIF ต่อไปนี้ ให้ดูตัวอย่างทางด้านซ้ายและดูว่ามีการเปลี่ยนแปลงอย่างไรเมื่อแบบอักษรเปลี่ยนไป นี่เป็นเพียงตัวอย่างเล็กๆ ที่มีองค์ประกอบบรรทัดแรก 1 รายการ และเห็นได้ชัดเจนมาก

หากต้องการปรับปรุงการแสดงผลแบบอักษร เทคนิคที่ดีคือการสลับแบบอักษร แสดงผลแบบอักษรของระบบที่โหลดด่วนเพื่อแสดงเนื้อหาก่อน จากนั้นสลับเป็นแบบอักษรของเว็บเมื่อแบบอักษรเว็บโหลดเสร็จแล้ว วิธีนี้ช่วยให้คุณได้รับสิ่งที่ดีที่สุดทั้ง 2 อย่าง คือผู้ใช้จะเห็นเนื้อหาโดยเร็วที่สุด และคุณจะได้รับหน้าเว็บที่มีสไตล์สวยงามโดยไม่ต้องเสียเวลาของผู้ใช้ในการดูเนื้อหา อย่างไรก็ตาม ปัญหาคือบางครั้งเมื่อโหลดแบบอักษรเว็บ ระบบจะเลื่อนทั้งหน้าไปมาเนื่องจากแสดงที่ขนาดความสูงของกล่องที่ต่างกันเล็กน้อย

การใส่ size-adjust ในกฎ @font-face จะตั้งค่าการปรับอักษรสากลสำหรับแบบอักษร การกำหนดเวลาอย่างเหมาะสมนี้จะทำให้ มีการเปลี่ยนแปลงรูปลักษณ์น้อยที่สุด ซึ่งเป็นการสลับที่อย่างราบรื่น หากต้องการสลับอุปกรณ์ได้อย่างราบรื่น ให้ปรับด้วยมือหรือลองใช้ เครื่องคำนวณแบบปรับขนาด โดย Malte Ubl

ในช่วงต้นของโพสต์นี้ การแก้ไขปัญหาขนาดแบบอักษรนั้นทำโดยการลองผิดลองถูก ระบบกระตุ้นเตือน size-adjust ในซอร์สโค้ดจนกว่าส่วนหัวเดียวกันใน Cookie และ Arial จะแสดงผล 64px เหมือนกับ Press Start 2P ตามปกติ ฉันจัดแนวแบบอักษร 2 แบบให้มีขนาดแบบอักษรเป้าหมาย

@font-face {
  font-family: 'Adjusted Arial';
  size-adjust: 86%;
  src: local(Arial);
}

@font-face {
  font-family: 'Cookie';
  size-adjust: 90.25%;
  src: url(...woff2) format('woff2');
}

กำลังปรับเทียบแบบอักษร

ในฐานะผู้เขียนจะกำหนดเป้าหมายการปรับเทียบสำหรับการปรับขนาดแบบอักษรให้เป็นมาตรฐาน คุณอาจปรับให้เป็นไปตาม Times, Arial หรือแบบอักษรของระบบ จากนั้นปรับแบบอักษรที่กำหนดเองให้ตรงกัน หรือคุณอาจปรับแบบอักษรในเครื่องให้ตรงกับสิ่งที่คุณดาวน์โหลด

กลยุทธ์สำหรับการปรับเทียบ size-adjust:

1. เป้าหมายระยะไกล:
   ปรับแบบอักษรในเครื่องตามแบบอักษรที่ดาวน์โหลด
2. เป้าหมายในเครื่อง:
   ปรับแบบอักษรที่ดาวน์โหลดให้คล้ายกับแบบอักษรเป้าหมายในเครื่อง

ตัวอย่างที่ 1: เป้าหมายระยะไกล

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

@font-face {
  font-family: "Adjusted Regular Arial For Brand";
  src: local(Arial);
  size-adjust: 90%;
}

@font-face {
  font-family: "Rad Brand";
  src: url(some/path/to/a.woff2) format('woff2');
}

html {
  font-family: "Rad Brand", "Adjusted Regular Arial For Brand";
}

ในตัวอย่างนี้ แบบอักษร Arial ในเครื่องจะปรับขนาดเพื่อรอแบบอักษรที่กำหนดเองที่โหลดไว้เพื่อให้สลับได้อย่างราบรื่น

กลยุทธ์นี้มีข้อดีตรงที่นักออกแบบและนักพัฒนาซอฟต์แวร์ใช้แบบอักษร สำหรับปรับขนาดและตัวอักษรแบบเดียวกัน แบรนด์คือเป้าหมายการปรับเทียบ นี่เป็นข่าวที่ดีสำหรับระบบการออกแบบ

การมีแบบอักษรของแบรนด์เป็นเป้าหมายก็เป็นวิธีการทำงานของเครื่องคำนวณของ Malte เช่นกัน เลือกแบบอักษร Google แล้วระบบจะคำนวณวิธีปรับ Arial ให้สลับกับแบบอักษรนั้นได้อย่างราบรื่น ต่อไปนี้คือตัวอย่าง CSS ของ Roboto จากเครื่องคิดเลข ซึ่งโหลด Arial และตั้งชื่อว่า "Roboto-fallback"

@font-face {
    font-family: "Roboto-fallback";
    size-adjust: 100.06%;
    src: local("Arial");
}

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

@font-face {
    font-family: "Roboto-fallback-1";
    size-adjust: 100.06%;
    src: local("Arial");
}

@font-face {
    font-family: "Roboto-fallback-2";
    size-adjust: 99.94%;
    src: local("Arimo");
}

@font-face {
  font-family: "Roboto Regular";
  src: url(some/path/to/roboto.woff2) format('woff2');
}

html {
  font-family: "Roboto Regular", "Roboto-fallback-1", "Roboto-fallback-2";
}

ตัวอย่างที่ 2: เป้าหมายในพื้นที่

พิจารณาข้อมูลโค้ดต่อไปนี้ซึ่งจะปรับแบบอักษรที่กำหนดเองของแบรนด์ให้ตรงกับ Arial

@font-face {
  font-family: "Rad Brand - Adjusted For Arial";
  src: url(some/path/to/a.woff2) format('woff2');
  size-adjust: 110%;
}

html {
  font-family: "Rad Brand - Adjusted For Arial", Arial;
}

กลยุทธ์นี้มีข้อดีคือแสดงผลโดยไม่มีการปรับเปลี่ยนใดๆ จากนั้นจึงปรับแบบอักษรขาเข้าให้ตรงกัน

การปรับแต่งอย่างละเอียดด้วย ascent-override, descent-override และ line-gap-override

หากการปรับขนาดแบบทั่วไปของแบบอักษรไม่เพียงพอสำหรับการออกแบบหรือกลยุทธ์การโหลด ตัวเลือกการปรับแต่งแบบละเอียดต่อไปนี้จะทำงานร่วมกับ size-adjust ได้ พร็อพเพอร์ตี้ ascent-override, descent-override และ line-gap-override มีการใช้งานใน Chromium 87+ และ Firefox 89 ขึ้นไปอยู่ในขณะนี้

ascent-override

ตัวระบุ ascent-override จะกำหนดความสูงเหนือเส้นฐานของแบบอักษร

@font-face {
  font-family: "Ascent Adjusted Arial Bold";
  src: local(Arial Bold);
  ascent-override: 71%;
}

บรรทัดแรกสีแดง (ไม่ได้ปรับ) มีเว้นวรรคเหนือตัวอักษร A และ O ตัวพิมพ์ใหญ่ ขณะที่บรรทัดแรกสีน้ำเงินได้รับการปรับเพื่อให้ความสูงของตัวพิมพ์ใหญ่พอดีกับกล่องขอบเขตโดยรวม

descent-override

ตัวบ่งชี้ descent-override จะกำหนดความสูงใต้เส้นฐานของแบบอักษร

@font-face {
  font-family: "Ascent Adjusted Arial Bold";
  src: local(Arial Bold);
  descent-override: 0%;
}

บรรทัดแรกสีแดง (ไม่ได้ปรับ) มีเว้นวรรคใต้บรรทัดฐานของ D และ O ส่วนบรรทัดแรกสีน้ำเงินได้รับการปรับเพื่อให้ตัวอักษรวางพอดีกับบรรทัดฐาน

line-gap-override

ข้อบ่งชี้ line-gap-override กำหนดเมตริกช่องว่างระหว่างบรรทัดสำหรับแบบอักษร นี่คือช่องว่างระหว่างบรรทัดของแบบอักษรที่แนะนำหรือจุดนำหน้าภายนอก

@font-face {
  font-family: "Line Gap Adjusted Arial";
  src: local(Arial);
  line-gap-override: 50%;
}

บรรทัดแรกสีแดง (ไม่ได้ปรับ) ไม่มี line-gap-override โดยพื้นฐานแล้วอยู่ที่ 0% ขณะที่บรรทัดแรกสีน้ำเงินมีการปรับเพิ่มขึ้น 50% ซึ่งจะสร้างพื้นที่ด้านบนและด้านล่างตัวอักษรให้สอดคล้องกัน

สรุปข้อมูลทั้งหมด

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

บทสรุป

ฟีเจอร์ CSS ของ @font-face size-adjust เป็นวิธีที่ยอดเยี่ยมในการปรับแต่งกล่องขอบข้อความของเลย์เอาต์เว็บเพื่อปรับปรุงประสบการณ์การสลับแบบอักษร ซึ่งจะช่วยหลีกเลี่ยงการเปลี่ยนแปลงเลย์เอาต์สำหรับผู้ใช้ ดูข้อมูลเพิ่มเติมได้จากแหล่งข้อมูลต่อไปนี้

• ข้อกำหนดระดับ 5 ของแบบอักษร CSS
• การปรับขนาดบน MDN
• การสลับ @font-face แบบราบรื่น generator
• Cumulative Layout Shift (CLS) ใน web.dev
• วิธีใหม่ในการลดผลกระทบในการโหลดแบบอักษร: CSS Font Descriptor

รูปภาพโดย Kristian Strand ใน Unsplash