web-dev-qa-db-ja.com

create-react-appベースのプロジェクトにフォトを追加する方法

私は create-react-app を使用していますが、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');
}

助言がありますか？

- 編集

ダンが答えに言及した要旨を含む

➜  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');
}
cssreactjsfontswebpackcreate-react-app
99
Maxim Veksler

2つの選択肢があります。

インポートの使用

これは推奨されるオプションです。これにより、フォントがビルドパイプラインを通過し、コンパイル中にハッシュが取得されるため、ブラウザのキャッシュが正しく機能し、ファイルが見つからない場合はコンパイルエラーが発生します。

「画像、フォント、ファイルの追加」を参照 として、JSからCSSファイルをインポートする必要があります。たとえば、デフォルトでsrc/index.jsは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フォルダーに入れ、notこれらの方法を混在させるのは非常に混乱するため、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 Pagesにデプロイしてhomepageフィールドをhttp://myuser.github.io/myprojectに設定すると、/myprojectから提供されます）。ただし、fontsはpublicフォルダーにもあるため、比較的fontsから提供されます（http://mywebsite.com/fontsまたはhttp://myuser.github.io/myproject/fonts）。そのため、相対パスを使用します。

この例ではビルドパイプラインを回避しているので、ファイルが実際に存在することを確認するものではありません。これが私がこのアプローチをお勧めしない理由です。別の問題は、私たちのindex.cssファイルが縮小されず、ハッシュも得られないことです。そのため、エンドユーザーにとっては遅くなり、ブラウザが古いバージョンのファイルをキャッシュする危険性があります。

どの道を使う？

最初の方法（「インポートの使い方」）を進めてください。私があなたがやろうとしていたことからあなたがしたことからあなたが2番目のものを述べただけです（あなたのコメントから判断して）、それは多くの問題を抱えています。

192
Dan Abramov

これをするいくつかの方法はここにあります：

フォントのインポート

たとえば、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に配置できるリンクを見つけることができます。

screenshot of 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. web-font-loaderパッケージを使う

を使用してパッケージをインストールする

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']
   }
});
8
sudo bangbang

あなたは WebFont モジュールを使うことができ、それはプロセスを大いに単純化します。

render(){
  webfont.load({
     custom: {
       families: ['MyFont'],
       urls: ['/fonts/MyFont.woff']
     }
  });
  return (
    <div style={your style} >
      your text!
    </div>
  );
}
2
Delfino
  1. Googleフォント https://fonts.google.com/ にアクセスします。
  2. 下の図に示すように、フォントを選択してください。

enter image description here

  1. そのURLをコピーして新しいタブに貼り付けると、そのフォントを追加するためのCSSコードが表示されます。この場合あなたがに行くなら

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

それはこのように開くでしょう：

enter image description here

4、そのコードをコピーしてあなたのstyle.cssに貼り付けて、このようなフォントを使い始める。

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

結果：

enter image description here

2
Hitesh Sahu

私はこのような間違いをしていました。

@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);
0
Yasin UYSAL