CSS ??? ?? ??? ???? ?? ???? ? ????. ?? ??? ?? ?? HTML ??? ?? ???????<span></span> ??. ??? ?? ????? CSS ?? ???? ?????. ? ??? JavaScript ??? ???? CSS ?? ?? ??? ??? ?????.

CSS ???

?? CSS? HTML ???? ??? ?? ? ???? ?????. ???? ???? ?? ??? CSS? ???????.

@font-face

????? ??? ?? ?? ? @font-face ??? unicode-range ??? ???? ?? ??? ???????. ?? ??, ??? ?? ?? (&)? ??? ??? ??? ?? :

 @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 {
  ?? ??? : '?? ??';
  SRC : ?? ( 'Times New Roman');
  ?? ?? ?? : U 0026; / * ?? ?? */
}

??? HTML? ???? ??? ????.

<h1> ?? ??? ??</h1>
<h2>???? ??</h2>
<h2>?? ? ??</h2>

'Times New Roman'? ?????? ?? ? ????.

::first-letter

::first-letter ?? ??? ?? ?? ?? ?????.

 p :: ? ?? {
  ?? ?? : 125%;
  ?? ?? : ???;
}

??? ?? ???? ??????. A ::nth-letter pseudo element? ??? ?????? ???? ?? ???? ?? ????.

::after

content ???? ?? ??? ::after ?? ??? ???? ?? ? ??? ?????. ?? ??, ??? ???? ???? ?????<h2></h2> :

 H2 :: ? {
  ?? : '\ 0021'; /*! */
  ?? : ???;
  ?? ??? : ????;
}

font-variant-alternates

font-variant-alternates ?? (Firefox-only)? FONT ??? ?? ??? ?? Alternate Glyphs? ???? character-variant() ??? ?????. ???? ??? ???? ?? ??? ???? ???? ????.

?? ???? ???

JavaScript, ?? ?? ???? ?? ??? ?? ?? ???? ???? ??? ??? ?????. ???? ?? ???? ??? ???? ?? ?????<span></span> ??????? ??.

??? ?? ? ??

?? ? "??"?? ? ?? "O"? ??????? :

 const headings = 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? string-replace-loader ????? ?? ?????? Find-and-Replace? ?????. ?? :

 NPM ??-?? DEV String-Replace-Loader

?? ?? webpack.config.js ?? :

 module.exports = {
  // ...
  ?? : {
    ?? : [
      {
        ??? : /\.html$/i,
        ?? : 'String-Replace-Loader',
        ?? : {
          ?? : /\ blogo \ b /g,
          ?? : '??', // ??? ???? ?????
        }
      }
    ]]
  }
};

????? ? JavaScript ??? ????. test ??? ??? ?? ?? (JSX, TSX, PUG ?)? ?????.

??

??? ?? ??? Font Forge ?? Birdfont? ?? ?? ?? ??? ??? ?????? ??? ?????. ??? ?? ??? ???? ?? ?? ?? ? ???? ?? ??? ???? ?? ????.

? ??? CSS ? JavaScript? ?? ??? ?????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!