Material2：如何覆盖Material2组件中的Roboto字体

Question

我想改用Lato。我尝试在index.html和styles.css中添加它但是不起作用。

Answer 1

我发现的最好方法是将所有Angular Material 2选择器定位如下：

body [class^='mat-'], body [class*=' mat-'] {
    font-family: "lato";
} 

这是因为角度2的组件都有一个以“mat-”开头的类。

Answer 2

在@Ben Taliadoros的答案的基础上，这将使材料图标不会破坏：

body [class^='mat-'], body [class*=' mat-'] {
    font-family: 'PT Sans', sans-serif;
} 

body .material-icons {
    font-family: 'Material Icons';
}

CSS语法信息：

• [attribute ^ = value]选择属性以value开头的每个元素
• [attribute * = value]选择其属性包含值的每个元素

资料来源：https://www.w3schools.com/cssref/css_selectors.asp

Answer 3

我有同样的问题@kyw。目前唯一的方法是在需要时覆盖每个组件中的字体。

添加后，在组件中替换了一些字体：

html * {
  font-family: "lato", sans-serif;
  font-style: normal;
  font-weight: 400;
}

希望有人能给我们一个更好的暗示。

Answer 4

创建自己的scss文件并像这样定义font-family

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

@include mat-core($custom-typography);

检查了Typography Customization

Answer 5

这有效，并没有破坏mat-icon字体。

// Override Material Design Roboto Font
body [class^='mat-']:not(mat-icon), body [class*='mat-']:not(mat-icon)  {
  font-family: "Open Sans", sans-serif;
} 

感觉很少会读评论，所以提交这个答案。