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

Kontenurban

我正在尝试使用本地字体文件在我的角度项目中使用字体。所以我有一个字体Univers LT,将文件放在assets/fonts与一起fonts.scss文件。然后我在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');
}

例如,当我UniverseBlackh1标签中使用什么时我走了font-family: 'UniverseBlack',在我的理解下,这应该可以完成这项工作,但事实并非如此!任何输入,不胜感激!

拉菲博士

注意:使用css扩展名代替字体,可能会解决您的问题。我已经实现了您的字体,并且效果很好。这是我到目前为止所做的。

资产文件夹中的文件结构应为:

> 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';
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在Material-UI主题中导入和使用自定义字体?

如何在Android Studio中导入字体

如何在Ionic / Angular项目中导入和使用GSAP?

如何在Aurelia中导入和使用RobinHerbots的Inputmask

如何在Python脚本中导入和使用csvkit

如何在vuejs项目中导入和使用luxon?

如何在Angular应用程序中导入PDFMake的自定义字体?

如何在Angular / Angular2 / Angular4应用程序中导入和使用particles.js

如何在 Angular 2+ 和 ES2015 模块中导入和使用 zone.js

当Angular 8中导入了样式表时,如何使用SCSS更改字体颜色?

如何在CSS文件中导入Google Web字体?

如何在 Next JS 中导入自定义字体?

如何在STACKBLITZ JS项目中导入真棒字体?

SCSS:如何在SCSS文件中导入Google字体?

如何在rxjs / angular中导入.refCount()

如何在 Angular 服务中导入图像?

如何在 Angular 中导入 NgbTime?

如何在Vue中导入和导出

如何在Qt for Embedded Linux中查找和使用字体?

如何在Windows Azure Web Apps中发布和使用字体?

角6或7:如何在'@ angular / common / http'中导入RequestOptions和ResponseContentType

如何查找、导入和使用特定字体?

如何在Angular 2 eg中导入非核心npm模块(以使用加密库)?

如何在 Vue 中导入和使用 P5.Sound?

如何在Vue单个文件组件中导入和使用图像?

如何在Objective-C项目中导入和使用Swift Pod框架

如何在 Kotlin/JS 中导入和使用异步 JS 函数?

如何在Django 1.11中导入和使用CSRF令牌?

如何在使用Laravel 6中导入自定义javascript和CSS文件