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;
}

希望有人能给我们更好的提示。