Question

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

Answer 1

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

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

这是因为有角度的2个组件都有一个以＆＃39; mat开头的类 - ＆＃39;。

Answer 2

以@Ben Taliadoros＆＃39;为基础。回答，这将使材料图标不会破坏：

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

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

CSS语法信息：

[attribute ^ = 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;
}

很少有人会阅读评论，因此提交此答案。

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

5 个答案: