CSS 및 JavaScript로 특정 문자를 수정합니다

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 id="제인-오스틴-소설"> 제인 오스틴 소설</h1>
<h2 id="자부심과-편견">자부심과 편견</h2>
<h2 id="감각-및-감성">감각 및 감성</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 중국어 웹사이트의 기타 관련 기사를 참조하세요!