Rumah >hujung hadapan web >tutorial css >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.
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.
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.
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.
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
.
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
.
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!