Angular 应用程序中所有页面的字体系列更改答案

【问题标题】：Font-Family Change throughout the all pages in Angular applicationAngular 应用程序中所有页面的字体系列更改
【发布时间】：2020-09-02 08:58:43
【问题描述】：

如何更改 Angular 应用程序的“字体系列”以应用于整个应用程序中使用的每个元素？

示例：在 CSS 中：

p {
  font-family: Calibri, sans-serif
}

<p>Calibri</p>
<label>Default</label>

【问题讨论】：

标签： css angular

【解决方案1】：

如果您使用的是第三方库，则需要使用 ng-deep，它可以让您访问操作 DOM 元素。

在 SCSS 中：

::ng-deep body {
font-family: 'Calibri', sans-serif;
}

如果你没有第三方库，就使用body标签。

在 CSS 中：

body {
font-family: 'Calibri', sans-serif;
}

【讨论】：

【解决方案2】：

font-family CSS 属性为选定元素指定一个或多个字体系列名称和/或通用系列名称的优先列表。

例子：

.testfont{
 font-family: 'Comic Sans MS',  sans-serif;
 }

<div class="testfont"> abcdefg (changed by class)</div>
<div class="default"> abcdefg (default cause not changed)</div>

关心：该样式仅适用于您应用它的类。

要将其应用于每个元素，请在正文中使用它：

body{
 font-family: 'Comic Sans MS',  sans-serif;
 }

<div class="testfont"> abcdefg (changed by body)</div>
<div class="default"> abcdefg (changed by body :D)</div>

【讨论】：