Je me demande comment je peux changer les polices par défaut dans Angular Material ...
La police par défaut est Roboto et je n'ai pas trouvé de moyen de la changer.
Vous pouvez utiliser le Sélecteur universel CSS ( * ) dans votre CSS o SCSS :
* {
font-family: Raleway /* Replace with your custom font */, sans-serif !important;
/* Add !important to overwrite all elements */
}À partir d'Angular Material v2.0.0-beta.7 vous pouvez personnaliser la typographie en créant une configuration de la typographie à l'aide de la commande mat-typography-config et d'inclure cette configuration 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 ( v2.0.0-beta.10 et plus) :
// 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);Se référer à Documentation sur la typographie d'Angular Material pour plus d'informations.
Note : Pour appliquer les polices, ajoutez le fichier mat-typography à la classe parent où vos polices personnalisées doivent être appliquées :
<body class="mat-typography">
<h1>Hello, world!</h1>
<!-- ... -->
</body>
De ce guide officiel :
La personnalisation de la typographie est une extension de la thématisation basée sur Sass d'Angular Material. Sass d'Angular Material. Comme pour la création d'un thème personnalisé, vous pouvez créer une configuration de typographie personnalisée.
Donc, incluez cette ligne dans votre index.html qui renvoie à une police externe :
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">Ensuite, mettez votre styles.scss classe les paramètres de typographie personnalisée, en ajustant la chaîne font-family 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 des couleurs et tout, est 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.define-palette($mat-blue);
$custom-accent: mat.define-palette($mat-amber);
$custom-theme: mat.define-light-theme($custom-primary, $custom-accent);
@include mat.all-component-themes($custom-theme);C'est tout.
Vous pouvez trouver plus d'informations sur la typographie personnalisée dans ce poste .
La police utilisée dans les échantillons provient de Google Fonts .
Mise à jour :
Comme l'a commenté @Nate May il a été modifié avec la v12, donc vérifiez le fichier documentation actualisée sur la recommandation actuelle pour la typographie personnalisée.
Faites ceci lorsque vous utilisez un thème personnalisé pour le dernier matériel angulaire (12)
styles.scss
@use '~@angular/material' as mat;
@font-face {
font-family: 'custom-font';
src: url('assets/custom-font.ttf');
}
$custom-typography: mat.define-typography-config(
$font-family: "custom-font"
);
@include mat.core($custom-typography);
Quelques méthodes sont dépréciées dans Angular Material 13. Pour changer la famille de polices par défaut dans Angular Material, les nouvelles méthodes/configurations sont les suivantes
Changez d'abord le lien css de la police dans index.html fichier.
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2? family=Titillium+Web:wght@300;400;600;700&display=swap" rel="stylesheet"
Ensuite, écrivez la configuration ci-dessous dans styles.scss fichier
$custom-typography: mat.define-typography-config($font-family:'"Titillium Web",sans-serif');
$custom-theme: mat.define-light-theme((typography: $custom-typography));
@include mat.core($custom-typography); @include mat.all-component-themes($custom-theme);
Vous pouvez facilement remplacer le mat-typography-config pour définir le type de police et les valeurs des différentes variables
.custom-typography {
@include angular-material-typography($custom-typography);
}
$custom-typography: mat-typography-config(
$font-family: "Quicksand, sans-serif",
);Consultez l'article https://www.universal-tutorial.com/angular-tutorials/angular-typography qui propose également une démo.
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
0 votes
Examiner cette question : github.com/angular/material2/issues/205
0 votes
Je pense que le problème avec le style Material est que oui, vous pouvez changer la police et les styles globaux, mais parfois vous voulez juste utiliser les valeurs par défaut et changer seulement certaines parties, et tout le monde n'utilise pas SASS. Après tout, l'intérêt des composants matériels réside dans leur facilité d'utilisation " plug and play ". J'ai donc décidé d'apporter les modifications nécessaires en utilisant la syntaxe ::ng-deep sur les seuls composants qui en ont besoin.