จากที่เมื่อปีก่อนได้เขียนเรื่อง "การสร้าง Font stack เพื่อภาษาไทยงาม ๆ (บน Safari)" ผมพบว่าใน macOS Monterey (12) และ iOS 15 นั้นไม่สามารถใช้วิธีการที่เคยเขียนถึงได้แล้ว เนื่องจากตัว Safari เองไม่ยอมรับการสั่งโหลดแบบอักษรตระกูล .SF เอง (อาจจะเพราะ Deprecate ตัว Postscript ไปแล้ว และแบบอักษรตัวนี้ยังแอบใช้อยู่) ทำให้ต้องกลับไปใช้วิธีเดิม นั่นคือ การสกัดเอาการโหลดแบบอักษรเฉพาะ Glyph ภาษาไทยจาก Google Fonts API และทำการสลับลำดับแบบอักษรที่ปรากฏใน CSS Rule ให้โหลดแบบอักษรที่มีแต่ Glyph ภาษาไทยขึ้นมาก่อน
การสกัดเอาการโหลดแบบอักษรเฉพาะ Glyph ภาษาไทยนั้น ผมมองว่าไม่เป็นวิธีที่ยั่งยืนเนื่องจากจำเป็นต้องดูแลข้อมูลในส่วนนี้หากทาง Google ทำการอัพเดตแบบอักษรในอนาคต แต่ก็เหมือนจะเป็นวิธีเดียวที่เหลืออยู่ ส่วนการสลับลำดับแบบอักษรภาษาไทยขึ้นก่อนนั้น เป็นวิธีเดียวกับที่ Apple ทำในเว็บไซต์ภาษาไทย เพื่อโหลดแบบอักษร SF Pro TH ขึ้นมาก่อน SF Pro ซึ่งไม่มี Glyph ภาษาไทย ในกรณีของเรานั้น Safari จะคิดว่าตัวแบบอักษรระบบมีอักษรไทยที่ให้ Fallback เป็น Thonburi (แต่ Browser อื่นไม่ได้คิดแบบนั้น) จึงต้องบิดเบือนกลไกนี้เพื่อให้ใช้แบบอักษรเป้าหมายของเราแทนตัว Fallback นั้น
ในตอนจบ จึงกลับมาใช้รูปแบบนี้
:root {
--ezy-head-th: 'IBM Plex Sans Thai';
--ezy-body-th: 'Sarabun'
}
/* thai */
@font-face {
font-family: 'IBM Plex Sans Thai';
font-style: normal;
font-weight: 300;
font-display: swap;
src:
url(/* font url */) format('woff2');
unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC;
}
/* and other weight ... */
:root {
--ezy-systemfont: system-ui,-apple-system;
--ezy-font-sans-serif-no-system: "Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans";
--ezy-emoji: "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}
h1, h2, h3, h4, h5, h6,
blockquote {
font-family: var(--ezy-head-th), var(--ezy-systemfont), var(--ezy-font-sans-serif-no-system), sans-serif, var(--ezy-emoji);
}
body {
font-family: var(--ezy-body-th), var(--ezy-systemfont), var(--ezy-font-sans-serif-no-system), sans-serif, var(--ezy-emoji);
}