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

2019-11-19 16:00:58来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

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

字体属性介绍

  • CSS中的字体属性是干什么的呢?字体字体肯定和字体有关咯,就是设置HTML页面中文本的字体,
    CSS中常用的字体属性有几种呢,笔者给大家梳理了下,比较常用的一共有5种,今天我们就看看这5种能给文本的字体带来什么效果呢。
  • CSS 字体属性定义文本的字体系列、大小、加粗、风格(如斜体)。
  • CSS中常用的字体属性有5种,如:font-stylefont-weightfont-sizefont-familyfont

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>
  • 结果图


原文链接:https://www.cnblogs.com/lq0001/p/11886523.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:【前端知识体系】CSS特效实现之Transition和Transform对比

下一篇:如何设计网页字体大小