React.js에서 Google 글꼴을 사용하는 방법

React.js에서 Google 글꼴을 사용하는 방법

저는 React.js와 webpack으로 웹사이트를 만들었습니다.

웹페이지에서 구글 폰트를 사용하고 싶기 때문에 링크를 섹션에 넣습니다.

구글 폰트

<link href="https://fonts.googleapis.com/css?family=Bungee+Inline" rel="stylesheet">

CSS 설정

body{
    font-family: 'Bungee Inline', cursive;
}

하지만 작동하지 않습니다.

어떻게 하면 이 문제를 해결할 수 있을까요?

메인 또는 첫 번째 로딩 CSS 파일에서는 다음 작업을 수행합니다.

@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:regular,bold,italic&subset=latin,latin-ext');

@font-face 등으로 포장할 필요가 없습니다.Google API에서 받은 응답은 바로 사용할 수 있으며 글꼴 패밀리를 정상적으로 사용할 수 있습니다.

그 후 메인 React 앱 JavaScript에서 맨 위에 다음과 같은 내용을 입력합니다.

import './assets/css/fonts.css';

가 실제로 한 은 '아주머니'가 된 이다.app.css를 fonts.css수입하다간단하게 정리할 수 있습니다(모든 폰트가 어디에 있는지 알 수 있게 되었습니다.수입하다

React 앱으로 가져오는 구성 요소는 스타일을 가져온 후에 가져와야 합니다.특히 이들 컴포넌트도 독자적인 스타일을 Import 하는 경우는 더욱 그렇습니다.이렇게 하면 스타일의 순서를 확실히 할 수 있습니다.따라서 메인 파일 상단에 글꼴을 Import하는 것이 가장 좋습니다(문제가 있는 경우 최종 번들 CSS 파일을 확인하여 재확인하는 것을 잊지 마십시오).

Google Font API를 전달하여 글꼴 로드 등을 보다 효율적으로 수행할 수 있는 몇 가지 옵션이 있습니다.다음 공식 문서를 참조하십시오.Google 글꼴 API 시작하기

편집, 메모:오프라인 어플리케이션을 취급하는 경우 글꼴을 다운로드하여 웹 팩을 통해 로드해야 할 수도 있습니다.

React.js의 구글 폰트?

스타일시트를 엽니다.예를 들어 app.css, style.css(어떤 이름을 가지고 있는지)는 중요하지 않습니다.스타일시트를 열고 이 코드를 붙여넣기만 하면 됩니다.

@import url('https://fonts.googleapis.com/css?family=Josefin+Sans');

원하는 글꼴의 URL을 변경하는 것을 잊지 마십시오.그렇지 않으면 정상적으로 동작합니다.

이것을 다음과 같이 사용합니다.

body {
  font-family: 'Josefin Sans', cursive;
}

Create React App 환경을 사용하는 경우 다음과 같이 @import 규칙을 index.css에 추가합니다.

@import url('https://fonts.googleapis.com/css?family=Anton');

메인 React 앱에서 index.css 가져오기:

import './index.css'

React에서는 CSS를 적용하기 위해 인라인 스타일링, CSS 모듈 또는 스타일드 컴포넌트 중 하나를 선택할 수 있습니다.

font-family: 'Anton', sans-serif;

다음 튜토리얼을 참조하십시오.https://scotch.io/@micwanyike/how-to-add-add-to-add-interval-to-interval-project

import WebFont from 'webfontloader';

WebFont.load({
  google: {
    families: ['Titillium Web:300,400,700', 'sans-serif']
  }
});

이 방법을 사용해 본 지 얼마 안 되어 매우 효과가 있다고 말할 수 있습니다.

다음은 리액트 앱에 글꼴을 추가하는 두 가지 방법입니다.

로컬 글꼴 추가

1. 라는 이름의 새 폴더를 만듭니다.fonts당신의 안에서src폴더입니다.

2. 구글 폰트를 로컬로 다운로드하여fonts폴더입니다.

3. 를 엽니다.index.css파일을 작성하고 경로를 참조하여 글꼴을 포함합니다.

@font-face {
  font-family: 'Rajdhani';
  src: local('Rajdhani'), url(./fonts/Rajdhani/Rajdhani-Regular.ttf) format('truetype');
}

여기에 a를 추가했습니다.Rajdhani폰트

이렇게 css 수업에서 글꼴을 사용할 수 있습니다.

.title{
    font-family: Rajdhani, serif;
    color: #0004;
}

Google 글꼴 추가

로컬 글꼴 대신 구글 글꼴(api)을 사용하는 경우 다음과 같이 추가할 수 있습니다.

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;500&display=swap');

마찬가지로 IP 주소의 내부에도 IP 주소를 추가할 수 있습니다.index.html파일을 작성하다link태그를 붙입니다.

<link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;500&display=swap" rel="stylesheet">

(일반적으로 https://reactgo.com/add-fonts-to-react-app/)에 게재되어 있습니다.

CSS 파일(create-react-app의 App.css 등)에 글꼴 Import를 추가합니다.예를 들어 다음과 같습니다.

@fontface {
  font-family: 'Bungee Inline', cursive;
  src: url('https://fonts.googleapis.com/css?family=Bungee+Inline')
}

그런 다음 같은 css 파일 내의 DOM 요소에 글꼴을 추가합니다.

body {
  font-family: 'Bungee Inline', cursive;
}

여기서의 모든 좋은 답변에 대한 또 다른 옵션은 npm 패키지입니다.react-google-font-loader, 여기에 있습니다.

사용법은 간단합니다.

import GoogleFontLoader from 'react-google-font-loader';

// Somewhere in your React tree:

<GoogleFontLoader
    fonts={[
        {
            font: 'Bungee Inline',
            weights: [400],
        },
    ]}
/>

다음으로 CSS에서 패밀리네임만 사용할 수 있습니다.

body {
    font-family: 'Bungee Inline', cursive;
}

---

면책사항:저는 이 책의 저자입니다.react-google-font-loader패키지.

같은 문제가 있었어.알고보니 내가 쓰고 있던 건"대신'.

사용하다@import url('within single quotes');이것처럼.

것은 아니다.@import url("within double quotes");이것처럼.

리액트 앱에 구글 폰트를 포함시키는 방법은 다양합니다.가장 선호되고 최적의 방법을 알아보겠습니다.

@import vs 링크

구글 폰트가 제공하는 두 가지 옵션은link그리고.@import그래서 이제 질문은 그 사이의 결정을 향하게 된다.@import그리고.link이 비교에 관한 스택오버플로우 질문이 이미 있습니다.여기에서는 승인된 답변의 레퍼런스를 나타냅니다.

<link>모든 경우보다 우선됩니다.@import후자는 병렬 다운로드를 차단하기 때문에 브라우저는 Import된 파일의 다운로드가 완료될 때까지 기다렸다가 나머지 콘텐츠 다운로드를 시작합니다.

따라서, 가장 바람직한 것은,link구글 폰트가 제공하는 태그

리액트 앱에서 링크를 사용하는 방법과 그 이유는 무엇입니까?

이 방법을 해결책으로 제시하는 답변은 거의 없었지만, 왜 이 방법이 가장 바람직한지 좀 더 명확히 하고 싶습니다.

사용 후create-react-app프로젝트를 초기화하려면 , 코멘트를 참조해 주세요.index.html안에 줄지어 있다public폴더는 다음과 같습니다.

이 파일에 webfont, 메타 태그 또는 분석을 추가할 수 있습니다.빌드 스텝에서는 번들스크립트가 태그에 배치됩니다.

,, 순, 순, 음, the, the, the, the, the, the, the, the, , the, so, so, so, so, so, so, so, so, so, the the,link head를 참조해 주세요.

<link href="https://fonts.googleapis.com/css?family=Bungee+Inline" rel="stylesheet">

그런 다음 CSS 파일에서 사용하고 JSX로 Import할 수 있습니다.

font-family: 'Bungee Inline', cursive;

다른 사용자가 필요할 경우 @fontsource를 사용할 수 있습니다.모든 Google 글꼴을 갖추고 있으며, 여기 있는 대부분의 솔루션보다 쉬워 보입니다.

(.less)의 솔루션을 찾고 있는 경우는, 이하를 참조해 주세요.메인 파일 또는 공통 파일을 열어 다음과 같이 사용합니다.

@import (css) url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');

body{
  font-family: "Open Sans", sans-serif;
}

index.css 편집

@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

body {
  margin: 0;
  font-family: "Poppins", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

css 파일에 @import와 @font-face를 추가했더니 동작했습니다.

공용 폴더 내 루트 디렉토리의 index.html에 링크 태그를 추가합니다.

<link href="https://fonts.googleapis.com/css?family=Bungee+Inline" rel="stylesheet"/>

임의의 css 파일에서 사용합니다.

1. src 폴더에 새 폴더 글꼴을 만듭니다.

2. Google 글꼴을 로컬로 다운로드하여 글꼴 폴더에 배치합니다.

3. index.css 파일을 열고 경로를 참조하여 글꼴을 포함합니다.

    @font-face {
      font-family: 'Roboto';
      src: local('Roboto'), url(./fonts/Roboto/Roboto-Regular.ttf) format('truetype');
    }
   

이제 글꼴 링크를 사용할 수 있습니다.

.firstname{
    font-family: Roboto, serif;
    color: #0004;
}

마지막에는 링크의 자동 닫힘 태그일 수 있습니다. 시도해 보십시오.

<link href="https://fonts.googleapis.com/css?family=Bungee+Inline" rel="stylesheet"/> 

main.css 파일에서 다음을 수행합니다.

body,div {
  font-family: 'Bungee Inline', cursive;
}

글꼴 리소스는 프로젝트 디렉토리 어딘가에 있을 수 있습니다.SCSS를 사용하여 이렇게 로드할 수 있습니다.

 $list: (
      "Black",
      "BlackItalic",
      "Bold",
      "BoldItalic",
      "Italic",
      "Light",
      "LightItalic",
      "Medium",
      "MediumItalic",
      "Regular",
      "Thin",
      "ThinItalic"
    );
    
    @mixin setRobotoFonts {
      @each $var in $list {
        @font-face {
          font-family: "Roboto-#{$var}";
          src: url("../fonts/Roboto-#{$var}.ttf") format("ttf");
        }
      }
    }
@include setRobotoFonts();

언급URL : https://stackoverflow.com/questions/40769551/how-to-use-google-fonts-in-react-js