[css] 반응 형 앱 기반 프로젝트에 글꼴을 추가하는 방법은 무엇입니까?

Program / 글쓴이

내가 사용하고 -반응-응용 프로그램을 작성 하고 안함 eject.

@ font-face를 통해 가져오고 로컬로로드 한 글꼴이 어디로 가야하는지 명확하지 않습니다.

즉, 나는로드

@font-face {
  font-family: 'Myriad Pro Regular';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Regular'), url('MYRIADPRO-REGULAR.woff') format('woff');
}

어떤 제안?

— 편집하다

Dan이 자신의 답변에서 언급 한 요점 포함

➜  Client git:(feature/trivia-game-ui-2) ✗ ls -l public/static/fonts
total 1168
-rwxr-xr-x@ 1 maximveksler  staff  62676 Mar 17  2014 MYRIADPRO-BOLD.woff
-rwxr-xr-x@ 1 maximveksler  staff  61500 Mar 17  2014 MYRIADPRO-BOLDCOND.woff
-rwxr-xr-x@ 1 maximveksler  staff  66024 Mar 17  2014 MYRIADPRO-BOLDCONDIT.woff
-rwxr-xr-x@ 1 maximveksler  staff  66108 Mar 17  2014 MYRIADPRO-BOLDIT.woff
-rwxr-xr-x@ 1 maximveksler  staff  60044 Mar 17  2014 MYRIADPRO-COND.woff
-rwxr-xr-x@ 1 maximveksler  staff  64656 Mar 17  2014 MYRIADPRO-CONDIT.woff
-rwxr-xr-x@ 1 maximveksler  staff  61848 Mar 17  2014 MYRIADPRO-REGULAR.woff
-rwxr-xr-x@ 1 maximveksler  staff  62448 Mar 17  2014 MYRIADPRO-SEMIBOLD.woff
-rwxr-xr-x@ 1 maximveksler  staff  66232 Mar 17  2014 MYRIADPRO-SEMIBOLDIT.woff
➜  Client git:(feature/trivia-game-ui-2) ✗ cat src/containers/GameModule.css
.GameModule {
  padding: 15px;
}

@font-face {
  font-family: 'Myriad Pro Regular';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Regular'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-REGULAR.woff') format('woff');
}

@font-face {
  font-family: 'Myriad Pro Condensed';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Condensed'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-COND.woff') format('woff');
}

@font-face {
  font-family: 'Myriad Pro Semibold Italic';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Semibold Italic'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-SEMIBOLDIT.woff') format('woff');
}

@font-face {
  font-family: 'Myriad Pro Semibold';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Semibold'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-SEMIBOLD.woff') format('woff');
}

@font-face {
  font-family: 'Myriad Pro Condensed Italic';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Condensed Italic'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-CONDIT.woff') format('woff');
}

@font-face {
  font-family: 'Myriad Pro Bold Italic';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Bold Italic'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-BOLDIT.woff') format('woff');
}

@font-face {
  font-family: 'Myriad Pro Bold Condensed Italic';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Bold Condensed Italic'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-BOLDCONDIT.woff') format('woff');
}

@font-face {
  font-family: 'Myriad Pro Bold Condensed';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Bold Condensed'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-BOLDCOND.woff') format('woff');
}

@font-face {
  font-family: 'Myriad Pro Bold';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Bold'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-BOLD.woff') format('woff');
}

답변

두 가지 옵션이 있습니다.

가져 오기 사용

이것이 제안 된 옵션입니다. 글꼴이 빌드 파이프 라인을 통과하고 컴파일 중 해시를 가져 와서 브라우저 캐싱이 올바르게 작동하고 파일이없는 경우 컴파일 오류가 발생하도록합니다.

으로 “추가 이미지, 글꼴, 및 파일”에 설명 , 당신은 JS에서 가져온 CSS 파일이 필요합니다. 예를 들어, 기본적으로 src/index.jsimports src/index.css:

import './index.css';

이와 같은 CSS 파일은 빌드 파이프 라인을 거치며 글꼴과 이미지를 참조 할 수 있습니다. 예를 들어에 글꼴을 넣으면 다음을 포함 src/fonts/MyFont.woff할 index.css수 있습니다.

@font-face {
  font-family: 'MyFont';
  src: local('MyFont'), url(./fonts/MyFont.woff) format('woff');
}

로 시작하는 상대 경로를 사용하는 방법에 주목하십시오 ./. 이것은 빌드 파이프 라인 (Webpack으로 구동)이이 파일을 찾는 데 도움이되는 특수 표기법입니다.

일반적으로 이것으로 충분합니다.

public폴더 사용

어떤 이유로 당신이 원하는 경우 하지 빌드 파이프 라인을 사용하고, 대신 “고전적인 방법”그것을 할, 당신은 할 수 있습니다 사용하는 public폴더를 거기 글꼴을 넣어.

이 방법의 단점은 프로덕션을 위해 컴파일 할 때 파일이 해시되지 않으므로 파일을 변경할 때마다 파일 이름을 업데이트해야하거나 브라우저가 이전 버전을 캐시한다는 것입니다.

이런 식으로하려면 글꼴과 같은 public폴더에 글꼴을 넣습니다 ( 예 🙂 public/fonts/MyFont.woff. 이 접근법을 따르는 경우 CSS 파일을 public폴더에 넣고 JS에서 가져 오지 않아야 합니다.이 접근법을 혼합하는 것은 매우 혼란 스러울 것입니다. 따라서 여전히 원하는 경우와 같은 파일이 public/index.css있습니다. <link>다음에서이 스타일 시트 에 수동으로 추가 해야합니다 public/index.html.

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

그리고 내부에서 일반적인 CSS 표기법을 사용합니다.

@font-face {
  font-family: 'MyFont';
  src: local('MyFont'), url(fonts/MyFont.woff) format('woff');
}

fonts/MyFont.woff경로로 어떻게 사용 하고 있는지 주목 하십시오. 이 때문입니다 index.css에 public는 공공 경로에서 처리 할 수 있도록 폴더 (당신은 GitHub의 페이지에 배포하고 설정하는 경우 일반적으로는 서버 루트, 그러나 homepage에 필드를 http://myuser.github.io/myproject,이 서비스한다 /myproject). 그러나 fonts도 있습니다 public그래서 그들은 서비스한다, 폴더 fonts상대적으로 (하나 http://mywebsite.com/fonts또는 http://myuser.github.io/myproject/fonts). 따라서 상대 경로를 사용합니다.

이 예제에서는 빌드 파이프 라인을 피하기 때문에 파일이 실제로 존재하는지 확인하지 않습니다. 그렇기 때문에이 방법을 권장하지 않습니다. 또 다른 문제는 index.css파일이 축소되지 않고 해시를 얻지 못한다는 것입니다. 따라서 최종 사용자에게는 속도가 느려지고 브라우저가 이전 버전의 파일을 캐싱 할 위험이 있습니다.

 어떤 방법을 사용합니까?

첫 번째 방법으로 이동하십시오 (“가져 오기 사용”). 두 번째 내용은 설명하려고 시도했기 때문에 설명했지만, 많은 문제가 있으며 일부 문제를 해결할 때 최후의 수단이어야합니다.

답변

이를 수행하는 몇 가지 방법이 있습니다.

1. 폰트 가져 오기

예를 들어 Roboto를 사용하려면 다음을 사용하여 패키지를 설치하십시오.

yarn add typeface-roboto

또는

npm install typeface-roboto --save

index.js에서 :

import "typeface-roboto";

많은 오픈 소스 글꼴과 대부분의 Google 글꼴을위한 npm 패키지가 있습니다. 여기서 모든 글꼴을 볼 수 있습니다 . 모든 패키지는 해당 프로젝트 에서 가져온 것입니다 .

2. 타사에서 호스팅하는 글꼴

예를 들어 Google 글꼴은 fonts.google.com으로 이동하여 링크를 찾을 수 있습니다.public/index.html

fonts.google.com의 스크린 샷

그것은 같을 것이다

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

또는 

<style>
    @import url('https://fonts.googleapis.com/css?family=Montserrat');
</style>

3. 글꼴을 다운로드하여 소스 코드에 추가하십시오.

글꼴을 다운로드하십시오. 예를 들어 Google 글꼴의 경우 fonts.google.com으로 . 다운로드 버튼을 클릭하여 글꼴을 다운로드하십시오.

에 글꼴 이동 fonts귀하의 디렉토리를 src디렉토리

src
|
`----fonts
|      |
|      `-Lato/Lato-Black.ttf
|       -Lato/Lato-BlackItalic.ttf
|       -Lato/Lato-Bold.ttf
|       -Lato/Lato-BoldItalic.ttf
|       -Lato/Lato-Italic.ttf
|       -Lato/Lato-Light.ttf
|       -Lato/Lato-LightItalic.ttf
|       -Lato/Lato-Regular.ttf
|       -Lato/Lato-Thin.ttf
|       -Lato/Lato-ThinItalic.ttf
|
`----App.css

이제에 App.css추가

@font-face {
  font-family: 'Lato';
  src: local('Lato'), url(./fonts/Lato-Regular.otf) format('opentype');
}

@font-face {
    font-family: 'Lato';
    font-weight: 900;
    src: local('Lato'), url(./fonts/Lato-Bold.otf) format('opentype');
}

@font-face {
    font-family: 'Lato';
    font-weight: 900;
    src: local('Lato'), url(./fonts/Lato-Black.otf) format('opentype');
}

들어 ttf형식, 당신은 언급해야format('truetype') . 를 들어 woff,format('woff')

이제 클래스에서 글꼴을 사용할 수 있습니다.

.modal-title {
    font-family: Lato, Arial, serif;
    font-weight: black;
}

4. 웹 폰트 로더 패키지 사용

다음을 사용하여 패키지 설치

yarn add webfontloader

또는

npm install webfontloader --save

에서 src/index.js, 당신은이를 가져오고 필요한 글꼴을 지정할 수 있습니다

import WebFont from 'webfontloader';

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

답변

  1. Google Fonts https://fonts.google.com/으로 이동
  2. 아래 이미지와 같이 글꼴을 선택하십시오.

여기에 이미지 설명을 입력하십시오

  1. 해당 URL을 복사하여 새 탭에 붙여 넣으면 해당 글꼴을 추가하는 CSS 코드가 표시됩니다. 이 경우에 가면

https://fonts.googleapis.com/css?family=Spicy+Rice

다음과 같이 열립니다 :

여기에 이미지 설명을 입력하십시오

4, style.css에서 해당 코드를 복사하여 붙여 넣고 다음과 같이 해당 글꼴을 사용하기 시작하십시오.

      <Typography
          variant="h1"
          gutterBottom
          style={{ fontFamily: "Spicy Rice", color: "pink" }}
        >
          React Rock
        </Typography>

결과:

여기에 이미지 설명을 입력하십시오

답변

WebFont 모듈을 사용 하면 프로세스가 크게 간소화됩니다.

render(){
  webfont.load({
     custom: {
       families: ['MyFont'],
       urls: ['/fonts/MyFont.woff']
     }
  });
  return (
    <div style={your style} >
      your text!
    </div>
  );
}

답변

나는 이런 실수를하고 있었다.

@import "https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i&amp;subset=cyrillic,cyrillic-ext,latin-ext";
@import "https://use.fontawesome.com/releases/v5.3.1/css/all.css";

이 방법으로 제대로 작동합니다

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i&amp;subset=cyrillic,cyrillic-ext,latin-ext);
@import url(https://use.fontawesome.com/releases/v5.3.1/css/all.css);

답변

나는이 스택 질문에 착륙 한 후 비슷한 문제를 해결하기 위해 아침 내내 보냈습니다. 위의 답변에서 Dan의 첫 번째 솔루션을 점프 포인트로 사용했습니다.

문제

개발자 (이것은 내 로컬 컴퓨터에 있음), 준비 및 프로덕션 환경이 있습니다. 내 준비 및 프로덕션 환경은 동일한 서버에 있습니다.

앱이 스테이징을 통해 배포되고 acmeserver/~staging/note-taking-app프로덕션 버전은acmeserver/note-taking-app (blame IT)에 있습니다.

글꼴과 같은 모든 미디어 파일은 개발자에게 완벽하게로드되었습니다 (예 : react-scripts start .

그러나 스테이징 및 프로덕션 빌드를 작성하고 업로드 할 때 .css및 .js파일이 올바르게로드 되는 동안 글꼴이 없었습니다. 컴파일.css 파일에 올바른 경로가있는 것으로 보였지만 브라우저 http 요청에 매우 잘못된 경로가 지정되었습니다 (아래 참조).

컴파일 된 main.fc70b10f.chunk.css파일 :

@font-face {
  font-family: SairaStencilOne-Regular;
  src: url(note-taking-app/static/media/SairaStencilOne-Regular.ca2c4b9f.ttf) ("truetype");
}

브라우저 http 요청은 아래와 같습니다. /static/css/글꼴 파일이 들어있을 때 추가되는 방식에 유의하십시오 ./static/media/ 과 대상 폴더를 복제하는 . 서버 구성을 범인으로 배제했습니다.

는 Referer너무 잘못 일부입니다.

GET /~staging/note-taking-app/static/css/note-taking-app/static/media/SairaStencilOne-Regular.ca2c4b9f.ttf HTTP/1.1
Host: acmeserver
Origin: http://acmeserver
Referer: http://acmeserver/~staging/note-taking-app/static/css/main.fc70b10f.chunk.css

package.json파일은 가지고 homepage에 속성이 설정 ./note-taking-app. 문제가 발생했습니다.

{
  "name": "note-taking-app",
  "version": "0.1.0",
  "private": true,
  "homepage": "./note-taking-app",
  "scripts": {
    "start": "env-cmd -e development react-scripts start",
    "build": "react-scripts build",
    "build:staging": "env-cmd -e staging npm run build",
    "build:production": "env-cmd -e production npm run build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
  //...
}

해결책

오랜 시간이 걸렸지 만 해결책은 다음과 같습니다.

  1. 변경 PUBLIC_URL환경에 따라 env 변수를
  2. 파일 에서 homepage속성을 제거package.json

아래는 내 .env-cmdrc파일입니다. 모든 것을 하나의 파일로 유지하기 때문에 .env-cmdrc정기적으로 사용 .env합니다.

{
  "development": {
    "PUBLIC_URL": "",
    "REACT_APP_API": "http://acmeserver/~staging/note-taking-app/api"
  },
  "staging": {
    "PUBLIC_URL": "/~staging/note-taking-app",
    "REACT_APP_API": "http://acmeserver/~staging/note-taking-app/api"
  },
  "production": {
    "PUBLIC_URL": "/note-taking-app",
    "REACT_APP_API": "http://acmeserver/note-taking-app/api"
  }
}

비아 라우팅 react-router-dom도 잘 작동합니다. 간단히 PUBLIC_URLenv 변수를 basename속성 으로 사용하십시오 .

import React from "react";
import { BrowserRouter } from "react-router-dom";

const createRouter = RootComponent => (
  <BrowserRouter basename={process.env.PUBLIC_URL}>
    <RootComponent />
  </BrowserRouter>
);

export { createRouter };

서버 구성은 모든 요청을 ./index.html파일 로 라우팅하도록 설정되어 있습니다.

마지막으로, main.fc70b10f.chunk.css논의 된 변경 사항이 구현 된 후 컴파일 된 파일의 모습입니다.

@font-face {
  font-family: SairaStencilOne-Regular;
  src: url(/~staging/note-taking-app/static/media/SairaStencilOne-Regular.ca2c4b9f.ttf)
    format("truetype");
}

읽을 거리

답변