作为后端开发人员，在 AngularJS 中构建项目时使用自定义字体可能会很棘手。 有时，如果开发人员想要将选择的字体添加到项目中，他们必须将其导出到现有代码中。

PS：KendoUI旨在新的发展，以满足不断变化的需求，通过KendoUIJavaScript对React框架的封装来支持ReactJavascript框架。 KendoUIforAngular 是一款致力于 Angular 开发的专业级 Angular 组件。 telerik 的目标是提供纯粹的高性能 AngularUI 组件，不依赖任何 jQuery。

KendoUI官方最新版本免费下载试用、历史版本下载、在线文档和帮助文件下载-huidu.com

先决条件Step1：创建一个简单的Angular项目

首先css 默认字体，在命令提示符中使用以下命令安装 Angular：

npminstall -g@angular/cli

设置 ExecutionPolicy-ScopeCurrentUser-ExecutionPolicyRemoteSigned

然后使用以下命令创建一个新项目：

ngnewmy 应用程序

使用实例来运行应用程序。

cdmy-应用程序

ngserve--打开

应用程序应在浏览器中手动打开 URL::4200/。

它应该看起来像这样：

步骤2：添加自定义HTML代码

Angular 应用程序的主页是安装时附带的默认主页。 要更新 HTML 代码，请打开 src 文件夹中的 index.html 文件。

现在，将现有代码替换为以下内容：

hello
this is my angular app
i need to add some new custom font to the project

如果重新启动服务器并转到 :4200/ 页面，它应该显示以下页面：

第三步：下载免费字体

要添加自定义字体，我们首先需要下载它。 字体可以从任何地方下载，但我们使用 Microsoft 字体css 默认字体，因为它们是免费且开源的。

Step4：将字体导出到Angular项目

为了将字体文件导出到 Angular 项目中，.ttf 文件必须放置在 src/assets 文件夹中。 文件位于正确位置后，可以使用以下步骤将其导出到项目中：

1. 在 src/styles.css 文件中，为导出的字体添加新的 @font-face 规则。 例如：

@font-face {
font-family: 'MyFont';
src: url('../assets/myfont.ttf');
}

注意：将“myfont.ttf”替换为您放置在 src/assets 中的字体文件名。

2. 在将使用该字体的组件中，将导出的字体添加到该组件的样式表中。 例如：

.my-component {
font-family: 'MyFont';
}

该字体现在将在组件中使用。