내가 사용하고 -반응-응용 프로그램을 작성 하고 안함 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.js
imports 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
그것은 같을 것이다
<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']
}
});
답변
- Google Fonts https://fonts.google.com/으로 이동
- 아래 이미지와 같이 글꼴을 선택하십시오.
- 해당 URL을 복사하여 새 탭에 붙여 넣으면 해당 글꼴을 추가하는 CSS 코드가 표시됩니다. 이 경우에 가면
다음과 같이 열립니다 :
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&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&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"
}
//...
}
해결책
오랜 시간이 걸렸지 만 해결책은 다음과 같습니다.
- 변경
PUBLIC_URL
환경에 따라 env 변수를 - 파일 에서
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_URL
env 변수를 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");
}
읽을 거리
-
https://create-react-app.dev/docs/deployment#serving-apps-with-client-side-routing
-
https://create-react-app.dev/docs/advanced-configuration
- 이것은
PUBLIC_URL
환경 변수를설명합니다
React 앱 작성은 애플리케이션이 package.json (홈페이지)에 지정된대로 서빙 웹 서버의 루트 또는 서브 패스에서 호스팅되는 것으로 가정합니다. 일반적으로 Create React App은 호스트 이름을 무시합니다. 이 변수를 사용하여 자산이 제공 한 URL (호스트 이름 포함)을 그대로 참조 할 수 있습니다. CDN을 사용하여 응용 프로그램을 호스팅 할 때 특히 유용 할 수 있습니다.
- 이것은