Änderung spezifischer Buchstaben mit CSS und JavaScript

Das Ändern spezifischer Zeichen innerhalb von CSS kann schwierig sein. Direkte Manipulation erfordert häufig individuelle HTML -Anpassungen, die häufig verwendet werden<span></span> Elemente. Bestimmte Szenarien ermöglichen jedoch CSS-zentrierte Lösungen. In diesem Artikel werden CSS-First-Ansätze und -situationen untersucht, in denen JavaScript-Interventionen gefordert werden.

CSS -Lösungen

Derzeit fehlt CSS ein robustes charakterspezifisches Targeting ohne HTML-Modifikationen. Trotzdem profitieren einige Situationen von CSS:

@font-face

Die @font-face -Regel, normalerweise für benutzerdefinierte Schriftarten, verwendet die unicode-range Eigenschaft, um bestimmte Zeichen zu zielen. Zum Beispiel, wenn Verstärker in Überschriften eine bestimmte Schriftart erfordern:

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

H1, H2, H3, H4, H5, H6 {
  Schriftfamilie: "Ampersand", Montserrat, Sans-Serif;
}

@font-face {
  Schriftfamilie: 'Ampersand';
  SRC: Lokal ('Times New Roman');
  Unicode-Range: U 0026; / * Ampersand */
}

Dies, kombiniert mit HTML wie:

<h1 id="Jane-Austen-Romane"> Jane Austen Romane</h1>
<h2 id="Stolz-amp-Vorurteil">Stolz & Vorurteil</h2>
<h2 id="Sinn-amp-Sensibilität">Sinn & Sensibilität</h2>

Wird "Times New Roman" nur auf die Verstärker anwenden.

::first-letter

Das ::first-letter , weit verbreitet, zeichnet sich für Tropfenkappen aus:

 P :: Erstgeschichte {
  Schriftgröße: 125%;
  Schriftgewicht: fett;
}

Die Anwendbarkeit ist jedoch begrenzt. An ::nth-letter Pseudoelement bleibt ein gewünschtes, aber nicht realisiertes Merkmal.

::after

Das ::after Pseudo-Element mit der content fügt Zeichen nach einem Element Zeichen hinzu, vorausgesetzt, das endgültige Zeichen ist konsistent. Zum Beispiel ein gestyltes Ausrufezeichen nach jeweils hinzufügen<h2></h2> :

 H2 :: nach {
  Inhalt: '\ 0021'; /*! */
  Farbe: Rot;
  Schriftstil: kursiv;
}

font-variant-alternates

Die font-variant-alternates Eigenschaft (Nur-Firefox) wählt alternative Glyphen aus, falls innerhalb einer Schriftart verfügbar, unter Verwendung der character-variant() -Funktion. Aufgrund der begrenzten Browserunterstützung ist es für die Produktion ungeeignet.

JavaScript -Lösungen

JavaScript bietet, insbesondere wenn er während des Build -Prozesses angewendet wird, eine effiziente Manipulation des Charakters ohne Leistungsstrafen. Ein allgemeiner Anwendungsfall besteht darin, Zeichen durch das Ersetzen von Zeichen durch<span></span> Elemente für das Styling.

Laufzeit finden und ersetzen

Um das erste "O" in "Logo" in Überschriften zu stylen:

 const hokings = document.querySelectorAll ("H1, H2, H3, H4, H5, H6");

für (const -Überschrift von Überschriften) {
  Heading.InnerHtml = Heading.innerhtml.Replace (/\ blogo \ b/g, (match) => match.replace (/o/, ' <span class="special-o">o</span> '));
}

Dies ersetzt "Logo" durch eine modifizierte Version und fügt eine Spannweite um das erste 'o' hinzu. Der reguläre Ausdruck stellt sicher, dass nur ganze Wörter "Logo" gezielt werden.

Erstellen Sie die Time Find and ersetzen (Webpack)

string-replace-loader Plugin von WebPack führt während des Build-Prozesses Find-and-Replace durch. Installieren Sie es:

 NPM Install-Save-Dev String-Replace-Lader

Dann in webpack.config.js :

 module.exports = {
  // ...
  Modul: {
    Regeln: [
      {
        Test: /\.html$/i,
        Loader: 'String-Replace-Loader',
        Optionen: {
          Suche: /\ blogo \ b /g,
          Ersetzen Sie: 'Logo', // Ersetzen Sie durch die gestaltete Version
        }
      }
    ]
  }
};

Dies vermeidet die kundenseitige JavaScript-Ausführung. Die test passt an verschiedene Dateitypen (JSX, TSX, Mops usw.).

Abschluss

Benutzerdefinierte Schriftarten bieten eine Alternative für diejenigen, die sich mit Schriftarten mit Schriftarten wie Schriftart oder Birdfont vertraut machen. Die Auswahl des besten Ansatzes hängt von der Komplexität der Charaktermodifikation und der Projektanforderungen ab.

Das obige ist der detaillierte Inhalt vonÄnderung spezifischer Buchstaben mit CSS und JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!