ベストプラクティス/角度4 cli Webアプリケーションにフォントをインポートするスタイル

Question

私はAngular 4のパーソナルプロジェクトに取り組んでおり、AngularアプリケーションにUbuntuフォントファミリを追加したいと考えていました。プロジェクトに多数のカスタムフォントを追加するためのベストプラクティスまたはスタイルは何ですか？私は現在、ubuntuフォントファミリを/assets/fonts/ubuntu-font-family-0.83に保存し、それをフォント面を持つ最も外側のコンポーネントのCSSファイルapp.component.cssに追加しました。

@font-face { 
    font-family: 'Ubuntu'; 
    src: url('/assets/fonts/ubuntu-font-family-0.83/Ubuntu-R.ttf'); 
} 

これを元のコンポーネントに入れておくと、ネストされたコンポーネントのフォントを再定義する必要はありません。デフォルトのフォントファミリのように扱います。

これを行うにはもっと明確な方法がありますが、重複したコードは削除してください。

Answer 1

角度アプリだけでなく、ウェブサイトにフォントを含める方が良い方法があります。

アウトhttps://fonts.google.com

それが優れているのはなぜ？

• 高性能
あなたの顧客はあなたのでは原点帯域幅

をファイルを添付を心配する必要があり、あなたを使用していない彼のキャッシュ

でフォントを持っていることを

高いチャンス、あなたのCSSファイルに次のようにインポートする場合：

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

メインの.cssファイルに配置することができます。 index.htmlに含まれています。それとも、<link>タグを使用して（もindex.htmlの中で）あなたのヘッダーにフォントを含める

<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">