Di era ratusan tampilan ini, desainer web sering kali perlu mempertimbangkan pengalaman menjelajah klien yang berbeda.
Ukuran teks adalah bagian penting dari pengalaman pengguna. Resolusi yang berbeda, ukuran monitor yang berbeda, DPI yang berbeda, dan bahkan pengaturan browser yang berbeda akan berdampak pada ukuran akhir teks yang ditampilkan. Meskipun banyak browser kini dapat dengan mudah memperbesar halaman, selalu merepotkan bagi pengguna untuk memperbesar ulang setiap kali mereka berkunjung, belum lagi banyak pengguna yang tidak mengetahui cara memperbesar halaman. Yang terbaik adalah memberi pengguna ukuran font default yang lebih diperhatikan berdasarkan resolusinya.
12px? 14px? 15px? 16px?
Akar masalahnya adalah semua satuan ukuran font (px, pt, em) di layar adalah satuan relatif, dan satuan itu sendiri tidak dapat menentukan ukuran sebenarnya dari teks. Terlebih lagi, persepsi mendasar masyarakat terhadap ukuran teks bergantung pada sudut pandang mata, yang tidak hanya bergantung pada ukuran fisik teks, tetapi juga bergantung pada jaraknya dari mata manusia.
ukuran fisik
Pertama, asumsikan ukuran teks fisik yang ingin kita capai, misalnya, atur ke 16 piksel pada monitor 17 inci 1280 * 1024. Berdasarkan perhitungan, tingginya kira-kira 4,32 mm. ukurannya, lalu berapa ukuran font yang harus ditampilkan pada resolusi berbeda?
Langkah 1: Hitung resolusi utama pengguna dan ukuran layar yang sesuai.
Untuk mengkonversi antara ukuran fisik dan resolusi, pertama-tama hitung resolusi dan ukuran layar yang sesuai. Distribusi resolusi pengguna dapat diperoleh dari log statistik situs web. Karena setiap pengaturan resolusi mungkin berhubungan dengan beberapa layar dengan ukuran berbeda, dan ukuran layar tidak dapat diperoleh melalui halaman web, kita harus melakukan analisis statistik terhadap pasar monitor saat ini: untuk resolusi tertentu, hitung kemungkinan rentang ukuran layar, dari yang terkecil hingga yang terbesar, ukuran yang relatif mainstream (atau gunakan kisaran menengah sebagai ukuran mainstream). Seperti yang ditunjukkan pada gambar di bawah—
Pasar monitor komputer (jenis produknya banyak, dan tidak dapat dihindari ada yang ketinggalan, data hanya untuk referensi)
Langkah 2: Hitung lebar fisik ukuran layar mainstream untuk setiap resolusi
Rasio aspek monitor saat ini tidak hanya mencakup layar standar 4:3, layar lebar 16:10, tetapi juga rasio yang lebih tidak teratur. Untuk membandingkan monitor dengan rasio aspek berbeda, resolusi horizontal digunakan untuk statistik. Gunakan ukuran utama dan rasio aspek (dengan asumsi panjang dan lebar piksel sama) untuk menghitung lebar layar (inci), lalu ubah menjadi metrik (milimeter). tren ukuran layar. Dikombinasikan dengan distribusi pengguna setiap resolusi, hasilnya seperti yang ditunjukkan pada gambar di bawah ini (setiap titik pada gambar sesuai dengan resolusi, sumbu horizontal adalah jumlah piksel dalam arah horizontal layar, sumbu vertikal adalah jumlah piksel dalam arah horizontal layar, sumbu vertikal adalah jumlah piksel dalam arah horizontal layar, sumbu vertikal adalah jumlah piksel dalam arah horizontal layar, sumbu vertikal adalah lebar fisik layar, dan ukuran gelembung menunjukkan penggunaan resolusi ini Jumlah pengguna. Gelembung biru menunjukkan layar standar, dan ungu menunjukkan layar lebar): tiga gelembung terbesar adalah 1024*768, 1280*1024, dan 1280*800.
Langkah 3: Hitung ukuran font pada monitor yang berbeda
Bagilah lebar fisik layar dengan lebar piksel untuk mendapatkan lebar setiap piksel. Kemudian bagi angka ini dengan ukuran fisik teks yang ditentukan untuk mendapatkan ukuran font yang diperlukan pada resolusi berbeda. Misalnya, untuk menampilkan teks persegi 4,32 mm, ukuran font berikut diperlukan pada setiap resolusi (dihitung secara terpisah untuk notebook dan desktop):
Ukuran font diperlukan pada resolusi berbeda
Terlihat bahwa ukuran notebook dan desktop sangat berbeda. Untuk kenyamanan, ukuran mainstream atau ukuran rata-rata setiap resolusi digunakan untuk menghitung ukuran font yang diperlukan untuk ukuran font yang ditentukan pada setiap resolusi. (Gambar berikut menghilangkan resolusi yang pada dasarnya hanya digunakan pada notebook), dengan mengambil contoh 4,32 mm, 3,77 mm, dan 3,25 mm (font berukuran 16, 14, dan 12 pada resolusi 17 inci 1280*1024):
Untuk mempertahankan ukuran fisik tetap, hubungan antara ukuran font yang diperlukan dan resolusi di bawah setiap tampilan utama
Karena beberapa font berbahasa Mandarin tidak ditampilkan dengan baik dalam angka bukan genap ketika cleartype tidak diaktifkan, umumnya disarankan untuk menggunakan angka genap seperti 12, 14, 16, 18, dan 22 piksel. Artinya, pilih bilangan genap terdekat untuk resolusi tertentu. Misalnya: 14px digunakan untuk resolusi horizontal layar di bawah 1100, 16px digunakan untuk 1100 hingga 1500, 18px digunakan untuk layar di atas 1500, dan seterusnya.
jarak ke mata manusia
Walaupun ukuran font pada notebook jauh lebih kecil dibandingkan dengan komputer desktop, namun sebenarnya tidak terlalu merepotkan kita, hal ini dikarenakan jarak antara mata manusia dan layar pada umumnya lebih dekat saat menggunakan notebook dibandingkan saat menggunakan komputer desktop. Ketika netbook menjadi semakin kecil (contoh ekstremnya adalah ponsel), orang mungkin akan mendekatkannya saat menggunakannya, sehingga sudut pandangnya lebih besar. Sebaliknya, ketika layar menjadi semakin besar (24 inci atau bahkan lebih besar), karena pertimbangan seperti sudut pandang keseluruhan, orang mungkin juga menjauh dari layar, sehingga mengurangi sudut pandang.
Secara kuantitatif: karena ukuran teks h (4~5mm) relatif sangat kecil dibandingkan jarak d (30~60cm) antara mata manusia dan teks, maka dapat dianggap bahwa sudut pandang θ sebanding dengan h dan berbanding terbalik sebanding dengan d (θ≈tgθ=h/ d). Dengan kata lain, teks dengan ukuran yang sama hanya akan muncul setengah ukurannya jika jaraknya dua kaki darinya.
Dengan kata lain, monitor hanya dapat menyampaikan perkiraan ukuran, dan setiap pengguna akan tetap menyesuaikan efek sebenarnya yang mereka lihat dengan secara tidak sadar menyesuaikan jarak ke layar selama pengoperasian tertentu. Menghadapi semakin banyaknya pengguna laptop (lihat artikel sebelumnya: Pangsa pasar laptop), front-end designer hanya dapat memberikan efek halaman berdasarkan rata-rata ukuran laptop dan desktop, dan itu tergantung pada pengguna untuk menyesuaikan diri.
Gunakan JS untuk secara otomatis menyesuaikan ukuran font pada resolusi yang berbeda
Misalnya, id div tempat badan halaman web berada adalah content——
Catatan: Untuk memastikan bahwa teks dapat diskalakan di setiap browser, satuan ukuran font menggunakan em, bukan px. Secara umum, default browser adalah 1em=16px, dan 0.875em1em1.125em adalah 1416 18 piksel.
Harap perhatikan saat menggunakan penskalaan ukuran font: Yang terbaik adalah menggunakan persentase daripada ukuran font tetap untuk unit ukuran font seperti judul dalam div sehingga dapat diskalakan secara sinkron dengan teks.
Lampiran: Data utama yang dikutip dalam grafik di artikel ini
Pertama kali diterbitkan di situs ini: http://www.mhzx1.com