どのようにWebフォントとSSSのスタイルシートを使用してレベルを後に反応するか?

あなたが私のような初心者なら、2つの質問があります.
最初にHTML、CSS、JavaScriptを学びました.

どうやって使ったのRoboto あなたのページのGoogleフォントから?Aを通して<link> タグindex.html , または@import CSSスタイルシートのステートメント?

CSSの代わりにSSSを使いたい場合はどうしますか?あなたのSSSをCSSに変えるコンパイラを必要とするでしょう<link> タグindex.html ?

私は上記のように物事を教えることを教えられた.私が「レベルアップ」するとき、私は同じことをし続けました.Webフォントを読み込んで、SSSスタイルシートをインポートするこれらの“古典的な”方法を有効にすると反応で最高の練習ではありません.

どのようにSSSSのスタイルシートを作成する反応アプリを作成するには？

によるとcreate-react-app documentation :

まずインストールする必要がありますnode-sass あなたのコマンドラインでは、NPMや糸を介して.

  # example from create-react-app documentation

  $ npm install node-sass --save
  $ # or
  $ yarn add node-sass

その後、直接経由でJSからSSSファイルをインポートすることができます@import 次のようにします.

  // app.js

  import "./app.scss"

つまり、「古典的な」アプローチとは異なり(冒頭で述べたように)コンパイラのようなコンパイラLive Sass Compiler もう必要ない.
引用するcreate-react-app guide on "adding a style sheet" :

This project setup uses Webpack for handling all assets.

これは、WebPackがコンパイルを処理することを意味します.コンパイラを使用しないでください.

どのように作成するWebフォントを作成するアプリケーションプロジェクトを反応させる？

私たちはGoogle Fonts Roboto 次の例で.
あなたはおそらくGoogleのフォントから2つの選択肢に精通している.

経由で<link> タグindex.html , 次の写真の左ラジオボタンの選択です.

コピーする@import コンテンツとは、次の写真の右側のラジオボタンの選択ですSCSSまたはCSSファイルに貼り付けます.

どちらを選ぶべきか、どちらが良い方法ですか?一つずつ話し合いましょう

SCSS / CSSファイルのインポート文

を使用する場合@import SCSS/CSSファイルのステートメントでは、そのscss/cssファイルをJavaScriptファイルにインポートしなければなりませんnode-sass 最初にscssについてです.

// app.scss or app.css

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

  // app.js

  import "./app.scss"   // if you are using SCSS
  import "./app.css"    // if you are using CSS

によるとthis StackOverflow answer , Webフォントのインポート@import SCSS/CSSファイルに対する文は、コンパイル時にWebpackが「フォントファイルが実際に存在することを確認する」と言うことを意味します.

2 .インデックスの< link >タグ。パブリックフォルダの中のHTML

それによればStackOverflow answer 上記.また、“古典的な”方法を行うことができますが、それは“ビルドパイプラインを通過しない”このようにロードされたフォントからお勧めしません.
それで、それは現在明確でなければなりません.常に使用@import , 正しい?まだ迅速に結論にジャンプしないでください.を使用しての速度の利点があることを有効にする<link> タグ
によるとthis article Google開発者から

Google Fonts provides the option to load fonts via <link> tags or an @import statement. The <link> code snippet includes a preconnect resource hint and therefore will likely result in faster stylesheet delivery than using @import version.

それで、我々はどちらに従うべきですか?

今の私の結論

私はまだこの時点で最適化について考えるのに十分なレベルではない.だから私は両方のリンクと使用からアドバイスを取っている@import 現在の私のSCSSで.

Webフォントを読み込む他の方法

上述の2つの方法は、決して徹底的ではない.Webフォントをロードする他の方法があります.

@font-face

Webfont NPMや糸のいずれかを介してインストールすることができますパッケージ.

私は、私が気づいていないものをする他の(より良い)方法が確実であると確信します.あなたがよりよく知っているならば、親切に以下の提案を残してください.

フォントは幅広い話題です

私がこの記事を研究するとき、私はフォントが広い話題であるとわかりました.時々、答え/記事は私が私が書いたものの100 %確信であることができないように互いに対立します.だから何か不正確な場合は、それを指摘すること自由に感じて下さい.

資源と更なる読書

How to add fonts to create-react-app based projects?

3 quick ways to add fonts to your React app

Difference between @font-face and @import url?

Using @font-face

Best way to add a custom font to my site?

Best practices for fonts