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

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

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

โพสต์นี้จะอธิบายตัวบ่งชี้แบบอักษร CSS ใหม่ที่เรียกว่า size-adjust นอกจากนี้ ยังแสดงวิธีแก้ไขและปรับขนาดแบบอักษรให้เป็นมาตรฐานเพื่อให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ราบรื่นขึ้น ระบบการออกแบบที่สอดคล้องกัน และเลย์เอาต์หน้าเว็บที่คาดการณ์ได้มากขึ้น Use Case ที่สําคัญอย่างหนึ่งคือการเพิ่มประสิทธิภาพการแสดงผลแบบอักษรเว็บเพื่อป้องกันการเปลี่ยนแปลงเลย์เอาต์แบบสะสม (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 ต่อไปนี้ ให้ดูตัวอย่างทางด้านซ้ายและการเปลี่ยนแปลงที่เกิดขึ้นเมื่อเปลี่ยนแบบอักษร นี่เป็นเพียงตัวอย่างเล็กๆ ที่มีองค์ประกอบบรรทัดแรกเดียว และปัญหาก็เห็นได้ชัดมาก

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

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

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

บทสรุป

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

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

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