
Saya telah membuat penggantian font yang bagus, seperti ini:
@font-face { font-family: fallback; src: local('Helvetica Neue'); ascent-override: 85%; descent-override: 19.5%; line-gap-override: 0%; size-adjust: 106.74%; }
Ini berfungsi dengan baik tetapi belum didukung oleh Safari ascent-override
, descent-override
,juga bukan line-gap-override
ada @font-face
bagian. itu mendukung size-adjust
meskipun.
Karena kode saya memerlukan keempatnya, hasilnya adalah size-adjust
-Itu terlihat buruk. Lebih buruk daripada tidak ada liputan. Menurut saya, sederhananya, saya akan menargetkan Safari dan tidak memberikannya salah satu dari 4.
Saya ingin menggunakan @supports
Jaga semuanya tetap bagus dan kompak di CSS. Tanpa JavaScript, tanpa CSS eksternal, semuanya untuk penggantian font sehingga harus dimuat sedini mungkin di halaman, dan @font-face
.
Sayangnya, ternyata keduanya
@supports (ascent-override: normal) {/* css here */}
Dan
@supports (size-adjust: 100%) {/* css here */}
Akhirnya “css di sini” tidak digunakan.
Bahkan, mengejutkan font-display: swap
tidak dinyatakan sebagai @support
-ed.
Menggunakan API JavaScript, saya mendapatkan ini di Chrome, Safari dan Firefox:
console.log(CSS.supports('font-stretch: normal')); // true console.log(CSS.supports('font-style: normal')); // true console.log(CSS.supports('font-display: swap')); // false console.log(CSS.supports('size-adjust: 100%')); // false console.log(CSS.supports('ascent-override: normal')); // false
Ah? apakah saya menggunakan @supports
Salah? Atau apakah browser lupa memperbarui bagian kode ini setelah menambahkan fitur tersebut? Namun seberapa besar kemungkinan ketiga orang tersebut melakukan kesalahan yang sama?
itu tidak seperti apa pun @font-face
Tidak diumumkan @support
-ed, karena font-style
Dan font-stretch
Ya.
Ungkapkan kebingunganku
Ryan Townsend menunjukkan apa font-style
Dan font-stretch
bekerja karena mereka merangkap sebagai ciri Bukan hanya sebagai font deskriptor. Jadi ternyata @supports tidak mendukung deskriptor font. Brengsek!
Noam Rosenthal menunjukkan masalah github ini dibuka pada tahun 2018 untuk menambahkan dukungan untuk deskriptor.
Sekarang saya telah menemukan dua solusi (tidak sempurna). Cara untuk memeriksa properti menggunakan JavaScript, mis.
'ascentOverride' in new FontFace(1,1); // true in Chrome, FF, false in Saf
Tidak ideal karena ini JavaScript.
Cara lainnya adalah dengan menggunakan atribut berbeda dalam CSS untuk non-Safari sebagai “proxy”. Dengan menggunakan fitur browser perbandingan CanIUse.com yang luar biasa, saya menemukan kandidat yang bagus:
@supports (overflow-anchor: auto) { @font-face { /* works in Chrome, Edge, FF, but not in Safari*/ } }
Tidak ideal untuk menguji satu hal (overflow-anchor
) dan gunakan yang lain (ascent-override
) tapi setidaknya itu tidak melibatkan JavaScript