Bolehkah Fon Pembolehubah Menyebabkan Percanggahan dalam Pemberian Lejang Teks dengan Harta CSS -webkit-text-stroke?

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

Dalam projek menggunakan NextJs dan TailwindCSS, pengguna menghadapi isu di mana strok teks (-webkit- text-stroke) dipaparkan secara berbeza merentas penyemak imbas, dengan hasil yang tidak konsisten terutamanya dalam penyemak imbas selain Chrome.

Penerangan Masalah:

Kesan strok yang diingini tidak dicapai, mengakibatkan sama ada tiada sapuan atau penampilan yang terlalu tebal dan tidak diingini, seperti yang digambarkan dalam imej yang disediakan.

Coretan Kod:

<code class="html"><div classname="outline-title text-white pb-2 text-5xl font-bold text-center mb-12 mt-8">
  Values &amp; Process
</div></code>

<code class="css">.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;
}</code>

Punca Punca :

Siasatan mendedahkan bahawa isu ini berpunca daripada ketidakserasian fon berubah-ubah dengan sifat -webkit-text-stroke. Masalah ini kebanyakannya mempengaruhi penyemak imbas yang menyokong fon berubah-ubah, seperti Firefox, Safari dan Edge. Chrome, yang tidak menyokong sepenuhnya fon berubah-ubah, mempamerkan kesan strok yang diingini seperti yang dijangkakan.

Pembetulan Pantas/Kemas Kini 2024:

Gunakan Perintah Cat pada HTML Teks

Penyelesaian kepada isu ini melibatkan penggunaan sifat perintah cat pada elemen teks HTML. Sifat ini, yang sebelum ini tidak ditentukan untuk teks HTML, kini membenarkan kawalan ke atas susunan pemaparan strok dan isian, menghasilkan kesan strok yang diingini.

<code class="css">h1 {
  -webkit-text-stroke: 0.02em black;
  color: #fff;
  font-stretch: 0%;
  font-weight: 200;
}

/* render stroke behind text-fill color */

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

Dengan menetapkan urutan cat kepada "isi strok," lejang diberikan di belakang isian teks, mencapai kesan garis besar yang diingini. Penyelesaian ini serasi merentas penyemak imbas, berfungsi dengan berkesan dalam semua penyemak imbas utama, termasuk Firefox, Safari, Edge dan Chrome.

Atas ialah kandungan terperinci Bolehkah Fon Pembolehubah Menyebabkan Percanggahan dalam Pemberian Lejang Teks dengan Harta CSS -webkit-text-stroke?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!