CSS dari nilai-nilai yang dijelaskan dalam 4 demo

Terokai nilai from-font nilai dari harta CSS text-decoration-thickness . Melalui empat kes demonstrasi, artikel ini menerangkan prinsip kerja nilai harta dan keserasian pelayar ini dengan cara yang mudah difahami.

Penjelasan terperinci nilai from-font

MDN mentakrifkan nilai from-font seperti berikut:

Nilai ini digunakan jika fail fon mengandungi maklumat ketebalan pilihan. Jika fail fon tidak mengandungi maklumat ini, tingkah laku seperti menetapkan nilai auto dan penyemak imbas akan memilih ketebalan yang sesuai.

Oleh itu, nilai from-font hanya akan berkuatkuasa apabila fail font mentakrifkan ketebalan garis. Jika tidak, penyemak imbas akan menggunakan nilai auto dan penyemak imbas akan memilih ketebalan dengan sendirinya. Artikel ini membandingkannya dengan nilai -nilai lain melalui beberapa kes demonstrasi.

Demo 1: text-decoration-thickness: auto

Kes demonstrasi pertama menguji kesan nilai auto pada garis bawah, overscores, dan strikethroughs di bawah keluarga font lalai.

Keputusan menunjukkan bahawa beberapa kombinasi (mis., Strikethrough dihiasi dengan garis bergelombang) kurang dibaca, tetapi ini mungkin output yang dikehendaki dalam beberapa senario.

Demo 2: text-decoration-thickness: 0px

Kes demonstrasi kedua menguji prestasi garis nipis.

Garis nipis berfungsi dengan baik dalam perenggan atau teks yang lebih kecil, tetapi dalam teks yang lebih besar, serangan nipis sukar dikenalpasti.

Di samping itu, eksperimen menunjukkan bahawa ketebalan garis tidak boleh kurang daripada 1px. Walaupun ditetapkan ke 0px , penyemak imbas masih menjadi garis 1px.

Demo 3: text-decoration-thickness: from-font dan ketebalan font

Ujian Demonstrasi Ketiga sama ada text-decoration-thickness: from-font dengan ketebalan font. Bahagian kiri ditetapkan dari from-font dan sebelah kanan ditetapkan ke auto .

Hasilnya menunjukkan bahawa sekurang-kurangnya apabila menggunakan keluarga Font Roboto, nilai from-font nampaknya tidak berubah dengan ketebalan fon teks. Perubahan dalam saiz teks atau ketebalan tidak akan menjejaskan ketebalan garis.

Perlu diingat bahawa penyemak imbas Firefox menjadikan ketebalan garis kedua-dua nilai ini sama, yang menunjukkan bahawa pelayar Firefox sebenarnya boleh menggunakan nilai from-font di bawah nilai auto .

Demo 4: text-decoration-thickness: from-font dan keluarga font

Kes demonstrasi terakhir menguji bagaimana nilai from-font dilakukan di bawah keluarga fon yang berbeza. Oleh kerana minimum rendering adalah 1px, kesan pada perenggan atau saiz fon yang lebih kecil tidak jelas. Hanya dalam saiz fon yang lebih besar (contohnya, lalai<p> Di bawah elemen), perbezaannya lebih halus dan memerlukan pemerhatian yang teliti untuk ditemui. Sekali lagi, garis padam masih terlalu nipis dalam teks yang lebih besar. Pereka fon dan pemaju mungkin perlu mempertimbangkan ini apabila mereka bentuk dan menentukan fon.</p> <h3> Sokongan penyemak imbas</h3> <p> Pelayar yang paling moden menyokong atribut <code>text-decoration-thickness .

Sekiranya nilai from-font digunakan?

Walaupun nilai from-font kelihatan seperti idea yang baik, saya tidak fikir ia harus digunakan lagi. Penyemak imbas yang berbeza mempunyai banyak ketidakkonsistenan dalam memberikan nilai text-decoration-thickness lalai, jadi prestasi semasa nilai from-font tidak sesuai. Mungkin nilai from-font harus ditakrifkan menggunakan peratusan atau unit relatif lain supaya ia berubah dengan saiz fon. Atau pereka fon berfikir ia tidak sepatutnya berfungsi seperti itu. Dalam apa jua keadaan, nampaknya lebih banyak perbincangan diperlukan untuk menentukan tingkah laku lalai nilai harta dan bagaimana ia menjadikannya.

Saya menggunakan nilai from-font dalam pautan artikel garis bawah laman web peribadi saya dan saya fikir ia berfungsi dengan baik. Garis ini halus, tetapi masih menyampaikan mesej interaktif.

Nantikan atribut text-decoration-thickness masa depan dengan lebih banyak pilihan.

Atas ialah kandungan terperinci CSS dari nilai-nilai yang dijelaskan dalam 4 demo. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!