CLOSED - Angular Material Typography 无法正常工作 [英] CLOSED - Angular Material Typography doesn't work properly

查看:22
本文介绍了CLOSED - Angular Material Typography 无法正常工作的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试为 Angular Material 创建自定义主题,但是当我应用排版时,某些元素会更改自己的字体,但不会在所有应用程序中更改.例如,对于链接和网格列表元素都不起作用(我没有注意到它是否出现在更多的材料组件中).这是我的代码:

I am trying to create my custom theme for Angular Material but when I apply the typography some elements change its own fonts but not in all the application. For example, for links doesn't works and for grid lists elements neither(I didn't notice if it occurs with more material components). Here is my code:

font.scss

@import url('https://fonts.googleapis.com/css?family=Indie+Flower&display=swap');

$fontConfig: mat-typography-config(
  $font-family: "'Indie Flower', cursive",
  $display-4: mat-typography-level(112px, 112px, 300),
  $display-3: mat-typography-level(56px, 56px, 400),
  $display-2: mat-typography-level(45px, 48px, 400),
  $display-1: mat-typography-level(34px, 40px, 400),
  $headline: mat-typography-level(24px, 32px, 400),
  $title: mat-typography-level(20px, 32px, 500),
  $subheading-2: mat-typography-level(16px, 28px),
  $subheading-1: mat-typography-level(15px, 24px),
  $body-2: mat-typography-level(14px, 24px, 500),
  $body-1: mat-typography-level(14px, 20px, 400),
  $button: mat-typography-level(14px, 14px, 500),
  $caption: mat-typography-level(12px, 20px, 400),
  $input: mat-typography-level(inherit, 1.125, 400),
);

theme.scss

@import '~@angular/material/theming';
@import './helpers/font';

@function create-custom-theme($primary, $accent, $warn: mat-palette($mat-red)) {
  @return (
    primary: $primary,
    accent: $accent,
    warn: $warn,
    is-dark: false,
    foreground: $my-theme-foreground,
    background: $my-theme-background,
  );
}

$custom-theme-primary: mat-palette($mat-green);
$custom-theme-accent: mat-palette($mat-blue);
$custom-theme-warn: mat-palette($mat-red);

$custom-theme: create-custom-theme($custom-theme-primary, $custom-theme-accent, $custom-theme-warn);

@include angular-material-theme($custom-theme);
@include mat-core($fontConfig);

styles.scss

@import "~@angular/material/theming";
@import '../themes/helpers/font';
.
.
.

有什么想法吗?

推荐答案

请添加你的 css.

body {
    font-family: 'Indie Flower', cursive;
}

它对我有用

这篇关于CLOSED - Angular Material Typography 无法正常工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆