如何在Angular中导入和使用字体？

Question

我试图让我的字体在我的 angular 项目中使用本地字体文件。所以我有一个字体 Univers LT，文件与 fonts.scss 文件一起放在 assets/fonts 中。然后我在 angular.json:

中声明了这一点

"styles":[
 //... other styles
 "src/assets/fonts/fonts.scss"
 ]

下面是我的font.scss:

@font-face {
font-family: 'UniversBlack';
font-style: normal;
font-weight: normal;
src: local('Univers LT Std 75 Black'), url('UniversLTStd-Black.ttf') format('ttf');
}

当我举个例子在h1标签中使用UniverseBlack。我去 font-family: 'UniverseBlack'，根据我的理解，这应该可以完成工作，但事实并非如此！非常感谢任何输入！

Answer 1

N.B：使用 css 字体扩展名而不是 scss，它可能会解决您的问题。我已经实现了你的字体并且工作得很好。这是我到目前为止所做的。

资产文件夹中的文件结构应该是：

> UniversLTStd-Black.woff
> font.css

在font.css中：

@font-face {
font-family: 'Univers LT Std 75 Black';
font-style: normal;
font-weight: normal;
src: local('Univers LT Std 75 Black'), url('UniversLTStd-Black.woff') format('woff');
}

可以通过两种方式附加此字体。

第一种方式： 你可以添加它 angular.json。然后你必须通过 ng serve

重新启动

第二种方式 将其导入 styles.css。然后就可以正常工作了。

在styles.css中：

@import "../src/assets/fonts/font.css";

然后在任何组件样式中：

 h1 {
font-family: 'Univers LT Std 75 Black';
}

如何在Angular中导入和使用字体？

How to import and use fonts in Angular?

css

fonts

sass

angular