Bagaimana Menggayakan Separuh Watak dengan CSS Tulen?

Cara Menggunakan CSS pada Separuh Watak

Latar Belakang:

Anda sedang mencari penyelesaian untuk menggayakannya separuh daripada aksara, menjadikannya telus dalam keadaan ini. Percubaan sebelumnya menggunakan kaedah seperti menggayakan sebahagian daripada aksara dengan CSS atau JavaScript tidak berjaya. Penyelesaian berasaskan imej adalah tidak diingini kerana sifat dinamik teks.

Penyelesaian: Separuh Gaya

Memperkenalkan Separuh Gaya:

Separuh Gaya ialah penyelesaian yang menawarkan penggayaan CSS tulen untuk satu aksara atau automasi berasaskan JavaScript merentas berbilang aksara. Ia mengekalkan kebolehcapaian untuk pembaca skrin.

Bahagian 1: Penyelesaian Asas (Watak Tunggal)

Hanya gunakan kelas ".halfStyle" pada watak yang ingin anda gayakan, bersama-sama dengan atribut "kandungan data" yang mengandungi nilai aksara.

Contoh:

<code class="html"><span class="halfStyle" data-content="X">X</span></code>

Bahagian 2: Penyelesaian Automatik

Untuk berbilang aksara atau teks dinamik, gunakan kelas ".textToHalfStyle" pada elemen induk dan gunakan JavaScript untuk menjana elemen gaya.

Coretan Kod:

<code class="javascript">// jQuery for automated mode
$('.textToHalfStyle').each(function(idx, el) {
  var text = $(el).text(),
      chars = text.split(''),
      output = '';

  for (var i = 0; i < chars.length; i++) {
    output += '<span aria-hidden="true" class="halfStyle" data-content="' + chars[i] + '">' + chars[i] + '</span>';
  }

  $(el).append(output);
});</code>

CSS:

<code class="css">.halfStyle {
  font-size: 80px;
  color: black;
  white-space: pre;
}

.halfStyle:before {
  display: block;
  width: 50%;
  content: attr(data-content);
  color: #f00;
}</code>

Demo Langsung: https://jsfiddle.net/arbel/pd9yB/1694/

Pemalam Github: https://github.com/arbel/half-style

Atas ialah kandungan terperinci Bagaimana Menggayakan Separuh Watak dengan CSS Tulen?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!