如何在Angular框架中更好地使用字体?一篇文章解答!
作为前端开发人员,在Angular JS中构建项目时,使用自定义字体可能会很棘手。有时候,如果开发者想要把选择的字体添加到项目中,将不得不把它导入到现有的代码中。
PS:Kendo UI致力于新的开发,来满足不断变化的需求,通过React框架的Kendo UI JavaScript封装来支持React Javascript框架。Kendo UI for Angular是专用于Angular开发的专业级Angular组件,telerik致力于提供纯粹的高性能Angular UI组件,无需任何jQuery依赖关系。
Kendo UI R3 2022正式版下载(q技术交流:726377843)
先决条件
- Node.js
- Npm
Step 1:创建一个简单的Angular项目
首先,在命令提示符中使用以下命令来安装Angular:
npm install -g @angular/cli
Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned
然后使用以下命令创建新项目:
ng new my-app
使用实例运行应用程序。
cd my-app
ng serve --open
应用程序应该在浏览器中自动打开URL: http://localhost:4200/。
应该是这样的:
Step 2:添加自定义HTML代码
Angular应用的主页是安装它时附带的默认主页,要更新HTML代码,请打开src文件夹中的index.html文件。
现在,用下面的代码替换现有的代码:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>MyApp</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<h1>hello</h1>
<h2>this is my angular app</h2>
<p>i 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';
}
该字体现在将在组件中使用。
向项目中添加更多字体
首先,将字体导入并添加到源文件夹中。
![](/assets/blank.gif)
现在添加了两个新的@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;
}
现在,如果你重新加载页面,你应该会看到下面的输出:
![](/assets/blank.gif)
如何在Angular框架中更好地使用字体?一篇文章解答!相关推荐
- 如何在Angular Material中制作自定义主题
by Charlee Li 通过李李 如何在Angular Material中制作自定义主题 (How to make a custom theme in Angular Material) Angu ...
- 如何在Angular 10中生成QR码
In this tutorial, we'll learn how to generate QR codes in Angular 10 by building a simple example ap ...
- [DT框架使用教程01]如何在DT框架中创建插件
[DT框架使用教程01]如何在DT框架中创建插件 DT框架代码地址: https://github.com/huifeng-kooboo/DT 由于国内访问速度的问题 也可以访问gitee的地址: h ...
- 如何在vue项目中系统的使用iconfont字体图标
如何在vue项目中系统的使用iconfont字体图标 前言 iconfont的特色 官网注册 在项目中使用的方式 前言 今天聊一下前端iconfont的使用方式,前端的图标经过这些年的发展,变得更系统 ...
- angular 动画_如何在Angular 6中使用动画
angular 动画 介绍 (Introduction) Animation is defined as the transition from an initial state to a final ...
- 如何在React框架中使用ECharts图库表制图?
在前端开发过程中避免不会遇到需要进行数据可视化的操作,但单单通过html5的Canvas实现起来比较麻烦,所以才会用到ECharts,HighCharts,,Chart.js等,今天小千就来教大家如何 ...
- web前端教程之如何在React框架中使用ECharts图库表制图?
在前端开发过程中避免不会遇到需要进行数据可视化的操作,但单单通过html5的Canvas实现起来比较麻烦,所以才会用到ECharts,HighCharts,,Chart.js等,今天小千就来教大家如何 ...
- pigx框架费用_【开源项目】一篇文章搞掂:Pig微服务框架
1.项目开发环境和运行步骤 1.1.项目开发环境 Idea:2018.1.6 Maven:3.5.3 JDK:1.8.0_172 MySQL:5.7.19(之前安装8.0.11会运行失败) Redis ...
- webpack 处理字体_如何在webpack中更优雅的处理字体图标
作者:牟金涛 字体图标是目前前端中最常见的一种静态资源,目前大部分的框架或者网站都会将一些简单的图标合并生成一个字体文件而不是合并成雪碧图.其优点显而易见,字体图标能够更加方便的控制图标的大小和颜色, ...
最新文章
- Uncaught ReferenceError: layer is not defined
- python cmp函数未定义_python用plt画图时,cmp设置方法
- git rebase用法_Git入门实战
- Linux无线网卡的工作模式
- c++和c语言的区别_C与C++傻傻分不清楚,有啥区别,咋用,杂学?
- LeetCode--265. 粉刷房子Ⅱ(动态规划)
- Provisional headers are shown问题
- 华三的stp根桥、端口角色选举规则
- mysql 事务_详解mysql如何做事务
- 2020-11-01
- uipath 收邮件_UIpath 循环读取IMAP邮件,并保存附件
- 如何在Mac上减少PDF文件大小
- 【评测】Attana Cell 200蛋白互作分析仪,实现细胞原位生物大分子互作检测
- 立即收藏!2019前端工程师如何应对裁员潮?
- 短信宝接入发送短信实测 Java
- 如何提高逻辑思维能力
- Mocha Pro 平面跟踪插件
- 2009年必看十大动漫游戏改编电影
- 【一段代码可以进行哪些优化?】
- 安徽审计职业学院计算机成绩,历年安徽审计职业学院计算机软件工程专业毕业论文选题.doc...
热门文章
- android系统视频剪辑app推荐,知乎10w人收藏:玩短视频必装的9款剪辑App(最全)...
- 云帆文档易用性功能设计之文档查阅
- 1055 集体照 (25 分)(详解)
- 行列式的子式、主子式、顺序主子式、余子式、代数余子式
- 手机被偷完整找回方案
- clickhouse建表异常 DB::Exception: No macro ‘shard‘ in config
- markdown语法简明教程(一)
- SNMP介绍, OID及MIB库
- Android检测太极阴,太极阴xposed安卓最新版
- install quantopian时出现No module named pip.req的解决办法