我在主题中设置了字体粗细,并期望它将应用于所有元素:
$theme: mat.define-theme((
...
typography: (
plain-family: 'Roboto, sans-serif',
brand-family: 'Roboto, sans-serif',
bold-weight: 400,
medium-weight: 400,
use-system-variables: true,
),
));
...
html {
@include mat.all-component-themes($theme);
}
:root {
@include navigation-theme.theme($theme, $variant-colors);
@include mat.typography-hierarchy($theme);
@include mat.system-level-colors($theme);
@include mat.system-level-typography($theme);
}
我希望像 h1、h2 这样的所有元素现在的字体粗细都是 400,但事实并非如此。
如果您想将权重应用于
h1
、h2
、h3
等,那么您需要将其设置为regular-weight
。
@use '@angular/material' as mat;
$theme: mat.define-theme(
(
color: (
theme-type: light,
primary: mat.$azure-palette,
tertiary: mat.$blue-palette,
),
typography: (
plain-family: 'Roboto, sans-serif',
brand-family: 'Roboto, sans-serif',
bold-weight: 500,
medium-weight: 500,
regular-weight: 500, // <- changed here!
use-system-variables: true,
),
)
);
body {
@include mat.all-component-themes($theme);
font-family: Roboto, 'Helvetica Neue', sans-serif;
margin: 0;
padding: 30px;
height: 100%;
}
:root {
// @include navigation-theme.theme($theme, $variant-colors);
@include mat.typography-hierarchy($theme);
@include mat.system-level-colors($theme);
@include mat.system-level-typography($theme);
}
html {
height: 100%;
}
@include mat.core();
@include mat.color-variants-backwards-compatibility($theme);
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>