แบบอักษรสำรองที่ปรับปรุงใหม่

Katie Hempenius

สรุป

บทความนี้จะเจาะลึกเรื่องแบบอักษรสำรองและ API size-adjust, ascent-override, descent-override และ line-gap-override API เหล่านี้ช่วยให้คุณใช้แบบอักษรในเครื่องเพื่อสร้างแบบอักษรสำรองที่ตรงกับมิติข้อมูลของแบบอักษรเว็บอย่างใกล้เคียงหรือตรงกันทั้งหมด ซึ่งจะช่วยลดหรือขจัดการเปลี่ยนแปลงเลย์เอาต์ที่เกิดจากการสลับแบบอักษร

หากต้องการข้ามการอ่านบทความนี้ ต่อไปนี้คือเครื่องมือบางส่วนที่คุณสามารถใช้เพื่อเริ่มใช้ API เหล่านี้ได้ทันที

เครื่องมือเฟรมเวิร์ก:

• @next/font: ตั้งแต่ Next 13 เป็นต้นไป next/font จะใช้การลบล้างเมตริกแบบอักษรและ size-adjust โดยอัตโนมัติเพื่อแสดงแบบอักษรสำรองที่ตรงกัน
• @nuxtjs/fontaine: ตั้งแต่ Nuxt 3 เป็นต้นไป คุณสามารถใช้ nuxt/fontaine เพื่อสร้างและแทรกแบบอักษรสำรองที่ตรงกันในสไตล์ชีตที่แอป Nuxt ใช้โดยอัตโนมัติ

เครื่องมือที่ไม่ใช่เฟรมเวิร์ก:

• Fontaine: Fontaine เป็นไลบรารีที่สร้างและแทรกแบบอักษรสำรองที่ใช้การลบล้างเมตริกแบบอักษรโดยอัตโนมัติ
• repo นี้มีเมตริกแบบอักษรที่ลบล้างสำหรับแบบอักษรทั้งหมดที่โฮสต์โดย Google Fonts คุณคัดลอกและวางค่าเหล่านี้ลงในสไตล์ชีตได้

ข้อมูลเบื้องต้น

แบบอักษรสำรองคือแบบอักษรที่ใช้เมื่อแบบอักษรหลักยังไม่โหลด หรือไม่มีสัญลักษณ์ที่จําเป็นสําหรับแสดงผลเนื้อหาของหน้า ตัวอย่างเช่น CSS ด้านล่างระบุว่าควรใช้ชุดแบบอักษร sans-serif เป็นแบบอักษรสำรองสำหรับ "Roboto"

font-family: "Roboto" , sans-serif;

คุณสามารถใช้แบบอักษรสำรองเพื่อแสดงผลข้อความได้เร็วขึ้น (โดยใช้ font-display: swap) ส่งผลให้เนื้อหาของหน้าเว็บอ่านได้และมีประโยชน์เร็วขึ้น อย่างไรก็ตาม ที่ผ่านมา การใช้แบบอักษรสำรองทำให้เลย์เอาต์ไม่เสถียร การเปลี่ยนแปลงเลย์เอาต์มักเกิดขึ้นเมื่อมีการแทนที่แบบอักษรสำรองด้วยแบบอักษรเว็บ อย่างไรก็ตาม API ใหม่ที่กล่าวถึงด้านล่างสามารถลดหรือขจัดปัญหานี้ได้ด้วยการทำให้สร้างแบบอักษรสำรองที่ใช้พื้นที่เท่าๆ กับแบบอักษรเว็บได้

ตัวอักษรสำรองที่ปรับปรุงแล้ว

การสร้างแบบอักษรสำรองที่ "ปรับปรุงแล้ว" ทำได้ 2 วิธี แนวทางที่ง่ายกว่านั้นจะใช้เฉพาะ API การลบล้างเมตริกแบบอักษร แนวทางที่ซับซ้อนกว่า (แต่มีประสิทธิภาพมากกว่า) จะใช้ทั้ง API การลบล้างเมตริกแบบอักษรและ size-adjust บทความนี้อธิบายทั้ง 2 วิธี

วิธีการทำงานของการลบล้างเมตริกแบบอักษร

บทนำ

การลบล้างเมตริกแบบอักษรเป็นวิธีลบล้างค่าความสูงของตัวอักษรขึ้น ความสูงของตัวอักษรลง และระยะห่างระหว่างบรรทัดของแบบอักษร

• ความสูงจะวัดระยะทางที่ไกลที่สุดที่สัญลักษณ์ของแบบอักษรยื่นออกมาเหนือบรรทัดฐาน
• ระยะความลาดต่ำจะวัดระยะทางที่ไกลที่สุดที่สัญลักษณ์ของแบบอักษรยื่นลงต่ำกว่าเส้นฐาน
• ระยะห่างบรรทัดหรือที่เรียกว่า "การขึ้นบรรทัดแรก" จะวัดระยะห่างระหว่างบรรทัดข้อความที่ต่อเนื่องกัน

การลบล้างเมตริกแบบอักษรสามารถใช้เพื่อลบล้างค่าความสูงของตัวอักษรขึ้น ความสูงของตัวอักษรลง และระยะห่างระหว่างบรรทัดของแบบอักษรสำรองเพื่อให้ตรงกับความสูงของตัวอักษรขึ้น ความสูงของตัวอักษรลง และระยะห่างระหว่างบรรทัดของแบบอักษรเว็บ ด้วยเหตุนี้ แบบอักษรเว็บและแบบอักษรสำรองที่ปรับแล้วจึงจะมีมิติข้อมูลแนวตั้งเหมือนกันเสมอ

การลบล้างเมตริกแบบอักษรมีการใช้ในสไตล์ชีตดังนี้

body {
    font-family: Poppins, "fallback for poppins";
}

@font-face {
    font-family: "fallback for poppins";
    src: local("Times New Roman");
    ascent-override: 105%;
    descent-override: 35%;
    line-gap-override: 10%;
}

เครื่องมือที่ระบุไว้ตอนต้นของบทความนี้สามารถสร้างค่าการลบล้างเมตริกแบบอักษรที่ถูกต้อง แต่คุณก็คำนวณค่าเหล่านี้ด้วยตนเองได้เช่นกัน

การคํานวณการลบล้างเมตริกแบบอักษร

สมการต่อไปนี้จะให้ค่าการลบล้างเมตริกแบบอักษรสําหรับแบบอักษรบนเว็บหนึ่งๆ ค่าของการลบล้างเมตริกแบบอักษรควรเขียนเป็นเปอร์เซ็นต์ (เช่น 105%) ไม่ใช่ทศนิยม

ascent-override = ascent/unitsPerEm
descent-override = descent/unitsPerEm
line-gap-override = line-gap/unitsPerEm

ต่อไปนี้เป็นตัวอย่างการลบล้างเมตริกแบบอักษรสำหรับแบบอักษร Poppins

/*
Poppins font metrics:
ascent = 1050
descent = 350
line-gap = 100
UPM: 1000
*/

ascent-override: 105%;  /* = 1050/1000 */
descent-override: 35%;  /* = 350/1000 */
line-gap-override: 10%; /* = 100/1000 */

ค่าของ ascent, descent, line-gap และ unitsPerEm ทั้งหมดมาจากข้อมูลเมตาของเว็บฟอนต์ ส่วนถัดไปของบทความนี้จะอธิบายวิธีรับค่าเหล่านี้

การอ่านตารางแบบอักษร

ข้อมูลเมตาของแบบอักษร (โดยเฉพาะตารางแบบอักษร) มีข้อมูลทั้งหมดที่ต้องใช้คำนวณการลบล้างเมตริกแบบอักษร

เครื่องมือที่คุณใช้อ่านข้อมูลเมตาของแบบอักษรได้มีดังนี้

• fontkit เป็นเครื่องมือจัดการแบบอักษรที่สร้างมาสำหรับ Node.js ข้อมูลโค้ดนี้แสดงวิธีใช้ FontKit เพื่อคํานวณการลบล้างเมตริกแบบอักษร
• Capsize เป็นคลังขนาดแบบอักษรและเลย์เอาต์ Capsize มี API สําหรับรับข้อมูลเกี่ยวกับเมตริกแบบต่างๆ ของแบบอักษร
• fontdrop.info เป็นเว็บไซต์ที่ช่วยให้คุณดูตารางแบบอักษรและข้อมูลอื่นๆ ที่เกี่ยวข้องกับแบบอักษรจากเบราว์เซอร์ได้
• Font Forge เป็นโปรแกรมแก้ไขแบบอักษรบนเดสก์ท็อปที่ได้รับความนิยม หากต้องการดู ascent, descent และ line-gap ให้เปิดกล่องโต้ตอบ Font Info เลือกเมนู OS/2 แล้วเลือกแท็บ Metrics หากต้องการดู UPM ให้เปิดกล่องโต้ตอบ Font Info แล้วเลือกเมนู General

ทำความเข้าใจตารางแบบอักษร

คุณอาจสังเกตเห็นว่าเมตริกหลายรายการใช้แนวคิดเดียวกัน เช่น "การเพิ่มขึ้น" เช่น เมตริก hheaAscent, typoAscent และ winAscent ปัญหานี้เป็นผลมาจากระบบปฏิบัติการต่างๆ ใช้วิธีการแสดงผลแบบอักษรที่แตกต่างกัน โดยปกติแล้วโปรแกรมในอุปกรณ์ OSX จะใช้เมตริกแบบอักษร hhea* ส่วนโปรแกรมในอุปกรณ์ Windows จะใช้เมตริกแบบอักษร typo* (หรือที่เรียกว่า sTypo*) หรือ win*

ระบบจะแสดงผลแบบอักษรโดยใช้เมตริก hhea, typo หรือ win ทั้งนี้ขึ้นอยู่กับแบบอักษร เบราว์เซอร์ และระบบปฏิบัติการ

ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีการทำงานของเมตริกแบบแนวตั้งในระบบปฏิบัติการต่างๆ ได้ที่บทความนี้เกี่ยวกับเมตริกแนวตั้ง

ความเข้ากันได้ของอุปกรณ์

สําหรับแบบอักษรส่วนใหญ่ (เช่น แบบอักษรประมาณ 90% ที่โฮสต์โดย Google Fonts) คุณสามารถใช้การลบล้างเมตริกแบบอักษรได้อย่างปลอดภัยโดยไม่ต้องทราบระบบปฏิบัติการของผู้ใช้ กล่าวคือ สําหรับแบบอักษรเหล่านี้ ค่าของ ascent-override, descent-override และ linegap-override จะยังคงเหมือนเดิม ไม่ว่าจะใช้เมตริก hhea, typo หรือ win ก็ตาม repo นี้ให้ข้อมูลเกี่ยวกับแบบอักษรที่ใช้และไม่ได้ใช้ฟีเจอร์นี้

หากคุณใช้แบบอักษรที่ต้องใช้การลบล้างเมตริกแบบอักษรชุดแยกต่างหากสำหรับอุปกรณ์ OSX และ Windows เราขอแนะนำให้ใช้การลบล้างเมตริกแบบอักษรและ size-adjust เฉพาะในกรณีที่คุณมีความสามารถในการปรับเปลี่ยนสไตล์ชีตตามระบบปฏิบัติการของผู้ใช้เท่านั้น

การใช้การลบล้างเมตริกแบบอักษร

เนื่องจากระบบจะคํานวณการลบล้างเมตริกแบบอักษรโดยใช้การวัดผลที่มาจากข้อมูลเมตาของแบบอักษรเว็บ (ไม่ใช่แบบอักษรสำรอง) เมตริกเหล่านี้จึงจะยังคงเหมือนเดิมไม่ว่าจะใช้แบบอักษรใดเป็นแบบอักษรสำรอง เช่น

body {
  font-family: "Poppins", "fallback for Poppins", "another fallback for Poppins";
}

@font-face {
  font-family: "fallback for Poppins";
  src: local("Arial");
  ascent-override: 105%;
  descent-override: 35%;
  line-gap-override: 10%;
}

@font-face {
  font-family: "another fallback for Poppins";
  src: local("Roboto");
  ascent-override: 105%;
  descent-override: 35%;
  line-gap-override: 10%;
}

วิธีการทำงานของการปรับขนาด

บทนำ

ตัวบ่งชี้ CSS size-adjust จะปรับขนาดความกว้างและความสูงของสัญลักษณ์แบบอักษรตามสัดส่วน เช่น size-adjust: 200% จะปรับขนาดสัญลักษณ์แบบอักษรเป็น 2 เท่าของขนาดเดิม ส่วน size-adjust: 50% จะปรับขนาดสัญลักษณ์แบบอักษรเป็นครึ่งหนึ่งของขนาดเดิม

size-adjust เพียงอย่างเดียวมีการใช้งานที่จำกัดสำหรับการปรับปรุงแบบอักษรสำรอง โดยในกรณีส่วนใหญ่ จะต้องปรับแบบอักษรสำรองให้แคบหรือกว้างขึ้นเล็กน้อย (แทนที่จะปรับขนาดตามสัดส่วน) เพื่อให้ตรงกับแบบอักษรเว็บ อย่างไรก็ตาม การรวม size-adjust กับการลบล้างเมตริกแบบอักษรช่วยให้คุณจับคู่แบบอักษร 2 แบบทั้งแนวนอนและแนวตั้งได้

วิธีใช้ size-adjust ในสไตล์ชีตมีดังนี้

@font-face {
  font-family: "fallback for poppins";
  src: local("Arial");
  size-adjust: 60.85099821%;
  ascent-override: 164.3358416%;
  descent-override: 57.51754455%;
  line-gap-override: 16.43358416%;
}

เนื่องจากวิธีการคํานวณ size-adjust (ซึ่งอธิบายไว้ในส่วนถัดไป) ค่าของ size-adjust (และการลบล้างเมตริกแบบอักษรที่เกี่ยวข้อง) จึงเปลี่ยนแปลงไปตามแบบอักษรสำรองที่ใช้

body {
  font-family: "Poppins", "fallback for Poppins", "another fallback for Poppins";
}

@font-face {
  font-family: poppins-fallback;
  src: local("Arial");
  size-adjust: 60.85099821%;
  ascent-override: 164.3358416%;
  descent-override: 57.51754455%;
  line-gap-override: 16.43358416%;
}

@font-face {
  font-family: poppins-fallback-android;
  src: local("Roboto");
  size-adjust: 55.5193474%:
  ascent-override: 180.1173909%;
  descent-override: 63.04108683%;
  line-gap-override: 18.01173909%;
}

การคำนวณการลบล้างเมตริกการปรับขนาดและแบบอักษร

สมการสำหรับการคำนวณ size-adjust และการลบล้างเมตริกแบบอักษรมีดังนี้

size-adjust = avgCharacterWidth of web font / avgCharacterWidth of fallback font
ascent-override = web font ascent / (web font UPM * size-adjust)
descent-override = web font descent / (web font UPM * size-adjust)
line-gap-override = web font line-gap / (web font UPM * size-adjust)

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

การประมาณความกว้างอักขระเฉลี่ย

โดยทั่วไปแล้ว ความกว้างของตัวอักษรเฉลี่ยจะประมาณได้เท่านั้น แต่ก็มีบางสถานการณ์ที่คำนวณได้อย่างแม่นยำ เช่น เมื่อใช้แบบอักษรแบบโมโนสเปซ หรือเมื่อทราบเนื้อหาของสตริงข้อความล่วงหน้า

ตัวอย่างวิธีการคำนวณ avgCharacterWidth แบบหยาบๆ คือการนำค่าเฉลี่ยของความกว้างของอักขระ [a-z\s] ทั้งหมด

อย่างไรก็ตาม การให้น้ำหนักอักขระทุกตัวเท่าๆ กันมีแนวโน้มที่จะให้น้ำหนักความกว้างของตัวอักษรที่ใช้บ่อยน้อยเกินไป (เช่น e) และให้ความกว้างของตัวอักษรที่ใช้ไม่บ่อยมากเกินไป (เช่น z)

แนวทางที่ซับซ้อนยิ่งขึ้นซึ่งช่วยเพิ่มความแม่นยำคือการพิจารณาความถี่ของตัวอักษรและคำนวณความกว้างเฉลี่ยถ่วงน้ำหนักตามความถี่ของตัวละคร [a-z\s] แทน บทความนี้เป็นข้อมูลอ้างอิงที่ดีเกี่ยวกับความถี่ของตัวอักษรและความยาวคำโดยเฉลี่ยของข้อความภาษาอังกฤษ

การเลือกวิธีการ

วิธีการ 2 วิธีที่กล่าวถึงในบทความนี้ต่างก็มีทั้งข้อดีและข้อเสีย

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

• ในทางกลับกัน หากต้องการความแม่นยำมากขึ้นและยินดีที่จะทํางานและทดสอบเพิ่มเติมอีกเล็กน้อย การใช้ size-adjust ก็ถือเป็นแนวทางที่ดี เมื่อใช้อย่างถูกต้อง แนวทางนี้จะช่วยขจัดการเปลี่ยนแปลงเลย์เอาต์ที่เกี่ยวข้องกับแบบอักษรได้อย่างมีประสิทธิภาพ

การเลือกแบบอักษรสำรอง

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

Arial คือแบบอักษรสำรองที่แนะนำสำหรับแบบอักษร Sans-Serif และ Times New Roman คือแบบอักษรสำรองที่แนะนำสำหรับแบบอักษร Serif อย่างไรก็ตาม แบบอักษรทั้ง 2 ประเภทนี้ไม่มีให้บริการใน Android (Roboto เป็นแบบอักษรระบบเพียงแบบเดียวใน Android)

ตัวอย่างด้านล่างใช้แบบอักษรสำรอง 3 แบบเพื่อให้ครอบคลุมอุปกรณ์ในวงกว้าง ได้แก่ แบบอักษรสำรองที่กำหนดเป้าหมายเป็นอุปกรณ์ Windows/Mac, แบบอักษรสำรองที่กำหนดเป้าหมายเป็นอุปกรณ์ Android และแบบอักษรสำรองที่ใช้ชุดแบบอักษรทั่วไป

body {
  font-family: "Poppins", poppins-fallback, poppins-fallback-android, sans-serif;
}

/*
Poppins font metrics:
- ascent = 1050
- descent = 350
- line-gap = 100
- UPM: 1000
AvgCharWidth:
- Poppins: 538.0103768
- Arial: 884.1438804
- Roboto: 969.0502537
*/

@font-face {
  font-family: poppins-fallback;
  src: local("Arial");
  size-adjust: 60.85099821%;
  ascent-override: 164.3358416%;
  descent-override: 57.51754455%;
  line-gap-override: 16.43358416%;
}

@font-face {
  font-family: poppins-fallback-android;
  src: local("Roboto");
  size-adjust: 55.5193474%:
  ascent-override: 180.1173909%;
  descent-override: 63.04108683%;
  line-gap-override: 18.01173909%;
}

คำขอความคิดเห็น

โปรดติดต่อเราหากมีความคิดเห็นเกี่ยวกับประสบการณ์ของคุณในการใช้การลบล้างเมตริกแบบอักษรและ size-adjust