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

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

Adam Argyle

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

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

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

การสนับสนุนเบราว์เซอร์

  • 92
  • 92
  • 92
  • 17

แหล่งที่มา

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

  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

เลือกแบบอักษรเว็บของ 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: เป้าหมายระยะไกล

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

การสนับสนุนเบราว์เซอร์

  • 87
  • 87
  • 89
  • x

แหล่งที่มา

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

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

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

descent-override

การสนับสนุนเบราว์เซอร์

  • 87
  • 87
  • 89
  • x

แหล่งที่มา

ข้อบ่งชี้ descent-override กำหนดความสูงที่ต่ำกว่าเกณฑ์พื้นฐานของแบบอักษร

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

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

line-gap-override

การสนับสนุนเบราว์เซอร์

  • 87
  • 87
  • 89
  • x

แหล่งที่มา

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

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