CSS入门--字体的复合属性

最新推荐文章于 2024-03-28 23:13:15 发布

thorn豆豆

最新推荐文章于 2024-03-28 23:13:15 发布

阅读量877

点赞数

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

本文链接：https://blog.csdn.net/qq_45067479/article/details/109908695

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

CSS入门–字体复合属性的学习

一.字体的复合属性：CSS Fonts属性用于定义字体系列，大小，粗细，文字样式
二.
(1).字体系列：
font-family属性定义文本的字体系列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css字体系列</title>
    <style>
      p {
            font-family: arial,tahoma,"微软雅黑"；

         }

    </style>
</head>
<body>
    <h2>我是本拉豆</h2>
    <p>偶吼吼吼</p>
    <p>哈</p>
    
</body>
</html>

(2).字体的大小：
font-size属性定义字体的大小

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体的大小</title>
    <style>
        body {
            font-size: 30px;
        }
        /* 标题标签比较特殊，需要单独指定文字大小 */
        h2 {
            font-size: 30px;
        }

    </style>
</head>
<body>
    <h2>我是煲仔饭</h2>
    <p>
        你想成为rapstar么？
    </p>
  
</body>
</html>

(3).字体粗细：
font-weight属性定义字体的粗细

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体的粗细</title>
    <style>
        /* 让标题变成正常字体粗细 */
        h3 {
            /* 和font-weight: normal同理，都是让字体变细，变成400 */
            /* 开发时，最好用数字表示粗细，一般400正常，700加粗 */
            font-weight: 400;
        }
        /* 让流泪猫猫加粗 */
        .cry {
            font-weight: 700;
        }

    </style>
</head>
<body>
    <h3>猫猫分为</h3>
    <ul>
        <li> 妙猫猫</li>
        <li class="cry">流泪猫猫</li>
        <li>本拉豆猫猫</li>
        <li>委屈猫猫妙猫猫</li>
    </ul>
</body>
</html>

(4).文字样式：
font-style定义字体的样式

p1{font-style:normal;//默认值
}
p1{font-style:italic;//斜体
}

(5).字体的复合属性：
{font：font-style font-weight font-size/fongt-height font-falily}
其中字体大小，字体系列不可省

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>font属性定义样式的复合属性</title>
    <style>
        body {
            font: italic 700 16px/20px "Microsoft yahei";
        }
    </style>

</head>

<body>
    <p>我想吃榴莲披萨了</p>
    <p>不让我吃</p>
</body>

</html>

thorn豆豆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS入门--字体的复合属性

CSS入门–字体复合属性的学习一.字体的复合属性：CSS Fonts属性用于定义字体系列，大小，粗细，文字样式二.(1).字体系列：font-family属性定义文本的字体系列<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=
复制链接

扫一扫