本文详细介绍了HTML中字体的使用，包括字体样式、字体分类、文字大小、小型大写字母以及字体简写属性。重点讲解了Font Awesome的下载与使用，包括如何在网页中引入CSS文件和使用图标示例。此外，还提到了另一款图标字体库iconfont的下载及使用方法。
字体
• 通过font-family可以指定标签中文字使用的字体。
• 例如：
p{font-family:Arial}
上边这行代码指定了p标签中使用名为arial作为字体
• 一般来说只有用户计算机中安装了我们指定的字体时，它才会显示，否则这行代码是没有意义的。
• 通过font-family可以同时指定多个字体。
• 例如：
p{font-family:Arial , Helvetica , sans-serif}
• 如上我实际上指定了三种字体，那么到底使用的是哪个呢？浏览器会优先使用第一个，如果没有找到则使用第二个，以此类推。
• 这里面sans-serif并不是指的具体某一个字体，而是一类字体。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/*
font-face可以将服务器中的字体直接提供给用户去使用（当用户电脑没有安装指定的字体时）
问题：
1.加载速度
2.版权
3.字体格式
*/
@font-face {
/* 指定字体的名字 */
font-family:'myfont' ;
/* 服务器中字体的路径 format("truetype")：指定字体的格式，一般可不写*/
src: url('./font/ZCOOLKuaiLe-Regular.ttf') format("truetype");
}
p{
/*
字体相关的样式
color 用来设置字体颜色
font-size 字体的大小
和font-size相关的单位
em 相当于当前元素的一个font-size
rem 相对于根元素的一个font-size
font-family 字体族（字体的格式）
可选值：
serif 衬线字体
sans-serif 非衬线字体
monospace 等宽字体
- 指定字体的类别，浏览器会自动使用该类别下的字体
- font-family 可以同时指定多个字体，多个字体间使用,隔开
字体生效时优先使用第一个，第一个无法使用则使用第二个 以此类推
Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif
*/
color: blue;
font-size: 40px;
/* font-family: 'Courier New'（有引号是因为中间有空格）, Courier, monospace; */
font-family: myfont;
}
</style>
</head>
<body>
<p>
今天天气真不错，Hello Hello How are you！
</p>
</body>
</html>
字体的样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.p1{
/*设置字体颜色,使用color来设置文字的颜色*/
color: red;
/*
* 设置文字的大小,浏览器中一般默认的文字大小都是16px
font-size设置的并不是文字本身的大小，
在页面中，每个文字都是处在一个看不见的框中的
我们设置的font-size实际上是设置格的高度，并不是字体的大小
一般情况下文字都要比这个格要小一些，也有时会比格大，
根据字体的不同，显示效果也不同
* */
font-size: 30px;
/*
* 通过font-family可以指定文字的字体
* 当采用某种字体时，如果浏览器支持则使用该字体，
* 如果字体不支持，则使用默认字体
* 该样式可以同时指定多个字体，多个字体之间使用,分开
* 当采用多个字体时，浏览器会优先使用前边的字体，
* 如果前边没有在尝试下一个
*/
/*font-family: arial , 微软雅黑;*/
/*
* 浏览器使用的字体默认就是计算机中的字体，
* 如果计算机中有，则使用，如果没有就不用
*
* 在开发中，如果字体太奇怪，用的太少了，尽量不要使用，有可能用户的电脑没有，就不能达到想要的效果。
*/
/*
font-family: 华文彩云 , arial , 微软雅黑;
也可以设置face表示字体，例如face="仿宋"
*/
font-family: "curlz mt";
}
</style>
</head>
<body>
<p class="p1">
我是一个p标签，ABCDEFGabcdefg
</p>
</body>
</html>
字体的其他样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.p1{
color: red;
font-size: 30px;
font-family: "微软雅黑";
/*
* font-style可以用来设置文字的斜体
* - 可选值：
* normal，默认值，文字正常显示
* italic 文字会以斜体显示
* oblique 文字会以倾斜的效果显示
* - 大部分浏览器都不会对倾斜和斜体做区分，
* 也就是说我们设置italic和oblique它们的效果往往是一样的
* - 一般我们只会使用italic
*/
font-style: italic;
/*
* font-weight可以用来设置文本的加粗效果：
* 可选值：
* normal，默认值，文字正常显示
* bold，文字加粗显示
*
* 该样式也可以指定100-900之间的9个值，
* 但是由于用户的计算机往往没有这么多级别的字体，所以达到我们想要的效果
* 也就是200有可能比100粗，300有可能比200粗，但是也可能是一样的
*/
font-weight: bold;
/*
* font-variant可以用来设置小型大写字母
* 可选值：
* normal，默认值，文字正常显示
* small-caps 文本以小型大写字母显示
*
* 小型大写字母：
* 将所有的字母都以大写形式显示，但是小写字母的大写，
* 要比大写字母的大小小一些。
*/
font-variant: small-caps ;
}
.p2{
/*设置一个文字大小*/
font-size: 50px;
/*设置一个字体*/
font-family: 华文彩云;
/*设置文字斜体*/
font-style: italic;
/*设置文字的加粗*/
font-weight: bold;
/*设置一个小型大写字母*/
font-variant: small-caps;
}
.p3{
/*
* 在CSS中还为我们提供了一个样式叫font，
* 使用该样式可以同时设置字体相关的所有样式,
* 可以将字体的样式的值，统一写在font样式中，不同的值之间使用空格隔开
*
* 使用font设置字体样式时，斜体 加粗 小大字母，没有顺序要求，甚至可写可不写，
* 如果不写则使用默认值，但是要求文字的大小和字体必须写，而且字体必须是最后一个样式
* 大小必须是倒数第二个样式
*
* 实际上使用简写属性也会有一个比较好的性能
*/
font: small-caps bold italic 60px "微软雅黑";
}
</style>
</head>
<body>
<p class="p3">我是一段文字，ABCDEFGabcdefg</p>
<p class="p1">我是一段文字，ABCDEFGabcdefg</p>
<p class="p2">我是一段文字，ABCDEFGabcdefg</p>
</body>
</html>
字体分类
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>字体的分类</title>
<style type="text/css">
p{
font-family: arial , 微软雅黑 , 华文彩云 , serif;
}
</style>
</head>
<body>
<!--
在网页中将字体分成5大类：
serif（衬线字体）
sans-serif（非衬线字体）
monospace （等宽字体）
cursive （草书字体）
fantasy （虚幻字体）
以上这些分类都是一些大的分类，并没有涉及具体的类型，
如果将字体指定为这些格式，浏览器会自己选择指定类型的字体。
一般会将字体的大分类，指定为font-family中的最后一个字体
-->
<p style="font-size: 50px; font-family: serif;">衬线字体：我是一段文字，ABCDEFGabcdefg</p>
<p style="font-size: 50px; font-family: sans-serif;">非衬线字体：我是一段文字，ABCDEFGabcdefg</p>
<p style="font-size: 50px; font-family: monospace;">等宽字体：我是一段文字，IHABCDEFGabcdefg</p>
<p style="font-size: 50px; font-family: cursive;">草书字体：我是一段文字，ABCDEFGabcdefg</p>
<p style="font-size: 50px; font-family: fantasy;">虚幻字体：我是一段文字，ABCDEFGabcdefg</p>
</body>
</html>
斜体和粗体
font-style用来指定文本的斜体。
- – 指定斜体：
font-style:italic - – 指定非斜体：
font-style:normal
font-weight用来指定文本的粗体。
-
– 指定粗体：
font-weight:bold -
– 指定非粗体：
font-weight:normal
文字大小
font-size用来指定文字的大小。
小型大写字母
• font-variant属性可以将字母类型设置为小型大写。在该样式中，字母看起来像是稍微缩小了尺寸的大写字母。
– font-variant:small-caps
<p style=" font-variant: small-caps">abcABC</p>
<!-- font-variant可以用来设置小型大写字母
* 可选值：
* normal，默认值，文字正常显示
* small-caps 文本以小型大写字母显示
-->
字体的简写属性
• font可以一次性同时设置多个字体的样式。
• 语法：
– font:加粗 斜体 小型大写 大小/行高 字体
• 这里前边几个加粗、斜体和小型大写的顺序无所谓，也可以不写，但是大小和字体必须写且必须写到后两个。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
border: 1px red solid;
/*
font 可以设置字体相关的所有属性
语法：
font: 字体大小/行高 字体族
行高 可以省略不写 如果不写使用默认值
*/
/* font-size: 50px;
font-family: 'Times New Roman', Times, serif; */
font-weight: bold;
/* font: 50px/2 微软雅黑, 'Times New Roman', Times, serif; */
/* font: normal normal 50px/2 微软雅黑, 'Times New Roman', Times, serif; */
font: bold italic 50px/2 微软雅黑, 'Times New Roman', Times, serif;
/* font:50px 'Times New Roman', Times, serif;
line-height: 2; */
/* font-size: 50px; */
/* font-weight 字重 字体的加粗
可选值：
normal 默认值 不加粗
bold 加粗
100-900 九个级别（没什么用，因为计算机字体基本上没有这么多字体，基本上资源normal和bold，设置100~500粗细是一样的）
font-style 字体的风格
normal 正常的
italic 斜体
*/
/* font-weight: bold; */
/* font-weight: 500;
font-style: italic; */
}
</style>
</head>
<body>
<div>今天天气真不错 Hello hello</div>
</body>
</html>
图标字体Font Awesome
Font Awesome的下载
1.我们前往官网：https://fontawesome.com/ ，我们下载免费版
2.点击“download”
3.点击下载font awesome免费版为网站
4.解压目录如下：
5.将css和webfonts目录复制到你的项目当中，注意这两个文件夹要放在同一级目录下，我们新建一个目录将他们复制过去即可
6.之后在网页中引入css文件夹里的all.css（代码未经过压缩的）文件，引入all.min.css（代码压缩过的）也可，此处我们为了学习，引入未被压缩过的all.css文件
7.之后我们就可以在网页中使用Font Awesome图标字体
Font Awesome的使用示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./fa/css/all.css">
</head>
<body>
<!--
图标字体（iconfont）
- 在网页中经常需要使用一些图标，可以通过图片来引入图标
但是图片大小本身比较大，并且非常的不灵活
- 所以在使用图标时，我们还可以将图标直接设置为字体，
然后通过font-face的形式来对字体进行引入
- 这样我们就可以通过使用字体的形式来使用图标
fontawesome 使用步骤
1.下载 https://fontawesome.com/
2.解压
3.将css和webfonts移动到项目中
4.将all.css引入到网页中
5.使用图标字体
第一种方法：
- 直接通过类名来使用图标字体,fas和fab这两大风格类的图标是免费的，其他还有fal、far、fad、fa 后面接的是具体图标的类名
class="fas fa-bell"
class="fab fa-accessible-icon"
-->
<i class="fas fa-bell" style="font-size:80px; color:red;"></i>
<i class="fas fa-bell-slash"></i>
<i class="fab fa-accessible-icon"></i>
<i class="fas fa-otter" style="font-size: 160px; color:green;"></i>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./fa/css/all.css">
<style>
li{
list-style: none;
}
li::before{
/* 第二种方法：
通过伪元素来设置图标字体
1.找到要设置图标的元素通过before或after选中
2.在content中设置字体的编码
3.设置字体的样式(在引入的all.css文件中找)
fab
font-family: 'Font Awesome 5 Brands';
fas
font-family: 'Font Awesome 5 Free';
font-weight: 900;
*/
/*注意要加\*/
content: '\f1b0';
/* font-family: 'Font Awesome 5 Brands'; */
font-family: 'Font Awesome 5 Free';
font-weight: 900;
color: blue;
margin-right: 10px;
}
</style>
</head>
<body>
<!-- <i class="fas fa-cat"></i> -->
<ul>
<li>锄禾日当午</li>
<li>汗滴禾下土</li>
<li>谁知盘中餐</li>
<li>粒粒皆辛苦</li>
</ul>
<!--
第三种方法：
通过实体来使用图标字体：
&#x图标的编码;
-->
<span class="fas"></span>
</body>
</html>
更多使用和图标类名请查看官网：https://fontawesome.com/v5.15/icons?d=gallery&p=2
图标字体iconfont
1.我们到iconfont官网：https://www.iconfont.cn/ 选择想要的图标进行添加入库
2.当我们选好图标之后，点击购物车
3.我们可以添加至项目，或者直接下载代码或素材
4.此处我们点击添加至项目，需要我们先创建一个项目
5.之后就可在项目中管理
6.我们选择“下载至本地”
7.解压目录如下：
8.我们可以在demo_index.html中查看具体字体图标使用方法，然后我们直接将整个文件夹复制到我们的项目中（demo.css和demo_index.html可以删除）
9.之后在网页中引入iconfont.css即可使用
10.示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!--引入iconfont下载后解压的文件-->
<link rel="stylesheet" href="./iconfont/iconfont.css">
<style>
i.iconfont{
font-size: 100px;
}
/*第三种方法：通过伪元素，实体在下载后的html文件中去找（复制&#x之后的元素），注意加\*/
p::before{
content: '\e625';
font-family: 'iconfont';
font-size: 100px;
}
</style>
</head>
<body>
<!--第一种方法：通过实体，代码在下载后的html文件中去找-->
<i class="iconfont"></i>
<i class="iconfont"></i>
<i class="iconfont"></i>
<!--第二种方法：通过类名，类名在下载后的html文件中去找-->
<i class="iconfont icon-qitalaji"></i>
<p>Hello</p>
</body>
</html>
喜欢请关注我
至此，我们的HTML字体以及图标字体iconfont、Font Awesomed的使用就讲解完毕了。喜欢我的话可以关注我的微信公众号 我爱学习呀嘻嘻 ，不定期分享各类资源哦。
扫一扫
1136
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
