Temu duga Frontend: Bagaimanakah anda menggunakan font-size-adjust untuk mengekalkan kebolehbacaan teks sandaran (fallback)?

Prompt dan konteks

Sistem reka bentuk menggunakan fon jenama, tetapi keadaan rangkaian, pelesenan, atau liputan skrip boleh menyebabkan pelayar menggunakan fon sandaran (fallback). Terangkan bagaimana font-size-adjust dapat mengurangkan lonjakan saiz huruf kecil yang ketara dan perbezaannya dengan penyesuaian saiz teks automatik mudah alih (text autosizing).

Perkara yang diuji oleh penemu duga

Pemahaman bahawa x-height dan saiz fon adalah metrik yang berbeza.
Keupayaan untuk menentukan penentukuran (calibration) sandaran, pemuatan, dan sempadan peningkatan progresif (progressive enhancement).
Keupayaan untuk menggabungkan ketekalan visual, liputan skrip, dan pemeriksaan kebolehcapaian.

Soalan untuk dijelaskan terlebih dahulu

Apakah skrip yang diliputi oleh fon utama dan fon sandaran?
Adakah matlamatnya untuk mengurangkan lonjakan semasa pemuatan, atau untuk memastikan fon sandaran kekal mudah dibaca?
Adakah penyesuaian saiz teks automatik mudah alih dibenarkan, dan apakah token saiz serta line-height yang sedia ada?

Jawapan 30 saat

font-size-adjust menentukur ketinggian relatif huruf kecil menggunakan metrik fon. Saya akan mengukur fon utama dan sandaran, kemudian menggunakan nisbah eksplisit atau from-font secara progresif. Ia tidak dapat menjadikan lebar glif, ketinggian baris (line height), atau metrik CJK serupa, jadi saya akan menguji skrip, zum, kegagalan pemuatan, dan tetapan penglihatan terhad. text-size-adjust ialah kawalan berasingan bagi penyesuaian saiz teks automatik mudah alih, bukan alat penentukuran fon sandaran.

Penerokaan mendalam langkah demi langkah

1. Asingkan saiz daripada x-height

font-size-adjust mengekalkan huruf kecil pada ketinggian yang boleh dibaca dan setanding dengan fon utama. Dua fon yang ditetapkan kepada 16px boleh mempunyai x-height yang berbeza, menyebabkan fon sandaran kelihatan lebih kecil atau lebih besar. Sifat ini melaraskan metrik relatif; ia tidak menghasilkan semula muka taip utama.

2. Pilih nisbah eksplisit atau from-font

Nilai eksplisit berfungsi apabila pasukan telah mengukur metrik utama. Dengan from-font, pelayar yang menyokongnya boleh membaca metrik daripada fon yang tersedia dan mengurangkan pemalar yang dilaraskan secara manual. Matriks pelayar dan fail fon masih memerlukan pengesahan.

3. Kekalkan penentukuran berhampiran token tipografi

css

:root {
  --body-size: 1rem;
}

body {
  font-family: "Brand Sans", "Fallback Sans", sans-serif;
  font-size: var(--body-size);
  font-size-adjust: from-font;
  line-height: 1.5;
}

Sifat ini mempengaruhi elemen dan keturunannya. Mengekalkannya berhampiran token tipografi body mengelakkan komponen lain yang tidak berkaitan daripada mereka-reka nilai pampasan sendiri. Tindanan fon (stack) yang mudah dibaca kekal sebagai sandaran apabila sifat ini tidak disokong.

4. Kendalikan susunan pemuatan

Penentukuran tidak menghapuskan setiap perubahan yang disebabkan oleh pertukaran fon. Gabungkannya dengan dasar font-display yang disengajakan, keputusan pramuat (preload), dan sandaran yang boleh diterima. Ukur kebolehbacaan awal, pengaliran semula teks (text reflow), dan keadaan fon akhir secara berasingan; jangan sembunyikan kandungan semata-mata untuk mengejar pergerakan sifar.

5. Uji skrip dan lokal

Nisbah huruf kecil Latin bukan proksi sejagat untuk teks bahasa Cina, Jepun, Arab, atau bercampur. Bina sampel yang dilokalkan dan periksa tanda baca, angka, ketebalan (weight), pembalutan teks (wrapping), dan line height. Gunakan token khusus lokal apabila perlu daripada menganggap satu nisbah sebagai kebenaran global.

6. Asingkannya daripada text-size-adjust

text-size-adjust mengawal pembesaran teks pelayar dalam viewport mudah alih. Ia tidak menentukur x-height sandaran. Kenal pasti sama ada kecacatan tersebut adalah metrik fon atau tingkah laku reka letak mudah alih sebelum memilih sifat, dan elakkan daripada menyahdayakan tingkah laku kebolehcapaian untuk membetulkan masalah yang salah.

7. Tentukan kriteria penerimaan yang boleh diperhatikan

Rekod kejayaan pemuatan fon, perubahan reka letak, pemotongan teks akibat zum, dan kebolehbacaan di bawah tetapan fon pengguna pada pelayar dan peranti sasaran sebenar. Sertakan regresi visual, pembaca skrin, papan kekunci, dan pemeriksaan kontras tinggi dalam kriteria pelepasan (release gate).

Jawapan model

Saya akan menganggap ini sebagai tadbir urus metrik tipografi. Saya akan mengambil sampel x-height fon utama dan sandaran, menggunakan nisbah eksplisit atau from-font berhampiran token body, dan mengekalkan tindanan fon yang boleh dipercayai. Ini boleh meningkatkan kebolehbacaan huruf kecil secara relatif tetapi tidak dapat menjamin lebar, line height, atau reka letak CJK bercampur yang sama rata, jadi saya akan menguji pemuatan fon yang berjaya dan gagal, skrip, zum pelayar, serta peranti mudah alih. Penyesuaian saiz automatik mudah alih adalah di bawah text-size-adjust. Penerimaan akan menggunakan bukti reka letak, pemotongan teks, kebolehbacaan, dan kebolehcapaian dan bukannya satu tangkapan skrin semata-mata.

Kesilapan biasa

Mendakwa bahawa font-size-adjust menjadikan setiap fon mempunyai saiz yang sama.
Menganggap from-font dijamin merentas setiap pelayar dan fail fon.
Menyahdayakan pembesaran mudah alih dengan text-size-adjust: none sebagai penyelesaian generik.
Hanya menguji skrin pertama dalam bahasa Inggeris dan tidak pernah menguji skrip tempatan atau kegagalan pemuatan.
Hanya melihat metrik reka letak sambil mengabaikan zum, tetapan fon pengguna, dan pembaca skrin.

Soalan susulan dan jawapan

Bagaimana jika reka bentuk turut memerlukan lebar yang sama?

Nyatakan bahawa sifat ini hanya mengendalikan metrik ketinggian relatif. Pilih sandaran yang lebih hampir, laraskan jarak, atau reka bentuk semula pembalutan teks; jangan berjanji bahawa satu nisbah dapat menyelesaikan setiap metrik.

Bagaimanakah anda merosot kualiti secara anggun (graceful degradation) apabila from-font tidak tersedia?

Kekalkan tindanan fon dan saiz lalai agar mudah dibaca, kemudian gunakan pengesanan ciri atau peningkatan progresif untuk nilai eksplisit. Anggap tingkah laku yang tidak disokong sebagai keadaan pelayar yang normal, bukan alasan untuk menyekat teks.

Bagaimanakah anda menghalang pertukaran fon daripada menggerakkan butang?

Sediakan ruang yang mencukupi, tentukur fon sandaran, dan ukur lebar sebelum dan selepas fon utama tiba. Tindakan kritikal tidak seharusnya bergantung pada teks tersembunyi atau penyesuaian saiz automatik yang tidak dapat diramalkan.

Patutkah halaman CJK menggunakan nilai yang sama?

Jangan gunakannya semula secara membuta tuli. CJK tidak dipetakan kepada konsep x-height huruf kecil yang sama, jadi sahkan fon tempatan dan sampel line-height secara bebas.

Bagaimanakah anda membuktikan bahawa kebolehcapaian tidak terjejas?

Uji zum pelayar, keutamaan fon sistem, susunan fokus selepas pengaliran semula teks, output pembaca skrin, dan kontras tinggi. Tangkapan skrin piksel tetap bukanlah bukti yang mencukupi.

Bagaimanakah anda membincangkan sokongan pelayar dalam temu duga?

Berikan matriks pelayar sasaran dan pelan pengesanan ciri, dengan tindanan fon yang mudah dibaca apabila tidak disokong. Elakkan daripada mendakwa sokongan sejagat tanpa matriks atau bukti ujian.