web-dev-qa-db-ja.com

フォントを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');
}

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

これを行うためのより明確な/より良い方法はありますか？

htmlcssangularfonts
21
ob1

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

チェックアウト https://fonts.google.com

なぜそれが良いですか？

  • より高い性能
  • 顧客がキャッシュにフォントを持っている可能性が高い
  • ファイルの添付を心配する必要はなく、Originの帯域幅を使用します

あなたの場合、cssファイルに以下をインポートします：

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

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

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

これはangular 2,4,5,6,7などでGoogleフォントをローカルで使用する最良の方法です、最初にGoogleフォントをダウンロードし、これをアセットフォルダー内に追加して使用しますあなたの要件ごとです。

Angular.jsonでは、src/assetsでこれを呼び出します

"assets": [
    "src/assets"
 ],

Cssファイルで、このfont-faceを上部に追加します

@font-face {
  font-family: 'Montserrat';
  src: url(/assets/Montserrat/Montserrat-Light.ttf) format("truetype");
  font-weight:300;
}

最後に次のような要件に従って使用します

body{
 font-family: 'Montserrat', sans-serif;
}
3
internthings