Cara Menyelesaikan Percanggahan Penyemak Imbas dengan Harta CSS -webkit-text-stroke Apabila Menggunakan Fon Pembolehubah

Text Stroke (-webkit-text-stroke) Masalah CSS

Mengusahakan projek peribadi dengan NextJs dan TailwindCSS, pembangun menghadapi masalah dengan strok teks menggunakan sifat CSS -webkit-text-stroke.

Setelah menggunakan navigator peribadi untuk menyemak kemajuan, mereka memerhatikan bahawa teks strok tidak berfungsi seperti yang dimaksudkan dalam semua penyemak imbas kecuali Chrome. Pukulan yang diingini kelihatan, tetapi ia kelihatan berbeza pada pelbagai penyemak imbas.

Kod yang digunakan adalah seperti berikut:

.outline-title {
  color: rgba(0, 0, 0, 0);
  -webkit-text-stroke: 2px black;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

Selepas menyiasat isu itu, didapati bahawa:

-webkit-text-stroke Tidak Berfungsi Dengan Baik dengan Fon Boleh Ubah

Fon boleh ubah, yang membenarkan penyesuaian sifat fon seperti berat dan regangan, boleh mengganggu sifat -webkit-text-stroke.

Pembaikan Pantas/Kemas Kini 2024: Gunakan perintah cat pada Teks HTML

Seperti yang dicadangkan oleh HyoukJoon Lee, menggunakan sifat perintah cat pada elemen teks HTML menyelesaikan isu dalam semua enjin pemaparan utama .

.outline {
  -webkit-text-stroke: 0.04em black;
  paint-order: stroke fill;
}

Ini menjadikan strok teks di belakang warna isian dengan berkesan.

Atas ialah kandungan terperinci Cara Menyelesaikan Percanggahan Penyemak Imbas dengan Harta CSS -webkit-text-stroke Apabila Menggunakan Fon Pembolehubah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!