Modification des lettres spécifiques avec CSS et JavaScript

La modification des caractères spécifiques dans CSS peut être délicate. La manipulation directe nécessite souvent des ajustements HTML individuels, en utilisant fréquemment<span></span> Éléments. Cependant, certains scénarios permettent des solutions centrées sur CSS. Cet article explore les approches et les situations de CSS-First exigeant une intervention JavaScript.

Solutions CSS

Actuellement, CSS n'a pas de ciblage spécifique au caractère robuste sans modifications HTML. Néanmoins, certaines situations bénéficient de CSS:

@font-face

La règle @font-face , généralement pour les polices personnalisées, utilise la propriété unicode-range pour cibler des caractères spécifiques. Par exemple, si les ampères (&) dans les titres nécessitent une police distincte:

 @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: «Apersand»;
  SRC: Local («Times New Roman»);
  Unicode-Range: U 0026; / * Ampesand * /
}

Ceci, combiné avec HTML comme:

<h1 id="Romans-Jane-Austen"> Romans Jane Austen</h1>
<h2 id="Fierté-et-préjudice">Fierté et préjudice</h2>
<h2 id="Sens-et-sensibilité">Sens et sensibilité</h2>

Appliquera «Times New Roman» uniquement aux ampères et auxquelles.

::first-letter

Le pseudo-élément ::first-letter largement pris en charge, excelle pour les bouchons de dépôt:

 P :: Première lettre {
  taille de police: 125%;
  Police-poids: Bold;
}

Son applicabilité est cependant limitée. Un pseudo-élément ::nth-letter reste une caractéristique souhaitée mais non réalisée.

::after

Le ::after pseudo-élément avec la propriété content ajoute des caractères après un élément, à condition que le caractère final soit cohérent. Par exemple, l'ajout d'une marque d'exclamation stylée après chaque<h2></h2> :

 H2 :: après {
  Contenu: '\ 0021'; / *! * /
  Couleur: rouge;
  Style de police: italique;
}

font-variant-alternates

La propriété font-variant-alternates (Firefox uniquement) sélectionne des glyphes alternatifs si disponibles dans une police, en utilisant la fonction character-variant() . En raison du support limité du navigateur, il est inadapté à la production.

Solutions javascript

JavaScript, en particulier lorsqu'il est appliqué pendant le processus de construction, offre une manipulation efficace des caractères sans pénalités de performance. Un cas d'utilisation courant consiste à remplacer les caractères par<span></span> Éléments pour le style.

Find et remplacer le temps d'exécution

Pour coiffer le premier "O" dans "Logo" dans les titres:

 CONSEUX CONS = document.QuerySelectorAll ("H1, H2, H3, H4, H5, H6");

pour (const de titres des titres) {
  heading.innerhtml = heading.innerhtml.replace (/ \ blogo \ b / g, (match) => match.replace (/ o /, ' <span class="special-o">o</span> '));
}

Cela remplace le "logo" par une version modifiée, ajoutant une portée autour du premier «O». L'expression régulière garantit que seuls les mots entiers «logo» sont ciblés.

Fin de construction et remplacer (webpack)

Le plugin string-replace-loader de WebPack effectue des fins et des réinstallations pendant le processus de construction. L'installez:

 Installation de NPM - Save-Dev String-Replace-chargeur

Ensuite, dans webpack.config.js :

 module.exports = {
  // ...
  module: {
    règles: [
      {
        tester: /\.html$/i,
        Loader: «String-Replace-chargedeur»,
        Options: {
          Rechercher: / \ blogo \ b / g,
          Remplacer: «logo», // Remplacer par la version stylée
        }
      }
    ]]
  }
};

Cela évite l'exécution JavaScript côté client. La propriété test s'adapte à divers types de fichiers (JSX, TSX, PUG, etc.).

Conclusion

Les polices personnalisées offrent une alternative à ceux qui sont confortables avec des outils d'édition de police comme Font Forge ou Birdfont. Le choix de la meilleure approche dépend de la complexité de la modification des personnages et des exigences du projet.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!