向 Angular 项目添加新字体

Question

我买了一种新字体，我想在我的项目中使用。

字体文件为.otf 格式。

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

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

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

现在是我最困惑的部分：

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

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

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

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

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

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

当我检查 html 时 chrome 上我的开发者工具栏中的 css 没有改变：

Answer 1

您使用的 material css 默认已经有 Roboto 字体。所以，最终，你的全局字体被覆盖了。

您需要使用如下内容覆盖 material 的字体。

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

Adding new font to an Angular project