向 Angular 项目添加新字体

Question

我购买了一种新的字体类型，我想在我的项目中实现。

字体文件为 .otf 格式。

我将字体文件添加到我的 assets 文件夹并在我的 styles.css 中执行了以下操作：

@font-face {
   font-family: p22-mackinac-pro !important;
   src: url('assets/fonts/P22Mackinac-Book.otf') format('otf');
   font-style: normal;
 }

当我在 body 标签中添加字体系列时，没有任何反应。

现在最让我困惑的部分来了：

如果使用全局选择器并添加字体系列，它会将字体更改为另一种字体，但不会更改我正在使用的字体。

* {font-family: 'p22-mackinac-pro', serif;
 font-style: normal;
 font-weight: 400;
}

最后，除非我在上面的全局选择器中添加“！important”，否则我的部分网站字体根本不会改变，但这会导致我的角图标停止工作！

这是我希望在我的项目中使用全局字体：

这是我在 styles.css 中将字体系列添加到全局选择器时得到的字体：

这是我项目一部分的字体类型（当我没有在我的全局选择器中将 style.css 中的 font-family 添加 !important 时）

当我检查未更改的 html 时，我在 chrome 上的开发人员工具栏中的 css：

Answer 1

您使用的材质 css 已经默认具有 Roboto 字体。因此，最终，您的全局字体会被覆盖。

您需要通过以下方式覆盖材质的字体。

h1 { font-family: 'p22-mackinac-pro', serif !important; }