Menyelesaikan masalah ruang yang sama lebar dalam pelayar CSS_Pertukaran pengalaman

Tetapi ia tidak boleh dipercayai Sebagai contoh, jika jarak ruang sangat besar, maka kita mesti menambah berbilang ruang letak, dan saiz halaman akan menjadi sangat besar.

Pada masa yang sama, ambil perhatian bahawa lebar dalam Safari ialah lebar ruang bagi aksara yang ditetapkan (fon lalai Safari ialah Times), yang bermaksud bahawa satu aksara Cina memerlukan dua ruang letak.

Situasi khusus ditunjukkan dalam gambar di bawah:

Sebenarnya, ini bukan masalah Safari, tetapi masalah fon. Penyelesaiannya adalah dengan menggunakan atribut berikut

font-family: '宋体'; Tetapkan fon lalai Safari kepada fon Cina dan Inggeris sama lebar seperti "宋体" untuk menyelesaikan masalah. Untuk tetapan fon Safari versi Windows, anda perlu terus menggunakan nama seperti "Songti" Cina dan bukannya "Simsun" (saudara-saudara yang tahu sebabnya, sila beritahu saya).

Tetapi setakat ini, matlamat asas kami belum dapat diselesaikan, iaitu sama ada kami boleh mengelak daripada menggunakan ruang letak seperti dan menggunakan ruang "asli". Pertimbangkan sifat CSS yang sepadan untuk ruang putih, ketahui lebih lanjut tentang penggunaan ruang putih dan langkah seterusnya akan lebih mudah untuk ditangani.

Ringkasnya, terdapat dua syarat untuk menggunakan ruang putih untuk mencapai ruang lebar yang sama. Atribut yang sepadan perlu ditetapkan

ruang putih: pra;

Kemudian tetapkan aksara yang sama lebar (termasuk ruang yang sama lebar). Kesimpulannya, itu sahaja

keluarga fon: '宋体', Simsun;
ruang putih: pra;

Memandangkan nama CSS Cina digunakan, pengekodan aksara gaya perlu dipertimbangkan dalam penggunaan sebenar. Pada masa yang sama, sesuatu yang perlu dipertimbangkan adalah sama ada mesin Apple mempunyai "Songli" (atau fon lebar tetap lain yang mempunyai mesin Apple, sila bantu mengujinya).

--Berpisah--

Terima kasih kepada Xiaoma kerana memberikan idea lain, iaitu menggunakan unit em. Ringkasnya, 1em boleh dianggap sebagai lebar satu aksara, sama seperti .5em ialah separuh aksara. Kemudian, situasi di atas boleh ditulis seperti ini.

Beli宝贝：

Taobao Saya:

社Zon:

CSS yang sepadan untuk

hendaklah

.separuh perkataan {lebar: .5em;}
.dua perkataan{lebar:2em;}

Lulus selepas ujian.

--Berpisah--

Berkenaan dua kaedah berbeza di atas, saya secara peribadi berpendapat ia perlu dipertimbangkan mengikut situasi sebenar. Sebagai contoh, kaedah pertama, walaupun ia bergantung pada fon lebar tetap tertentu, tidak menambah struktur tambahan lain, yang akan lebih mudah untuk penyelenggaraan masa hadapan; kaedah kedua lebih mengambil kira keadaan aplikasi sebenar (dan tidak memerlukan bergantung pada fon monospace tertentu), tetapi juga menambah struktur tambahan.

Jadi, dengan mengambil kira kebolehselenggaraan masa hadapan dan menganalisis dari perspektif "semantik", pendekatan pertama disyorkan. Dalam situasi permohonan sebenar, apabila permohonan itu perlu lebih rumit, individu akan memilih yang kedua.