Mengubah huruf khusus dengan CSS dan JavaScript

Mengubah watak -watak tertentu dalam CSS boleh menjadi rumit. Manipulasi langsung sering memerlukan pelarasan HTML individu, kerap menggunakan<span></span> unsur -unsur. Walau bagaimanapun, senario tertentu membolehkan penyelesaian CSS-centric. Artikel ini meneroka pendekatan dan situasi CSS-pertama yang menuntut campur tangan JavaScript.

Penyelesaian CSS

Pada masa ini, CSS tidak mempunyai penargetan khusus watak yang teguh tanpa pengubahsuaian HTML. Walau bagaimanapun, beberapa situasi mendapat manfaat daripada CSS:

@font-face

Peraturan @font-face , biasanya untuk fon tersuai, menggunakan harta unicode-range untuk menyasarkan aksara tertentu. Sebagai contoh, jika ampersands (&) dalam tajuk memerlukan fon yang berbeza:

 @import url ('https://fonts.googleapis.com/css2?family=montserrat:wght@300');

H1, H2, H3, H4, H5, H6 {
  Font-Family: 'Ampersand', Montserrat, Sans-Serif;
}

@font-face {
  font-family: 'ampersand';
  SRC: Tempatan ('Times New Roman');
  Unicode-range: U 0026; / * Ampersand */
}

Ini, digabungkan dengan HTML seperti:

<h1 id="Novel-Jane-Austen"> Novel Jane Austen</h1>
<h2 id="Pride-amp-Prejudice">Pride & Prejudice</h2>
<h2 id="Rasa-amp-kepekaan">Rasa & kepekaan</h2>

akan memohon 'Times New Roman' hanya ke Ampersands.

::first-letter

::first-letter , disokong secara meluas, cemerlang untuk topi drop:

 p :: letter pertama {
  saiz font: 125%;
  Font-Weight: Bold;
}

Walau bagaimanapun, kebolehgunaannya terhad. An ::nth-letter pseudo-elemen kekal sebagai ciri yang dikehendaki tetapi tidak direalisasi.

::after

The ::after elemen pseudo dengan harta content menambah aksara selepas elemen, dengan syarat watak akhir adalah konsisten. Contohnya, menambah tanda seruan gaya selepas masing -masing<h2></h2> :

 h2 :: selepas {
  Kandungan: '\ 0021'; /*! */
  warna: merah;
  gaya font: italic;
}

font-variant-alternates

Harta font-variant-alternates (Firefox-Only) memilih glyph alternatif jika tersedia dalam font, menggunakan character-variant() fungsi. Oleh kerana sokongan penyemak imbas terhad, ia tidak sesuai untuk pengeluaran.

Penyelesaian JavaScript

JavaScript, terutamanya apabila digunakan semasa proses membina, menawarkan manipulasi watak yang cekap tanpa penalti prestasi. Kes penggunaan biasa melibatkan penggantian aksara dengan<span></span> unsur -unsur untuk gaya.

Runtime Cari dan Ganti

Untuk gaya "o" dalam "logo" yang pertama dalam tajuk:

 headings const = document.QuerySelectorAll ("H1, H2, H3, H4, H5, H6");

untuk (tajuk tajuk tajuk) {
  heading.innerHtml = heading.innerHtml.replace (/\ blogo \ b/g, (match) => match.replace (/o/, ' <span class="special-o">o</span> '));
}

Ini menggantikan "logo" dengan versi yang diubahsuai, menambah rentang sekitar 'O' pertama. Ekspresi biasa memastikan hanya perkataan "logo" yang disasarkan.

Build-Time Cari dan Ganti (Webpack)

Plugin string-replace-loader Webpack melakukan mencari-dan-menggantikan semasa proses membina. Pasangnya:

 Pemasangan NPM--Save-Dev String-Replace-Loader

Kemudian, dalam webpack.config.js :

 modul.exports = {
  // ...
  modul: {
    Kaedah: [
      {
        Ujian: /\.html$/i,
        Loader: 'String-Replace-Loader',
        Pilihan: {
          Cari: /\ Blogo \ b /g,
          Ganti: 'Logo', // Ganti dengan versi gaya
        }
      }
    ]
  }
};

Ini mengelakkan pelaksanaan JavaScript sisi klien. Harta test ini menyesuaikan diri dengan pelbagai jenis fail (JSX, TSX, PUG, dan lain -lain).

Kesimpulan

Fon tersuai menawarkan alternatif bagi mereka yang selesa dengan alat penyuntingan font seperti Font Forge atau Birdfont. Memilih pendekatan terbaik bergantung kepada kerumitan pengubahsuaian watak dan keperluan projek.

Atas ialah kandungan terperinci Mengubah huruf khusus dengan CSS dan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!