ประโยชน์ที่ได้รับจากฟอนต์คุณภาพสูง

• ความสามารถที่ซ่อนอยู่ของฟอนต์: แกนแบบแปรผัน, glyph ทางเลือก, stylistic alternates, swash, ตัวเลข, อักษรตัวพิมพ์ใหญ่ขนาดเล็ก (Small Caps), contextual alternates

แกนแบบแปรผัน

• ฟอนต์ OpenType สามารถมีแกนได้ตั้งแต่หนึ่งแกนขึ้นไป และสามารถเปลี่ยนค่าของแกนเพื่อปรับรูปลักษณ์ของฟอนต์ได้
• แกนที่พบบ่อยที่สุดคือ wght ซึ่งใช้ปรับความหนาของฟอนต์
• แกนที่พบบ่อยอื่น ๆ ได้แก่ wdth (ความกว้าง), slnt (ความเอียง), ital (italic), opsz (ขนาดเชิงทัศนศาสตร์)
• สามารถใช้พร็อพเพอร์ตี CSS เพื่อควบคุมแกนเหล่านี้ได้
• พร็อพเพอร์ตี font-variation-settings อาจก่อให้เกิดปัญหาเรื่องการสืบทอดค่า จึงควรใช้พร็อพเพอร์ตี CSS แบบเฉพาะเจาะจงเมื่อทำได้

glyph ทางเลือก

• ฟอนต์อาจมี glyph ทางเลือกสำหรับอักขระบางตัว
• glyph ทางเลือกอาจรวมถึงรูปแบบต่าง ๆ เช่น ตัวเลข, swash, ligature เป็นต้น

stylistic alternates

• stylistic alternates เป็นความสามารถสำหรับเปิดใช้รูปแบบทางเลือกของอักขระบางตัว
• salt ใช้เปิด stylistic alternates สำหรับอักขระทั้งหมด
• ชุดสไตล์อย่าง ss01, ss02 เป็นต้น ใช้แทนที่ชุดอักขระเฉพาะ
• character variants อย่าง cv01, cv02 เป็นต้น ใช้แทนที่อักขระเดี่ยว
• สามารถเปิดใช้ glyph ทางเลือกได้ด้วยพร็อพเพอร์ตี CSS font-feature-settings และ font-variant-alternates

swash

• ฟอนต์บางชนิดมี swash ที่สามารถใช้เพิ่มเอกลักษณ์เล็กน้อยให้กับหัวเรื่องได้
• swash เป็นองค์ประกอบตกแต่งที่ช่วยเพิ่มบุคลิกให้กับหัวเรื่อง
• สามารถเปิดใช้ swash ได้ด้วย font-feature-settings และ font-variant-alternates

ตัวเลข

• ฟอนต์อาจมีชุด glyph ของตัวเลขหลายแบบ
• ตัวเลขแบ่งได้เป็น lining หรือ old-style และ tabular หรือ proportional
• ตัวเลขแบบ tabular มีความกว้างเท่ากัน ส่วนแบบ proportional มีความกว้างแตกต่างกัน
• ตัวเลขแบบ lining มีความสูงเท่ากับตัวพิมพ์ใหญ่ ส่วนแบบ old-style มีความสูงใกล้เคียงตัวพิมพ์เล็ก
• สามารถกำหนดสไตล์ตัวเลขที่ต้องการได้ด้วยพร็อพเพอร์ตี font-variant-numeric

อักษรตัวพิมพ์ใหญ่ขนาดเล็ก

• อักษรตัวพิมพ์ใหญ่ขนาดเล็กเป็นรูปแบบตัวพิมพ์ใหญ่ที่ใช้แทนตัวพิมพ์เล็ก
• สามารถเปิดใช้อักษรตัวพิมพ์ใหญ่ขนาดเล็กได้ด้วยพร็อพเพอร์ตี font-variant-caps
• หากฟอนต์ไม่มีอักษรตัวพิมพ์ใหญ่ขนาดเล็ก เบราว์เซอร์อาจสร้างขึ้นแบบสังเคราะห์ได้

contextual alternates

• contextual alternates คือความสามารถในการแทนที่ glyph โดยอัตโนมัติตามอักขระรอบข้าง
• ตัวอย่างเช่น แทนที่ -> ด้วยลูกศร หรือปรับตำแหน่งของ @ เมื่อต้องอยู่ระหว่างตัวพิมพ์ใหญ่
• contextual alternates ถูกเปิดใช้งานเป็นค่าเริ่มต้น และสามารถปิดได้ด้วยพร็อพเพอร์ตี font-variant-ligatures

สรุปแบบ GN⁺

• ฟอนต์คุณภาพสูงมีความสามารถหลากหลาย และการนำมาใช้ให้เหมาะสมสามารถยกระดับคุณภาพของงานไทโปกราฟีได้อย่างมาก
• ความสามารถด้านแกนแบบแปรผันและ glyph ทางเลือกของฟอนต์ OpenType มีประโยชน์เป็นพิเศษ
• ความสามารถอย่าง contextual alternates ช่วยเพิ่มความสะดวกทั้งสำหรับนักพัฒนาและผู้ใช้

[halfenif]

สงสัยว่าทำไมการรองรับฟีเจอร์ของฟอนต์ให้ถูกต้องถึงยากขนาดนี้

ก็เป็นปัญหาที่อยู่คู่กับประวัติศาสตร์ทั้งหมดของมนุษยชาตินี่นะ.. จะให้ทำอะไรได้มากแค่ไหนกันเชียว!

[seunggi]

ข้อดีที่ได้จากแบบอักษรคุณภาพสูง

การเรนเดอร์ฟอนต์เป็นเรื่องยาก

https://faultlore.com/blah/text-hates-you/

[wedding]

ผมยังไงก็ปรับตัวเข้ากับ ligature ไม่ได้เลยครับ..

[GN⁺]

ความเห็นจาก Hacker News

• มีประโยชน์เมื่อจัดแนวตัวเลขที่พาดผ่านหลายบรรทัด
• มีประโยชน์กับสิ่งอย่างนาฬิกาหรือตัวนับถอยหลังด้วย
• มันน่าหงุดหงิดมากเมื่อเวลาบนหน้าจอกระโดดไปมา
• ถ้าอยากสำรวจไฟล์ฟอนต์ แนะนำให้ใช้ Wakamai Fondue
• ตัวเลขแบบตารางเป็นฟีเจอร์ที่มีประโยชน์มาก
• Google Fonts ตัดฟีเจอร์ OpenType ขั้นสูงออกไปเกือบหมดเพื่อลดขนาดไฟล์
  • ตัวอย่าง: ฟอนต์ Inter เวอร์ชันของ Google มี 11 ฟีเจอร์ แต่เวอร์ชันเต็มมี 44 ฟีเจอร์
• ฟอนต์บนหน้านี้สวยมาก
• การใช้ small caps ดูดีมาก อยากให้มีเว็บไซต์ใช้มากกว่านี้
• ตรวจสอบแล้วว่า Berkeley Mono v2 ออกหรือยัง ซึ่งก็ยังไม่ออก
• การทำงานของแกน wght (น้ำหนัก) ดูแปลก ๆ ถ้าเลื่อนต่ำกว่า 400 ตัวอักษรจะบางลงและแคบลง แต่ถ้าเลื่อนสูงกว่า 400 ตัวอักษรจะหนาขึ้นอย่างเดียว
• ถ้าต้องการใช้ฟอนต์ต่างกันใน VSCode เพื่อรองรับคอมเมนต์, jsdocs และการเน้นไวยากรณ์อื่น ๆ ต้องใช้ส่วนขยาย vscode-custom-css
  • ตัวอย่าง:

    .mtki {
      font-family: 'IosevkaNFM-ExtraLightItalic', monospace !important;
      font-style: italic !important;
      color: #757575 !important;
    }
    .comment {
      font-family: 'IosevkaNFM-ExtraLightItalic', monospace !important;
      font-style: italic !important;
      color: #757575 !important;
    }
    .comment:not(.punctuation) {
      font-family: 'IosevkaNFM-ExtraLightItalic', monospace !important;
      font-style: italic !important;
      color: #757575 !important;
    }
    

  • ฟีเจอร์จัดการฟอนต์ของ VSCode มีบั๊กเยอะ เลยต้องลองผิดลองถูกพอสมควร
• สงสัยว่าทำไมการรองรับฟีเจอร์ฟอนต์ให้ถูกต้องถึงได้ยากขนาดนี้
• ถ้าสนใจ typography แนะนำ Butterick's Practical Typography
  • เต็มไปด้วยคำแนะนำเชิงปฏิบัติสำหรับทำเอกสารทั้งแบบพิมพ์และดิจิทัลให้สวยงาม
  • ไลเซนส์ฟอนต์ของเขาใจกว้างมาก ไม่มีข้อจำกัดเรื่องจำนวน page views
  • ฟอนต์ของเขาไม่ใช่โอเพนซอร์ส แต่สวยมาก
  • เคยซื้อฟอนต์ Valkyrie และ Concourse มาแล้ว โดย Concourse ยืดหยุ่นมากในเรื่อง contextual alternates