二.CSS字体属性

最新推荐文章于 2024-07-12 14:38:32 发布

belike..

最新推荐文章于 2024-07-12 14:38:32 发布

阅读量140

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/weixin_47971713/article/details/115320472

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一.字体系列

1.字体设置在这里插入图片描述

<body>
    <h2>最是人间留不住</h2>
    <p>朱颜辞镜</p>
    <p>花辞树</p>
</body>

在这里插入图片描述

2.字体大小
CSS使用font-size属性定义字体大小

p{
  font-size : 20px;
}

在这里插入图片描述

 <style>
        body {
            font-size: 16px;
        }

        /* }body里面p标签 */
        /* 标题标签比较特殊,需要单独的指定文字的大小 */
        h2 {
            font-size: 16px;
        }
    </style>
</head>

<body>
    <h2>最是人间留不住</h2>
    <p>朱颜辞镜</p>
    <p>花辞树</p>
</body>

他们现在的字体都是一样的啦,就是作为标题,被加粗了呢
在这里插入图片描述
3.字体粗细

<style>
        body {
            font-size: 16px;
        }

        /* }body里面p标签 */
        /* 标题标签比较特殊,需要单独的指定文字的大小 */
        h2 {
            font-size: 16px;
            font-weight: 400;
            font-size: normal;
        }

        .bold {
            /* font-weight: bold; */
            font-weight: 700;
            /* 实际开发中,使用数字实现加粗 */
        }
    </style>
</head>
<!-- 文本类容 -->

<body>
    <h2 class=".h2">最是人间留不住</h2>
    <p class="bold">朱颜辞镜</p>
    <p>花辞树</p>
</body>

在这里插入图片描述

400就是字体变细,700是字体变粗
4.字体样式

p{
  font-style:normal;
 }

在这里插入图片描述
这里就很奇妙呀,明明放了一个P让它变成斜的,现在可好,字体很端正,想让变端正的现在很倾斜…

<style>
      p {
            font-size: italic;
        }

        em {
            /* 让倾斜的字体不再倾斜 */
            font-size: normal;
        }
</style>
<body>
   <p>这是上课时候的你</p>
   <em>下课后的你</em>
</body>

在这里插入图片描述
5.字体综合样式

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体属性,综合案例</title>
    <style>
        /* 将<div>标签变倾斜 加粗 字号设置18像素 楷体 */
        div {
            font-style: italic;
            font-size: 18px;
            font-family: '楷体';
            font-weight: 700;
        }
    </style>
</head>

<body>
    <div>何时仗尔看南雪,</div>
    <div>我与梅花共白头.</div>
</body>

在这里插入图片描述
上面要写四个font属性,是不是很麻烦呀,现在有一个节省代码的方法,如下:

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体属性,综合案例</title>
    <style>
        /* 将<div>标签变倾斜 加粗 字号设置18像素 楷体 */
        div {
            /* 就是下面这个,很重要!!!,顺序不可以变化,最少要写两个属性,size and family */
            font: font-style font-weight font-size/line-height font-family;
            font: italic 700 30px '楷体'
        }
    </style>
</head>

<body>
    <div>山有木兮木有枝,</div>
    <div>心悦君兮君不知.</div>
</body>