Material2：如何覆蓋Material2組件中的Roboto字體

Question

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

Answer 1

我有同樣的問題@kyw。目前唯一的方法是在需要的地方重寫每個組件中的字體。

將在此之後更換了一些的字體組件：

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

希望有人可以給我們帶來更好的提示。

Answer 2

我發現最好的辦法是針對所有角材料2選擇如下：

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

這是因爲角2個組件都有一類以「mat-」。

Answer 3

創建自己的SCSS文件並定義FONT-FAMILY這樣

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

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

檢查了Typography Customization