您的位置：首页 > Web前端 > HTML

如何设置HTML页面中文本的字体

2019-11-19 00:09 2046 查看

字体属性介绍

```
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>

结果图

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航