추출하지 않고 Create-React-App 프로젝트에 글꼴을 추가하는 방법은 무엇입니까?

제거하지 않고 create-react-app 기반 프로젝트에 글꼴 추가

빌드 파이프라인을 사용하는 것은 create-react-app 프로젝트에 글꼴을 추가하는 데 권장되는 방법입니다. 이렇게 하면 적절한 처리, 브라우저 캐싱을 위한 해시 및 컴파일 오류 감지가 보장됩니다.

1. 가져오기 사용:

   • 다음에서 CSS 파일 가져오기 src/index.js의 src/index.css와 같은 JS.

   • 다음과 같은 상대 경로를 사용하여 CSS 파일의 글꼴 참조:

     <code class="css">@font-face {
       font-family: 'MyFont';
       src: local('MyFont'), url(./fonts/MyFont.woff) format('woff');
     }</code>

2. 공용 폴더 사용(권장하지 않음):

   • public/fonts/MyFont.woff에 글꼴을 배치하세요.
   • 만들기 public/index.css와 같은 public 폴더의 CSS 파일.

   • public/index.html에서 이 CSS 파일에 대한 링크를 추가하세요.

     <code class="html"><link rel="stylesheet" href="%PUBLIC_URL%/index.css"></code>

   • 상대 경로 글꼴/MyFont.woff를 사용하여 CSS 파일의 글꼴을 참조합니다.

공용 폴더 방법을 사용하는 것은 적절한 처리를 보장하지 않으므로 선호되지 않습니다. , 해싱 또는 오류 감지. 또한 캐싱 문제가 발생하기 쉽습니다.

방법에 관계없이 WOFF, WOFF2, TTF 등 지원되는 형식의 글꼴이 있어야 합니다.

위 내용은 추출하지 않고 Create-React-App 프로젝트에 글꼴을 추가하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!