CSSおよびJavaScriptを使用した特定の文字を変更します

CSS内の特定の文字を変更するのは難しい場合があります。直接的な操作には、多くの場合、個々のHTML調整が必要になり、頻繁に使用されます<span></span>要素。ただし、特定のシナリオにより、CSS中心のソリューションが可能です。この記事では、JavaScriptの介入を要求するCSSファーストアプローチと状況について説明します。

CSSソリューション

現在、CSSには、HTML変更なしで堅牢な文字固有のターゲティングがありません。それにもかかわらず、一部の状況はCSSの恩恵を受けます。

@font-face

@font-faceルールは、通常、カスタムフォント用に、 unicode-rangeプロパティを使用して特定の文字をターゲットにします。たとえば、見出しのAmpersands（＆）には明確なフォントが必要な場合：

 @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：local（ 'Times New Roman'）;
  Unicode-Range：U 0026; / * ampersand */
}

これは、次のようなHTMLと組み合わせています

<h1 id="ジェーンオースティン小説">ジェーンオースティン小説</h1>
<h2 id="プライドと偏見">プライドと偏見</h2>
<h2 id="センスと感性">センスと感性</h2>

アンパサンドにのみ「Times New Roman」を適用します。

::first-letter

::first-letter擬似要素は、ドロップキャップに優れています。

 P :: First-Letter {
  フォントサイズ：125％;
  font-weight：bold;
}

ただし、その適用性は限られています。 An ::nth-letter擬似要素は、依然として望ましいが未実現の特徴です。

::after

:: contentプロパティを使用したPseudo-Element ::after 、最終文字が一貫している場合、要素の後に文字を追加します。たとえば、それぞれ後にスタイルの感嘆符を追加します<h2></h2>：

 h2 ::後{
  コンテンツ： '\ 0021'; /*！ */
  色：赤;
  フォントスタイル：イタリック;
}

font-variant-alternates

font-variant-alternatesプロパティ（Firefoxのみ） character-variant()関数を使用して、フォント内で使用可能な場合、代替グリフを選択します。ブラウザのサポートが限られているため、生産には適していません。

JavaScriptソリューション

JavaScriptは、特にビルドプロセス中に適用された場合、パフォーマンスのペナルティなしで効率的なキャラクター操作を提供します。一般的なユースケースには、文字を置き換えることが含まれます<span></span>スタイリングの要素。

ランタイム検索と交換

見出し内の「ロゴ」で最初の「O」をスタイリングするには：

 const見出し= document.queryselectorall（ "h1、h2、h3、h4、h5、h6"）;

for（見出しの見出し）{
  heading.innerhtml = heading.innerhtml.replace（/\ blogo \ b/g、（match）=> match.replace（/o/、 ' <span class="special-o">o</span> '））;
}

これにより、「ロゴ」が変更されたバージョンに置き換えられ、最初の「O」の周りにスパンを追加します。正規表現は、単語全体の「ロゴ」のみがターゲットにされることを保証します。

ビルドタイム検索と交換（webpack）

WebPackのstring-replace-loaderプラグインは、ビルドプロセス中に発見と再表示を実行します。インストール：

 npmインストール -  save-dev string-replace-roader

次に、 webpack.config.jsで：

 module.exports = {
  // ...
  モジュール：{
    ルール：[
      {
        テスト：/\.html$/i、
        ローダー：「String-Replace-Roader」、
        オプション：{
          検索： /\ blogo \ b /g、
          交換：「ロゴ」、//スタイルのバージョンに置き換えます
        }
      }
    ]
  }
};

これにより、クライアント側のJavaScriptの実行が回避されます。 testプロパティは、さまざまなファイルタイプ（JSX、TSX、PUGなど）に適応します。

結論

カスタムフォントは、Font ForgeやBirdfontなどのフォント編集ツールを備えた快適な人々のための代替品を提供します。最良のアプローチを選択することは、キャラクターの変更とプロジェクトの要件の複雑さに依存します。

以上がCSSおよびJavaScriptを使用した特定の文字を変更しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。