角度材料和更改字体

Question

只是想知道如何在Angular Material中更改默认字体...

默认是Roboto,我找不到将其更改为不同字体的方法.

Answer 1

您可以在或使用*CSS选择器:CSSSCSS

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

编辑:从开始2.0.0-beta.7,您可以通过使用该mat-typography-config功能创建排版配置并在angular-material-typographymixin中包含此配置来自定义排版:

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

更多信息

Answer 2

从这个官方指南:

排版定制是Angular Material基于Sass的主题的扩展.与创建自定义主题类似,您可以创建自定义排版配置.

因此,在您的index.html文件中包含此行,链接到某些外部字体:

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

然后在styles.scss文件中输入自定义排版设置,调整所选字体的font-family字符串:

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

而已.

您可以在这篇文章中找到有关自定义排版的更多信息.

样本中使用的字体来自Google Fonts.

Answer 3

从 Angular 15 开始，之前得票最多的答案将不再有效。

1. 关于版式

您可以像您所展示的那样定义它，但请记住，当您更改字体时，您可能必须更改版式大小。

如果你想这样做，这里有一个工作示例：

@use '@angular/material' as mat;
@include mat.core();

$typography-config: mat.define-typography-config(
  $font-family: '"Open Sans", "Helvetica Neue", sans-serif',
  $headline-1: mat.define-typography-level(112px, 112px, 300, $letter-spacing: -0.05em),
  $headline-2: mat.define-typography-level(56px, 56px, 400, $letter-spacing: -0.02em),
  $headline-3: mat.define-typography-level(45px, 48px, 400, $letter-spacing: -0.005em),
  $headline-4: mat.define-typography-level(34px, 40px, 400),
  $headline-5: mat.define-typography-level(24px, 32px, 400),
  $headline-6: mat.define-typography-level(20px, 32px, 400),
  $subtitle-1: mat.define-typography-level(16px, 28px, 400),
  $body-1: mat.define-typography-level(14px, 20px, 400),
  $body-2: mat.define-typography-level(14px, 20px, 400),
  $subtitle-2: mat.define-typography-level(16px, 28px, 400),
  $caption: mat.define-typography-level(12px, 20px, 400),
  $button: mat.define-typography-level(14px, 14px, 500),
);

在您的主题定义中，不要忘记添加定义的版式配置

$light-primary: mat.define-palette($light-primary-palette, 500);
$light-accent: mat.define-palette($light-accent-palette, 500);
$light-warn: mat.define-palette($light-warn-palette, 500);

$theme-light: mat.define-light-theme((
  color: (
    primary: $light-primary,
    accent: $light-accent,
    warn: $light-warn
  ),
  typography: $typography-config
));

$dark-primary: mat.define-palette($dark-primary-palette, 500);
$dark-accent: mat.define-palette($dark-accent-palette, 500);
$dark-warn: mat.define-palette($dark-warn-palette, 500);

$theme-dark: mat.define-dark-theme((
  color: (
    primary: $dark-primary,
    accent: $dark-accent,
    warn: $dark-warn
  ),
  typography: $typography-config
));

并且不要忘记应用层次结构：

@include mat.typography-hierarchy($typography-config);

2.关于深色主题

请注意，如果您将深色主题与浅色主题一起定义，则不应使用：

.theme-light {
    @include mat.all-component-themes($theme-light);
}

.theme-dark {
    @include mat.all-component-themes($theme-dark);
}

@include mat.typography-hierarchy($typography-config);

但是，请使用：

.theme-light {
    @include mat.all-component-themes($theme-light);
}

.theme-dark {
    @include mat.all-component-colors($theme-dark);
}

@include mat.typography-hierarchy($typography-config);

通过正确的方式，您将避免版式定义重复。

Answer 4

执行此操作当使用最新角度材质的自定义主题时 (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);

Answer 5

Angular Material 13 中弃用了少数方法。要更改 Angular Material 中的默认字体系列，新方法/配置如下

1. 首先更改文件中字体的css链接index.html。

<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"
>

2. styles.scss第二次在文件中写入以下配置

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

Answer 6

在 Angular 15 中，

    $my-typography: mat.define-typography-config($font-family: '"Open Sans", "Helvetica Neue", sans-serif');
    
    @include mat.typography-hierarchy($my-typography);

$my-app-theme: mat.define-light-theme((
  color: (
    primary: $my-app-primary,
    accent: $my-app-accent,
    warn: $my-app-warn,
  ),
  typography: $my-typography
));