角质材料排版超越-通过2托拉斯垫芯？
在角度上安装了材料，我正在试图覆盖材料排版，以包含2种不同的字体。
- I需要“Roboto”用于所有的正文/按钮/标题文本，
- 和所有标题/标题/显示文本的“机器人-缩略语”。
，什么是最好的方法？
，以下是我到目前为止在SCSS文件中所做的工作：
($title-title= Roboto-Condensed，$主字体= Roboto)
// https://material.angular.io/guide/typography
@import '~@angular/material/theming';
// Define a custom typography config that overrides the font-family as well as the other `headlines` and `body-1` levels.
$custom-heading-typography: mat-typography-config(
$font-family: $title-font,
$display-4: mat-typography-level($d4, $disp-line-ht, $light),
$display-3: mat-typography-level($d3, $disp-line-ht, $regular),
$display-2: mat-typography-level($d2, $title-line-ht, $regular),
$display-1: mat-typography-level($d1, $title-line-ht, $regular),
$headline: mat-typography-level($h1, $title-line-ht, $bold),
$title: mat-typography-level($h2, $title-line-ht, $regular),
$subheading-2: mat-typography-level($h3, $title-line-ht $regular),
$subheading-1: mat-typography-level($h4, $title-line-ht, $light),
);
$custom-body-typography: mat-typography-config(
$font-family: $primary-font,
$body-1: mat-typography-level($primary-fs, $primary-line-ht, $regular),
$body-2: mat-typography-level($primary-fs, $primary-line-ht, $medium),
$caption: mat-typography-level($font-sm, $caption-line-ht, $regular),
$button: mat-typography-level($primary-fs, $disp-line-ht, $medium),
$input: mat-typography-level(inherit, $input-line-ht, $regular),
);我也想改变不同的字体样式，比如字体大小，线条高度，重量等等，所以我不只是专注于设置每个文本类的字体家族。
--这不起作用(传递2个信任) :
// Override the typography in the core CSS.
@include mat-core($custom-heading-typography, $custom-body-typography);我创建了两种不同的字体配置，一种用于标题文本，一种用于body text。如果我把它们传递给mat，它们都是独立工作的，但我试图同时将两者传递给mat-core -这种字体覆盖有可能使用两个不同的字体家族，还是应该用另一种方式进行呢？。
即使只有一种字体，也有一些问题：
当我只包括一个在垫核心混音，它改变所有的文字元素为字体系列(标题配置与结果段落，按钮和列表-项目是‘Roboto-凝聚’)。
我还尝试在Material.Angular排版文档中包含这两条指令中的一条，但是这种行为是不可预测的，并且可能导致所有元素都具有相同的字体系列。
尝试过这个：
// Override typography CSS classes (e.g., mat-h1, mat-display-1, mat-typography, etc.).
@include mat-base-typography($custom-heading-typography);也尝试过这样的方法：
// Override typography for all Angular Material, including mat-base-typography and all components.
@include angular-material-typography($custom-heading-typography);回答 1
Stack Overflow用户
发布于 2020-08-20 06:48:51
我想我想出了这个角质材料的排版问题。
constructor.
- 您可以有2字体家族(或更多？)、2中每个字体家族(我有一个用于标题，一个用于正文)、
- ，只要您使用和‘SCSS/SASS运算符，这两种字体都包含在Angular.Material字体SCSS 中。
下面是一个设置2个信任的简短示例：
(一种用于标题Roboto简缩，一种用于正文，Roboto)
// First custom Material typography config
$custom-heading-typography: mat-typography-config(
/* First font family ('Roboto Condensed') */
$font-family: $title-font,
// ...
$display-1: mat-typography-level($d1, $title-line-ht, $regular),
$headline: mat-typography-level($h1, $title-line-ht, $regular),
// ...
);
// Second custom Material typography config
$custom-body-typography: mat-typography-config(
/* Second font family ('Roboto') */
$font-family: $primary-font,
// ...
$body-2: mat-typography-level($primary-fs, $primary-line-ht, $medium),
$caption: mat-typography-level($primary-fs, $caption-line-ht, $light),
// ...
);这是有棱角的材料部分，你可以用它来代替垫基的排版。
注意简单的‘和运算符在@@语句中。
它看起来很有效，，但是如果我切换配置声明的顺序，我会得到非常不同的字体样式。因为这个，我不确定这是“正确”的解决方案，但这是我在所有搜索中找到的最好的.
// Override typography for all Angular Material, including mat-base-typography and all components.
/* This works if you put the typography configs in the correct order!? */
@include angular-material-typography($custom-heading-typography and $custom-body-typography); 这是一个写得不好的博客，
...where我尝试了几种方法，首先认为这种方法不起作用，然后决定它是否有效。
https://krisbunda.com/blog/2020/08/01/use-2-fonts-in-your-angular-material-custom-typography-config/
我应该重写它，但是如果您想深入了解这个问题，至少您会发现我尝试过的更多的图像和片段。
https://stackoverflow.com/questions/62010128
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号