web-dev-qa-db-ja.com

自己完結型にフォントを含める方法Angular 2コンポーネント

依存関係としてカスタムフォントを必要とするコンポーネントがあります。移植性のあるフォント自体のインポートをコンポーネントで処理したいのですが。また、私たちのプロジェクトはangular-cliを使用しているので、とにかくwebpack.configを制御することはできません。

コンポーネントで単純なインポートを行った場合、angular-cliがフォントを移動するのに十分スマートであることを期待していましたが、ビルド時に移動されません。

import '.my-custom-font.woff'; // doesn't work

とにかく、簡単に言えば、CSSから参照できるビルドディレクトリにフォントを移動する必要があります...

@font-face {
  font-family: "Custom Font";
  src: url("??????/my-custom-font.woff") format("woff")
}
angulartypescriptimportfontsangular-cli
6
Brian

ファイルを/ assetsフォルダー（srcフォルダー内）に置くと、次のようにフォントを参照できます。

@font-face {
  font-family: "Custom Font";
  src: url("/assets/my-custom-font.woff") format("woff")
}

そしてそれをhtmlで使用します。

4
Fabrizio Caldarelli