web-dev-qa-db-fra.com

Angular Matériau et modification des polices

Je me demandais simplement comment je pouvais changer les polices par défaut dans Angular Material ...

La valeur par défaut est Roboto et je ne pouvais pas trouver un moyen de changer cela en une police différente.

angularangular-material
32
Nav

Vous pouvez utiliser le * Sélecteur CSS dans votre CSS ou SCSS:

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

[~ # ~] éditer [~ # ~] : à partir de 2.0.0-beta.7, vous pouvez personnaliser la typographie en créant une configuration de typographie avec le mat-typography-config fonction et y compris cette config dans le angular-material-typography mixin:

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

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

Alternativement (2.0.0-beta.10 et jusqu'à):

// 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);

Plus d'infos

Remarque: pour appliquer les polices, ajoutez le mat-typography classe au parent auquel vos polices personnalisées doivent être appliquées:

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

De ceci guide officiel :

La personnalisation de la typographie est une extension de la thématique basée sur Sass de Angular). De la même manière que pour la création d'un thème personnalisé, vous pouvez créer une configuration de typographie personnalisée.

Alors, incluez cette ligne dans votre index.html fichier, lien vers une police externe:

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

Puis mettez dans votre styles.scss file les paramètres de typographie personnalisés en ajustant la chaîne de la famille de polices pour la police sélectionnée:

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

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

Un thème personnalisé complet, avec les couleurs et tout, ressemble à quelque chose comme:

@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);

C'est ça.

Vous pouvez trouver plus d'informations sur la typographie personnalisée dans this post .

La police utilisée dans les exemples provient de Google Fonts .

41
fabianopinto