作为前端开发人员在Angular JS中构建项目时使用自定义字体可能会很棘手。有时候如果开发者想要把选择的字体添加到项目中将不得不把它导入到现有的代码中。PSKendo UI致力于新的开发来满足不断变化的需求通过React框架的Kendo UI JavaScript封装来支持React Javascript框架。Kendo UI for Angular是专用于Angular开发的专业级Angular组件telerik致力于提供纯粹的高性能Angular UI组件无需任何jQuery依赖关系。先决条件Node.jsNpmStep 1创建一个简单的Angular项目首先在命令提示符中使用以下命令来安装Angularnpm install -g angular/cliSet-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned然后使用以下命令创建新项目ng new my-app使用实例运行应用程序。cd my-appng serve --open应用程序应该在浏览器中自动打开URL: http://localhost:4200/。应该是这样的Step 2添加自定义HTML代码Angular应用的主页是安装它时附带的默认主页要更新HTML代码请打开src文件夹中的index.html文件。现在用下面的代码替换现有的代码!doctype html html langen head meta charsetutf-8 titleMyApp/title base href/ meta nameviewport contentwidthdevice-width, initial-scale1 link relicon typeimage/x-icon hreffavicon.ico /head body h1hello/h1 h2this is my angular app/h2 pi need to add some new custom font to the project/p /body /html如果重启服务器进入http://localhost:4200/页面它应该会显示如下页面Step 3下载免费字体要添加自定义字体我们首先需要下载它。可以从任何地方下载字体但我们使用谷歌字体因为它们是免费和开源的。Step 4将字体导入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; }该字体现在将在组件中使用。向项目中添加更多字体首先将字体导入并添加到源文件夹中。现在添加了两个新的font-face规则来导入src/style.css文件夹中的字体。font-face { font-family: Fontone; src: url(src/font/Poppins.ttf); } font-face { font-family: Fonttwo; src: url(src/font/Smooch.ttf); }然后改变src/index.html文件中h1和h2标签的字体h1{ font-family: Fontone; } h2{ font-family: Fonttwo; }现在如果你重新加载页面你应该会看到下面的输出