web-dev-qa-db-ja.com

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

Angular 5プロジェクトに新しいフォントをインポートしたい。

私が試してみました：

1）ファイルをasset/fonts /にコピーする

2）.angular-cli.jsonスタイルに追加する

しかし、ファイルが.cssではなく、.otf（インストーラー）のように機能する.exeであることを確認しました。そのため、インポートの方法はわかりません。何か案が？

angularfonts
28
Mario

アセットフォルダー（アセット内のフォントサブフォルダーの場合があります）にフォントファイルを配置し、スタイルでそれを参照する必要があります。

@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ファイルを作成し、styles.cssまたはstyles.scssのようにangle-cli.jsonで宣言することもできます。

"styles": [
  "styles.css",
  "fonts.css"
],
60
Saptarshi Basu

Font-faceでフォントのcssを作成してみてください（説明のように here ）

ステップ＃1

フォントフェースでcssファイルを作成し、assets/fontsのようにどこかに配置します。

customfont.css

@font-face {
    font-family: YourFontFamily;
    src: url("/assets/font/yourFont.otf") format("truetype");
}

ステップ＃2

styles configの.angular-cli.jsonにcssを追加します

"styles":[
 //...your other styles
 "assets/fonts/customFonts.css"
 ]

これを行った後にng serveを再起動することを忘れないでください

ステップ＃3

コードでフォントを使用する

component.css

span {font-family: YourFontFamily; }
13
David