web-dev-qa-db-ja.com

angular2-cliにはカスタムフォントが含まれます

プロジェクトにいくつかのカスタムフォントを含めようとしていますが、成功しません。

注：angular-cliを使用しています：[email protected]

  1. フォントをフォルダーに入れます

    src/assets/fonts/Roboto-Regular.tff

  2. src/styles.cssを追加します

    @ font-face {font-family： "Roboto-Regular"; src：url（ "./ assets/fonts/Roboto-Regular.tff"）; }

  3. コンポーネントで使用します.scss

    font-family： "ロボトレギュラー";

  4. 404エラーが表示されます：

    モジュール "./assets/fonts/Roboto-Regular.tff" client？93b6：80 ./~/css-loader?sourcemap!./~/postcss-loader!./src/styles.cssモジュールが見つかりません：エラー： './assets/fonts/Roboto-Regular.tff'を解決できません 'D：\ Work\Blah\angular\BlahFrontEnd\src'は './assets/fonts/Roboto-Regular.tff'を解決します説明ファイルを使用したD：\ Work\Blah\angular\BlahFrontEnd\src '：D：\ Work\Blah\angular\BlahFrontEnd\package.json（相対パス：./src）フィールド「browser」には有効なエイリアスが含まれていません記述ファイルを使用した後の構成：D：\ Work\Blah\angular\BlahFrontEnd\package.json（相対パス：./src）記述ファイルを使用：D：\ Work\Blah\angular\BlahFrontEnd\package.json（相対パス： ./src/assets/fonts/Roboto-Regular.tff）ディレクトリとして：D：\ Work\Blah\angular\BlahFrontEnd\src\assets\fonts\Roboto-Regular.tffが存在しない拡張子「フィールド」が存在しないtには有効なエイリアス構成が含まれていますD：\ Work\Blah\angular\BlahFrontEnd\src\assets\fonts\Roboto-Regular.tffは存在しません.tsフィールド「browser」はco有効なエイリアス設定を取得しますD：\ Work\Blah\angular\BlahFrontEnd\src\assets\fonts\Roboto-Regular.tff.tsは存在しません.jsフィールド「ブラウザ」には有効なエイリアス設定が含まれていませんD：\ Work\Blah\angular\BlahFrontEnd\src\assets\fonts\Roboto-Regular.tff.jsは存在しません[D：\ Work\Blah\angular\BlahFrontEnd\src\assets\fonts\Roboto-Regular.tff] [ D：\ Work\Blah\angular\BlahFrontEnd\src\assets\fonts\Roboto-Regular.tff] [D：\ Work\Blah\angular\BlahFrontEnd\src\assets\fonts\Roboto-Regular.tff.ts] [ D：\ Work\Blah\angular\BlahFrontEnd\src\assets\fonts\Roboto-Regular.tff.js] @ ./~/css-loader?sourcemap!./~/postcss-loader!./src/styles。 css 6：793-837 @ ./src/styles.css @ multiスタイル

  5. app.component.scssにフォントフェースの定義を追加すると、404エラーも発生します

    jquery.js：2 GET http：// localhost：4200/assets/fonts/Roboto-Regular.tff 404

Roboto-Regular.tffフォントを含める方法はありますか？

宜しくお願いします

angularfontswebpackangular2-cli
28
mp3por

検索してここに到着した人々のために：

Npmでインストール：

npm install roboto-fontface --save

.angular-cli.json（apps[0].styles）のスタイルに追加：

"styles": [
    "styles.css",
    "../node_modules/roboto-fontface/css/roboto/roboto-fontface.css"
],

それで全部です！

編集：Angular 6以降、このファイルはangular.jsonではなくangular-cli.jsonと呼ばれます。フォントの追加は以前と同じように機能します。

57
Gideon

https://fonts.google.com のgooglefont URLを使用してみましたか？

Styles.cssで：

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

次に、styles.cssまたは必要な場所でfont-familyを使用します。

body, html {
  font-family: 'Roboto';
}

私は自分のプロジェクトでこれを使用していますが、うまく機能しています。

17
RichieRock

SCSSを使用する場合：

インストールroboto-fontface

npm install roboto-fontface --save

Styles.scssファイルにインポートします

@import '~roboto-fontface/css/roboto/roboto-fontface.css';

body {
  font-family: Roboto, Helvetica, Arial, sans-serif;
}
8
BrunoLM

あなたがしたことは正しいですが、小さなエラーがあります：

@font-face { font-family: "Roboto-Regular"; src: url("./assets/fonts/Roboto-Regular.tff"); }

tffの代わりにttfを指定しました

これを試して ：

@font-face { font-family: "Roboto-Regular"; src: url("./assets/fonts/Roboto-Regular.ttf"); }
3
Ushodaya Nallola

これはangular 2,4,5,6,7などでローカルにGoogleフォントを使用する最良の方法です、最初にGoogle Fontをダウンロードし、これをアセットフォルダー内で使用して使用しますあなたの要件によるものです。

Angular.jsonでは、src/assetsでこれを呼び出します

"assets": [
    "src/assets"
 ],

Cssファイルで、このfont-faceを上部に追加します

@font-face {
  font-family: 'Roboto';
  src: url(/assets/Roboto/Roboto-Regular.ttf) format("truetype");
  font-weight: 400;
}

最後に次のように要件に従って使用します

body{
 font-family: 'Roboto', sans-serif;
}
2
internthings