BinaryDevelop
  1. ホーム
  2. angular

[解決済み] Angular Materialとフォントの変更

2023-07-07 19:25:44

質問

Angular Materialのデフォルトフォントを変更する方法を教えてください。

デフォルトはRobotoで、これを別のフォントに変更する方法を見つけることができませんでした。

どのように解決するのですか？

あなたは CSS ユニバーサルセレクタ ( * ) の中に CSS または SCSS : 

* {
  font-family: Raleway /* Replace with your custom font */, sans-serif !important; 
  /* Add !important to overwrite all elements */
}

Angularマテリアルから始める v2.0.0-beta.7 でタイポグラフィの設定を作成することで、タイポグラフィをカスタマイズすることができます。 mat-typography-config 関数でタイポグラフィの設定を作成し、この設定を angular-material-typography ミキシングに含めることができます。 

@import '~@angular/material/theming';
$custom-typography: mat-typography-config(
  $font-family: 'Raleway'
);

@include angular-material-typography($custom-typography);

あるいは、( v2.0.0-beta.10 以降)を使うこともできます。 

// NOTE: From `2.0.0-beta.10`, you can now pass the typography via the mat-core() mixin:
@import '~@angular/material/theming';
$custom-typography: mat-typography-config(
  $font-family: 'Raleway'
);
@include mat-core($custom-typography);

参照先 Angular Materialのタイポグラフィのドキュメント を参照してください。

注意: フォントを適用するには、.html ファイルに mat-typography クラスを、カスタムフォントを適用する親に追加します。 

<body class="mat-typography">
  <h1>Hello, world!</h1>
  <!-- ... -->
</body>

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します