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

เคธี่ เฮมปีเนียส
Katie Hempenius
Twitter

สรุป

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

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

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

ภาพหน้าจอของกล่องโต้ตอบข้อมูลแบบอักษรใน FontForge กล่องโต้ตอบจะแสดงเมตริกแบบอักษร เช่น "Typo Ascent", "Typo Descent" และ "Typo Line Gap"
การใช้ FontForge เพื่อดูข้อมูลเมตาของแบบอักษร

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

  • 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 ทั้งนี้ขึ้นอยู่กับแบบอักษร เบราว์เซอร์ และระบบปฏิบัติการ

Mac Windows
Chromium ใช้เมตริกจากตาราง "hhea" ใช้เมตริกจากตาราง "ที่สะกดผิด" หากมีการตั้งค่า "USE_TYPO_METRICS" ไม่เช่นนั้นจะใช้เมตริกจากตาราง "ชนะ"
Firefox ใช้เมตริกจากตารางที่ "สะกดผิด" หากตั้งค่า "USE_TYPO_METRICS" ไว้ มิเช่นนั้น จะใช้เมตริกจากตาราง "hhea" ใช้เมตริกจากตาราง "ที่สะกดผิด" หากมีการตั้งค่า "USE_TYPO_METRICS" ไม่เช่นนั้นจะใช้เมตริกจากตาราง "ชนะ"
Safari ใช้เมตริกจากตาราง "hhea" ใช้เมตริกจากตาราง "ที่สะกดผิด" หากมีการตั้งค่า "USE_TYPO_METRICS" ไม่เช่นนั้นจะใช้เมตริกจากตาราง "ชนะ"

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

ความเข้ากันได้ในหลายอุปกรณ์

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

หากคุณใช้แบบอักษรที่ต้องใช้การลบล้างเมตริกแบบอักษรชุดแยกกันสําหรับอุปกรณ์ 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: 50%" และ "size-adjust: 200%"

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] ตัว

กราฟเปรียบเทียบความกว้างของรูป Roboto [a-zs] แต่ละรูป
ความกว้างของรูป Roboto

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

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

กราฟแสดงความถี่ของตัวอักษรสำหรับภาษาอังกฤษ
ความถี่ของจดหมายเป็นภาษาอังกฤษ

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

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

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

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

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

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

Arial เป็นแบบอักษรสำรองที่แนะนำสำหรับแบบอักษรในกลุ่ม Sans-Serif และ Times New Roman เป็นแบบอักษรสำรองที่แนะนำสำหรับแบบอักษร Serif อย่างไรก็ตาม แบบอักษรเหล่านี้ไม่มีใน 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