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

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

Adam Argyle

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

ในตัวอย่างนี้ เครื่องมือแก้ไขข้อบกพร่องเลย์เอาต์ตารางกริด CSS ของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome จะใช้เพื่อแสดงความสูง

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

Browser Support

• 92
• 92
• 92
• 17

Source

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

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

คำสำคัญ: ชุดแบบอักษรกับแบบตัวพิมพ์: แบบตัวพิมพ์จะอ้างอิงตามชื่อชุดแบบอักษรบวกกับแบบอักษร Helvetica Bold หมายถึงแบบตัวพิมพ์หนาที่เฉพาะเจาะจง ส่วน Helvetica หมายถึงตระกูลแบบตัวพิมพ์ทั้งหมดที่มีมากกว่า 8 แบบ (ปกติ, หนา, เอียง ฯลฯ) เมื่อใช้ CSS @font-face คุณจะต้องจัดการกับแบบตัวพิมพ์ แม้ว่าในการใช้งานคุณจะต้องเขียน font-family ก็ตาม

วิธีปรับขนาดแบบอักษรด้วย 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";
}

คำเตือน: หากบรรทัดแรกที่ 2 ในการสาธิตด้านบนไม่ใหญ่กว่าบรรทัดแรก แสดงว่าเบราว์เซอร์ของคุณไม่รองรับ size-adjust

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

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

ตัวอย่างทางด้านซ้ายมีการเปลี่ยนแปลงเลย์เอาต์ ส่วนตัวอย่างทางด้านขวาไม่มี

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

เนื้อหาที่มากขึ้นหมายถึงการเปลี่ยนเลย์เอาต์ที่อาจเกิดขึ้นมากขึ้นเมื่อเปลี่ยนแบบอักษร

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

เลือกแบบอักษรเว็บของ Google แล้วรับข้อมูลโค้ด @font-face ที่ปรับไว้ล่วงหน้า

ในตอนต้นของโพสต์นี้ การแก้ไขปัญหาขนาดแบบอักษรทำได้โดยการลองผิดลองถูก 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 Fonts แล้วระบบจะคำนวณวิธีปรับ Arial เพื่อสลับกับแบบอักษรดังกล่าวได้อย่างราบรื่น ต่อไปนี้เป็นตัวอย่าง CSS ของ Roboto จากเครื่องมือคำนวณ ซึ่งมีการโหลด Arial และตั้งชื่อว่า "Roboto-fallback"

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

คำเตือน: ลำดับของ font-family มีความสำคัญอย่างยิ่ง ซึ่งเป็นตำแหน่งที่ใช้จัดลำดับและลำดับความสำคัญ ตรวจสอบว่าแบบตัวพิมพ์ที่คุณต้องการมากที่สุดอยู่เป็นอันดับแรก นอกจากนี้ 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

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

ascent-override

Browser Support

• 87
• 87
• 89
• 

Source

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

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

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

descent-override

Browser Support

• 87
• 87
• 89
• 

Source

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

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

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

line-gap-override

Browser Support

• 87
• 87
• 89
• 

Source

ข้อบ่งชี้ 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 เป็นวิธีที่น่าสนใจในการปรับแต่งกรอบล้อมรอบข้อความของเลย์เอาต์เว็บเพื่อปรับปรุงประสบการณ์การสลับแบบอักษร ซึ่งจะช่วยหลีกเลี่ยงการเปลี่ยนเลย์เอาต์สำหรับผู้ใช้ ดูข้อมูลเพิ่มเติมได้จากแหล่งข้อมูลต่อไปนี้

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