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

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

Adam Argyle

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

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

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

Browser Support

  • Chrome: 92.
  • Edge: 92.
  • Firefox: 92.
  • Safari: 17.

Source

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

  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

เลือก Google Web Font แล้วรับข้อมูลโค้ด @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 แล้วระบบจะคำนวณวิธีปรับ 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

Browser Support

  • Chrome: 87.
  • Edge: 87.
  • Firefox: 89.
  • Safari: not supported.

Source

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

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

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

descent-override

Browser Support

  • Chrome: 87.
  • Edge: 87.
  • Firefox: 89.
  • Safari: not supported.

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

  • Chrome: 87.
  • Edge: 87.
  • Firefox: 89.
  • Safari: not supported.

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

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