เมื่อแบบอักษรของเว็บโหลดขึ้น ตอนนี้คุณสามารถปรับขนาด เพื่อปรับขนาดแบบอักษรของเอกสารให้เป็นมาตรฐาน และป้องกันการเปลี่ยนเลย์เอาต์เมื่อสลับระหว่างแบบอักษร
ลองพิจารณาการสาธิตต่อไปนี้ โดยที่ font-size
เป็น 64px
ที่สอดคล้องกัน และความแตกต่างเพียงอย่างเดียวระหว่างส่วนหัวแต่ละรายการคือ font-family
ตัวอย่างด้านซ้ายไม่มีการปรับเปลี่ยนและมีขนาดสุดท้ายไม่สอดคล้องกัน ตัวอย่างทางด้านขวาใช้ size-adjust
เพื่อให้ 64px
มีขนาดสุดท้ายที่สอดคล้องกัน
โพสต์นี้สำรวจข้อบ่งชี้แบบอักษร CSS ใหม่ที่มีชื่อว่า size-adjust
นอกจากนี้ยังสาธิตวิธีการแก้ไขและปรับขนาดแบบอักษรให้เป็นมาตรฐานเพื่อให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ราบรื่นยิ่งขึ้น มีระบบการออกแบบที่สอดคล้องกัน และเลย์เอาต์หน้าเว็บที่คาดเดาได้มากขึ้น กรณีการใช้งานที่สำคัญอย่างหนึ่งคือการเพิ่มประสิทธิภาพการแสดงผลแบบอักษรของเว็บเพื่อป้องกัน Cumulative Layout Shift (CLS)
โปรดดูการสาธิตแบบอินเทอร์แอกทีฟเกี่ยวกับพื้นที่ของปัญหา ลองเปลี่ยนแบบอักษรโดยใช้เมนูแบบเลื่อนลงและสังเกตสิ่งต่อไปนี้
- ความแตกต่างของความสูงในผลลัพธ์
- เนื้อหาที่น่าตื่นตาตื่นใจมีการเปลี่ยนแปลง
- การย้ายพื้นที่เป้าหมายแบบอินเทอร์แอกทีฟ (รายการแบบเลื่อนลงจะปรากฏขึ้นมาแล้ว)
วิธีปรับขนาดแบบอักษรด้วย size-adjust
ความรู้เบื้องต้นเกี่ยวกับไวยากรณ์
@font-face {
font-family: "Adjusted Typeface";
size-adjust: 150%;
src: url(some/path/to/typeface.woff2) format('woff2');
}
- สร้างแบบอักษรที่กำหนดเองชื่อ
Adjusted Typeface
- ใช้
size-adjust
เพื่อปรับขนาดอักขระแต่ละรูปเป็น 150% ขนาดเริ่มต้น - มีผลกับแบบอักษรที่นําเข้าเพียงรายการเดียวเท่านั้น
ใช้แบบอักษรที่กำหนดเองข้างต้นดังนี้
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: เป้าหมายระยะไกล
ลองใช้ข้อมูลโค้ดต่อไปนี้ซึ่งปรับแบบอักษรที่พร้อมใช้งานในเครื่องให้มีขนาดตรงกับแบบอักษรที่กำหนดเองของ 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
ข้อบ่งชี้ ascent-override
กำหนดความสูงเหนือค่าพื้นฐานของแบบอักษร
@font-face {
font-family: "Ascent Adjusted Arial Bold";
src: local(Arial Bold);
ascent-override: 71%;
}
บรรทัดแรกสีแดง (ไม่ได้ปรับ) มีพื้นที่เหนืออักษรตัวพิมพ์ใหญ่ A และ O ในขณะที่บรรทัดแรกสีน้ำเงินมีการปรับให้ cap height พอดีกับช่องขอบโดยรวม
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 เป็นวิธีที่น่าสนใจในการปรับแต่งกรอบล้อมรอบข้อความของเลย์เอาต์เว็บเพื่อปรับปรุงการสลับแบบอักษร จึงช่วยให้ไม่ต้องเปลี่ยนแปลงเลย์เอาต์สำหรับผู้ใช้ หากต้องการเรียนรู้เพิ่มเติม
โปรดดูแหล่งข้อมูลต่อไปนี้
- ข้อกำหนดแบบอักษร CSS ระดับ 5
- การปรับขนาดใน MDN
- การสลับ @font-face โปรแกรมอย่างราบรื่น
- Cumulative Layout Shift (CLS) ใน web.dev
- วิธีใหม่ในการลดผลกระทบจากการโหลดแบบอักษร: ตัวบอกลักษณะแบบอักษร CSS
รูปภาพโดย Kristian Strand ใน Unsplash