CSS 및 JS로 특정 문자 수정하기

CSS 및 JS로 특정 문자들을 수정할 수 있습니다.

 

@font-face

@font-face는 unicode-range라는 속성을 가지고 있습니다.

예를 들어, 우리 사이트의 제목에 (&)앰퍼샌드가 자주 포함되어 있다면,

앰퍼샌드(U+0026)의 유니코드 값을 조회하고 유니코드 범위를 사용하여 이 특정 문자를 대상으로 지정할 수 있습니다.

@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;
}

<h1>Jane Austen Novels</h1>
<h2>Pride & Prejudice</h2>
<h2>Sense & Sensibility</h2>

그러면 Font-face가 &(앰퍼샌드)에만 적용되는 폰트를 사용할 수도 있는 것이 되겠지요?

::first-letter

first-letter 가상 엘리먼트는 최신 브라우저에서만 작동합니다.

p::first-letter {
  font-size: 125%;
  font-weight: bold;
}

::after

after를 사용해서 이탤릭체인 특수문자 느낌표를 넣을 수도 있지요.

h2::after {
  content: '\0021';
  color: red;
  font-style: italic;
}

font-variant-alternates

일부 파이어폭스, 사파리만 지원합니다.

글꼴에 대체 글리프가 포함된 경우 이 속성을 character-variant() 함수와 함께 사용하여 선택할 수 있습니다.

---

이제 자바스크립트를 사용한 방법들에 대해서 알아보죠.

const headings = document.querySelectorAll("h1, h2, h3, h4, h5, h6");

for (const heading of headings) {
  heading.innerHTML = heading.innerHTML
    .replace(/\bLOGO\b/g, 'L<span class="special-o">O</span>GO');
}

일반적으로 위와 같이 정규표현식의 replace 구문을 사용하여 변경해줍니다.

 

웹팩을 사용해서 좀 더 편하게도 사용할 수 있지요.

npm install --save-dev string-replace-loader

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.html$/i,
        loader: 'string-replace-loader',
        options: {
          search: '/\bLOGO\b/g',
          replace: 'L<span class="special-o">O</span>GO',
        }
      }
    ]
  }
}

/\.html$/i # HTML
/\.[jt]sx$/i # JSX or TSX
/\.pug$/i # PUG
/\.handlebars$/i # Handlebars

위의 웹팩을 속성을 바꿔서 다양한 구문들을 사용할 수 있습니다.

이의 장점은 클라이언트에서 불필요한 자바스크립트가 실행되지 않는다는 점입니다.

 

이런 글꼴을 수정하는 다양한 방법대신에 디자인적 접근 방법으로 사용하기 위한

Font Forge 또는 Birdfont와 같은 무료 글꼴 편집 도구가 많이 있으니 사용해보세요!

 

감사합니다.

 

 

 

출처 : https://css-tricks.com/modifying-specific-letters-with-css-and-javascript/?fbclid=IwAR02wAhYpx0uNElxABkO52BVu9h55CFlmvLhbueEghcDmL5NDoRSQ4fL-RE