☰

Angular 4 CLI Webアプリケーションにフォントをインポートするためのベストプラクティス/スタイル 質問する

tag-icon • tag-icon html css angular fonts
Angular 4 CLI Webアプリケーションにフォントをインポートするためのベストプラクティス/スタイル 質問する

私は Angular 4 の個人プロジェクトに取り組んでおり、Ubuntu フォント ファミリを Angular アプリケーションに追加したいと考えていました。プロジェクトに多数のカスタム フォントを追加する場合のベスト プラクティスまたはスタイルは何ですか? 現在、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');
}

これを元のコンポーネントに配置することで、ネストされたコンポーネント内のフォントを再定義する必要がなくなり、デフォルトのフォント ファミリのように扱うことができます。

これを実行し、重複コードを削減するより明確で優れた方法はありますか?

ベストアンサー1

Angular アプリだけでなく、Web サイトにフォントを含めるより良い方法があります。

チェックアウト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">

おすすめ記事