如何设置HTML页面中文本的字体
微笑是最初的信仰 人气:1字体属性介绍
CSS
中的字体属性是干什么的呢?字体字体肯定和字体有关咯,就是设置HTML
页面中文本的字体,
CSS
中常用的字体属性有几种呢,笔者给大家梳理了下,比较常用的一共有5
种,今天我们就看看这5
种能给文本的字体带来什么效果呢。CSS
字体属性定义文本的字体系列、大小、加粗、风格(如斜体)。- 在
CSS
中常用的字体属性有5种,如:font-style
、font-weight
、font-size
、font-family
、font
。
font-style设置斜体
font-style
属性主要是给文本设置斜体用的。
font-style属性使用表
值 | 描述 |
---|---|
normal | 将斜体字体恢复正常。 |
italic | 设置字体为斜体。 |
- 让我们进入
font-style
属性的实践,实践内容如:将HTML
页面中的p
标签的文本字体设置为斜体。 假如我们不使用
font-style
属性,可不可将p标签中的文本字体设置为斜体呢?,如果大家学习HTML
还可以,应该知道在HTML当中有一个i
标签,i
标签的作用就是将文本的字体设置为斜体,自带的功能。
有点啰嗦了哈,给初学者普及下细节哦。代码块
<!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>设置字体为斜体</title>
</head>
<body>
<p>成功不是打败别人,而是改变自己。</p>
<p><i>成功不是打败别人,而是改变自己。</i></p>
</body>
</html>
结果图
注意:使用
font-style
属性可以将i
标签自带的斜体功能给去除掉,如:下面关键代码哦。
<style>
i{
font-style: normal;
}
</style>
- 使用
font-style
属性设置文本的字体为斜体。 代码块
<!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>设置字体为斜体</title>
</head>
<style>
p{
font-style: italic;
}
</style>
<body>
<p>成功不是打败别人,而是改变自己。</p>
</body>
</html>
结果图
font-weight设置字体粗细
font-weight
属性是用来设置文本的字体粗细。
font-weight属性说明表
属性值 | 描述 |
---|---|
normal | 将文本的粗细恢复为正常。 |
bold | 字体加粗。 |
100到900 | 字体加粗 |
- 让我们进入
font-weight
属性实践,内容将HTML页面中的p
标签文本字体加粗,笔者使用class
属性值为.box
将第一个p
标签文本字体加粗为900
,为什么用class
属性值为.box
呢,方便初学者理解,其余的都是一样的,就不过多的说明了。 代码块
<!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>设置字体粗细</title>
</head>
<style>
.box{
font-weight:900;
}
</style>
<body>
<p class="box">成功不是打败别人,而是改变自己。</p>
<p>成功不是打败别人,而是改变自己。</p>
</body>
</html>
结果图
font-size设置字体大小
font-size
属性就是设置文本的字体大小,由于font-size
属性值比较单一,就不用font-size
属性说明表解释了,font-size
属性值是px
为单位。- 让我们进入
font-size
属性的实践,实践内容如:将HTML
页面中的p
标签文本字体大小设置为14
像素。 代码块
<!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>设置字体大小</title>
</head>
<style>
p{
font-size: 14px;
}
</style>
<body>
<p>成功不是打败别人,而是改变自己。</p>
</body>
</html>
结果图
font-family 设置字体
font-family
属性给文本的字体设置风格,如:微软雅黑、楷体、宋体....- 园友都看到这里了,相信大家都有了一定的自学能力了,就不多介绍了,直接上关键的代码了,大家可以自己尝试各种字体哈。
代码块
font-family: "微软雅黑";
注意:
font-family
属性可以使用多个如:font-family: "微软雅黑","宋体",....;
细节:一般很特殊的字体,网站上面都是使用图片来表示。是否能显示此字体是根据用户电脑里面是否对应的字体文件,如果没有该文件就会显示为宋体。
font字体设置的缩写
- 缩写属性能够同时给文本设置斜体、加粗、大小、字体,每一个值之间要使用逗号隔开,并且一定要有顺序。
- 让我们进入
font
字体设置缩写实践,实践内容如:将p
标签中文本设置为斜体、加粗、大小、字体。 代码块
<!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>字体设置的缩写</title>
</head>
<style>
p{
font: italic 900 14px "微软雅黑";
}
</style>
<body>
<p>成功不是打败别人,而是改变自己。</p>
</body>
</html>
结果图
加载全部内容