1. ホーム
  2. angular

[解決済み] 新しいフォントをプロジェクトにインポートする方法 - Angular 5

2023-03-17 04:40:10

質問

Angular 5のプロジェクトに新しいフォントをインポートしたいのですが、どうすればよいですか?

私は試してみました。

1) assets/fonts/ にファイルをコピーする。

2) それを .angular-cli.json スタイル

となっていますが、確認したところ、このファイルは .css であり、それは .otf のように動作し .exe (それはインストーラです)だから私はそれをインポートする方法が本当にわからない。何かアイデアはありますか?

どのように解決するのですか?

assetsフォルダ(assetsの中にfontsのサブフォルダがあるかもしれません)にフォントファイルを置いて、スタイルでそれを参照する必要があります。

@font-face {
  font-family: lato;
  src: url(assets/font/Lato.otf) format("opentype");
}

これで、このフォントを任意の場所に適用することができます。

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'lato', 'arial', sans-serif;
}

を置くと @font-face の定義をグローバルな styles.css または styles.scss と記述すれば、コンポーネント固有の CSS/SCSS でさえも、どこでもフォントを参照できるようになります。 styles.css または styles.scss はすでに angular-cli.json . あるいは、別のCSS/SCSSファイルを作成し、それをangular-cli.jsonの中で styles.css または styles.scss のように

"styles": [
  "styles.css",
  "fonts.css"
],