如何设置HTML 页⾯中⽂本的字体
字体属性介绍
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 标签的作⽤就是将⽂本的字体设置为斜体，⾃带的功能。有点啰嗦了哈，给初学者普及下细节哦。代码块结果图
注意：使⽤font-style 属性可以将i 标签⾃带的斜体功能给去除掉，如：下⾯关键代码哦。
使⽤font-style 属性设置⽂本的字体为斜体。
代码块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
fontweight属性bold<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> <style>
i{
font-style: normal;
}
</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 字体设置的缩写缩写属性能够同时给⽂本设置斜体、加粗、⼤⼩、字体，每⼀个值之间要使⽤逗号隔开，并且⼀定要有顺序。
让我们进⼊font 字体设置缩写实践，实践内容如：将p 标签中⽂本设置为斜体、加粗、⼤⼩、字体。代码块
结果图font-family: "微软雅⿊";
<!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>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论