web-dev-qa-db-ja.com

Angularマテリアルとフォントの変更

Angular Materialのデフォルトのフォントを変更する方法を知りたい.

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

angularangular-material
32
Nav

CSSまたはSCSSで * CSSセレクター を使用できます。

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

EDIT：2.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);

または（2.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);

詳細

注：フォントを適用するには、カスタムフォントを適用する親にmat-typographyクラスを追加します。

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

これから 公式ガイド ：

タイポグラフィのカスタマイズは、Angular MaterialのSassベースのテーマの拡張です。カスタムテーマの作成と同様に、カスタムタイポグラフィ構成を作成できます。

したがって、次の行をindex.htmlファイルに含めて、外部フォントにリンクします。

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

次に、styles.scssファイルにカスタムタイポグラフィ設定を入力し、選択したフォントのフォントファミリ文字列を調整します。

@import '~@angular/material/theming';

$custom-typography: mat-typography-config($font-family: '"Oswald", sans-serif;');
@include mat-core($custom-typography);

色とすべての完全なカスタムテーマは、次のようなものです。

@import '~@angular/material/theming';

$custom-typography: mat-typography-config($font-family: '"Oswald", sans-serif;');
@include mat-core($custom-typography);

$custom-primary: mat-palette($mat-blue);
$custom-accent: mat-palette($mat-amber);
$custom-theme: mat-light-theme($custom-primary, $custom-accent);
@include angular-material-theme($custom-theme);

それでおしまい。

this post でカスタムタイポグラフィに関する詳細情報を見つけることができます。

サンプルで使用されているフォントは Google Fonts のものです。

41
fabianopinto