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