create-react-app에서 글꼴을 꺼내지 않고 효과적으로 관리하려면 어떻게 해야 합니까?

create-react-app에서 글꼴 관리

create-react-app을 꺼내지 않고 사용할 때 @font를 통해 가져온 글꼴 배치 -얼굴이 혼란스러울 수 있습니다. 고려해야 할 두 가지 옵션은 다음과 같습니다.

가져오기 사용

이는 글꼴을 빌드 파이프라인에 통합하여 다음과 같은 경우 올바른 브라우저 캐싱 및 컴파일 오류를 보장하므로 권장되는 접근 방식입니다. 파일이 없습니다. src/index.css를 가져오는 src/index.js와 같은 JavaScript 파일에서 CSS 파일을 가져옵니다. CSS 파일 내에서 src/fonts 디렉터리 내의 글꼴 파일에 대한 상대 경로를 사용하여 @font-face 규칙을 정의합니다(예:

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

공용 폴더 사용

이 방법은 권장되지 않지만 공용 폴더(예: public/fonts/MyFont.woff)에 글꼴을 배치하는 작업이 포함됩니다. 이 경우 public 폴더에 public/index.css와 같은 CSS 파일을 생성하고 public/index.html에 수동으로 링크를 추가하세요. CSS 파일 내에서 public/fonts 디렉토리 내의 글꼴 파일에 대한 상대 경로와 함께 일반 CSS 표기법을 사용합니다(예:

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

그러나 이 방법에는 해시 누락 및 축소와 같은 단점이 있습니다. 로딩 속도가 느려지고 캐싱 문제가 발생할 수 있습니다.

권장 사항

첫 번째 방법인 "가져오기 사용"은 빌드 파이프라인 내에서 글꼴을 적절하게 처리하고 잠재적인 문제를 방지합니다.

위 내용은 create-react-app에서 글꼴을 꺼내지 않고 효과적으로 관리하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!