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

时间 2019-11-19

标签如何设置 html 页面文本字体栏目 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标签的做用就是将文本的字体设置为斜体，自带的功能。
有点啰嗦了哈，给初学者普及下细节哦。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>设置字体为斜体</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>

结果图ui

font-weight设置字体粗细

font-weight属性是用来设置文本的字体粗细。

font-weight属性说明表

属性值	描述
normal	将文本的粗细恢复为正常。
bold	字体加粗。
100到900	字体加粗

让咱们进入font-weight属性实践，内容将HTML页面中的p标签文本字体加粗，笔者使用class属性值为.box将第一个p标签文本字体加粗为900，为何用class属性值为.box呢，方便初学者理解，其他的都是同样的，就不过多的说明了。
代码块code

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

结果图orm

font-size设置字体大小

font-size属性就是设置文本的字体大小，因为font-size属性值比较单一，就不用font-size属性说明表解释了，font-size属性值是px为单位。htm
让咱们进入font-size属性的实践，实践内容如：将HTML页面中的p标签文本字体大小设置为14像素。
代码块blog

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

结果图