Pada bulan Mei, Microsoft secara resmi menyediakan font Yahei yang dapat diunduh pada Windows XP. Font Yahei adalah font yang hampir sempurna yang memecahkan masalah karakter kecil bergaya Lagu yang tidak terbaca, terutama untuk layar kristal cair (LCD). Setelah mengaktifkan efek ClearType, Anda akan mendapatkan kenikmatan visual yang lebih sempurna. Saya sekarang terpesona oleh Yahei. Melihat kembali sistem default Dinasti Song, tepinya yang bergerigi terlalu jelas dan jelek.
Namun masalah yang muncul adalah font Yahei akan memiliki beberapa efek dislokasi pada tampilan tata letak halaman web di Internet Explorer. Permasalahan yang saya temukan sejauh ini terutama ada pada dua aspek.
1. Garis bawah terkadang menjadi coretan.
Faktanya, ini adalah ketidakselarasan visual dan bukan coretan yang sebenarnya. Dalam paragraf dengan campuran bahasa Inggris dan Mandarin, garis bawah akan rusak dan menjadi tidak beraturan.
Berikut hyperlink teks berbahasa Mandarin di beranda google.cn:
Fenomena ini hanya muncul di font berbahasa Mandarin, font bahasa Inggris tidak terpengaruh:
Akan lebih jelas lagi jika ada campuran bahasa Mandarin dan Inggris:
Terlihat bahwa garis bawah telah dipindahkan ke atas jika terdapat karakter China, dan bahasa Inggris tidak terpengaruh.
2. Perubahan tinggi garis di Internet Explorer.
Berikut screenshot hyperlink dengan gambar background di blog saya:
Gaya normal asli di bawah font Lagu sekarang ditampilkan di bawah, yang menunjukkan bahwa tinggi garis telah ditingkatkan di Internet Explorer. Namun di Firefox tidak ada perubahan.
3. Coba selesaikan masalahnya.
Pada tangkapan layar Google.cn, kami menemukan bahwa hyperlink "Login" di sebelah kanan adalah normal. Ini menunjukkan bahwa tidak semua hyperlink berbahasa Mandarin memiliki masalah ini. Saya dengan cermat membandingkan perbedaan gayanya. Saya menemukan bahwa tautan di sebelah kiri memiliki gaya tambahan daripada "Login" di sebelah kanan:
vertical
-align:top;
Pada tangkapan layar ketiga dari "Forum Meizu", saya menemukan bahwa meskipun perataan vertikal tidak muncul di teks, ada dua gambar kecil berikut:
perataan vertikal:tengah;
hapus Dua gambar ini nanti, semuanya normal kembali.
Oleh karena itu, dapat dipastikan akan terjadi permasalahan dalam penggunaan vertical-align pada hyperlink berbahasa Mandarin (tidak semua elemen memiliki atribut vertical-align). Solusi yang paling sederhana adalah dengan menghindari penggunaan vertical-align atau valign, atau menghindari penggunaan super Link yang bergaris bawah. Tentu saja, ini bukan cara yang baik untuk mengatasi masalah dengan benar.
Adapun masalah yang direproduksi di blog saya, ini hanya menunjukkan bahwa font Yahei menyebabkan tinggi garis bertambah di Internet Explorer (Firefox ditampilkan secara normal). masalah, Anda hanya perlu mengontrol ketinggian, tetapi ini adalah elemen sebaris dan ketinggian tidak dapat diatur, jadi Anda perlu bekerja sama dengan disaply:block dan kemudian memperbaiki ketinggian (namun, setelah mengatur atribut blok, pembungkusan garis otomatis mungkin terjadi. Dalam hal ini, Anda perlu menggunakan float dan atribut lainnya secara bersamaan). Saya menemukan bahwa metode ini juga dapat menyelesaikan masalah di atas, jadi memperbaiki ketinggian hyperlink akan menjadi metode yang lebih baik.
Catatan tambahan: Saya memodifikasi font default berdasarkan Windows XP, yang mungkin menyebabkan beberapa masalah. Sulit bagi saya untuk menentukan apakah kedua jenis masalah yang saya sebutkan di atas disebabkan oleh font Yahei itu sendiri atau pengaturan lain yang salah . Saya belum dapat mengetahui apakah masalah ini juga terjadi pada pengujian sistem Vista. Jika ada yang memiliki kondisi tersebut, Anda dapat membantu mengujinya.
Catatan: Masalah ini terjadi di semua versi Internet Explorer, Firefox tidak terpengaruh.