추출하지 않고 Create-React-App에서 글꼴을 사용하는 방법은 무엇입니까?

제거 없이 Create-React-App 프로젝트에 글꼴을 통합하는 방법

제거 없이 create-react-app 프로젝트에서 글꼴을 활용하려면 제거해야 하는 경우 두 가지 기본 옵션을 사용할 수 있습니다.

방법 1: 가져오기 활용

이 방법에는 CSS 파일을 JavaScript 코드로 가져오는 작업이 포함됩니다. 기본적으로 src/index.js는 src/index.css를 참조합니다. ./:

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

방법 2: 공용 폴더 사용

사용하지 않으려면 파이프라인을 빌드하는 경우 공용 폴더 접근 방식을 선택할 수 있습니다. public/fonts 디렉토리에 글꼴을 넣으세요.

public/fonts/MyFont.woff

public 폴더에 CSS 파일(예: public/index.css)을 만들고 이를 public/index.html에 수동으로 연결하세요.

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

public/index.css 내부:

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

권장

가져오기를 활용하는 초기 방법은 다음에 대한 액세스 권한을 부여하므로 적극 권장됩니다. 글꼴이 빌드 파이프라인을 통과하는지 확인하고, 효율적인 브라우저 캐싱을 위해 컴파일 중에 해시를 획득하고, 파일이 없는 경우 컴파일 경고를 받는 등의 기능이 있습니다.

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