CSS字体属性总结

最新推荐文章于 2024-04-17 01:42:12 发布

娃哈哈哈哈呀

最新推荐文章于 2024-04-17 01:42:12 发布

阅读量159

点赞数

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

本文链接：https://blog.csdn.net/karlaofsky/article/details/118697432

版权

CSS 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

font-size

用来定义字体大小

单位：px

注意：标题标签比较特殊，需要单独指定文字大小

操作如下：

<!DOCTYPE html>
<html lang="en">
<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>
    body {
    font-size: 16px;
}
/* 标题标签比较特殊，需要单独指定文字大小 */
h2 {
    font-size: 16px;
}

</style>
</head>
<body>
    <h2>静夜思</h2>
    <p>床前看月光</p>
    <p>疑是地上霜</p>
    <p>抬头望山月</p>
    <p>低头思故乡</p>
</body>
</html>

font-family

用来定义文本的字体系列

注意：1.各字体之间必须用英文状态下的逗号隔开

2.有空格隔开的多个单词组成的字体加引号“”

操作如下：

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

<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>css字体属性之字体系列</title>
<style>
    h2 {
        font-family: 'microsoft yahei'；
    }
   p{
        font-family: 'microsoft yahei'；
    }
</style>


</head>

<body>
    <h2>静夜思</h2>
    <p>床前看月光</p>
    <p>疑是地上霜</p>
    <p>抬头望山月</p>
    <p>低头思故乡</p>
</body>

</html>

font-weight

用来设置文本字体的粗细

normal=400（不加粗） bold=700（加粗）数字不加单位

操作如下：

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

<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>
        .bold {
            font-weight: 700;
        }

        h2 {
            font-weight: 400;
        }
    </style>
</head>

<body>
    <h2>静夜思</h2>
    <p>床前看月光</p>
    <p>疑是地上霜</p>
    <p class="bold">抬头望山月</p>
    <p>低头思故乡</p>
</body>

</html>

font-style

用来设置文本的风格

normal默认值（标准的字）italic(倾斜字体）

操作如下：

<!DOCTYPE html>
<html lang="en">
<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>css 字体属性之文字样式（风格）</title>
<style>
    p {
        font-style: italic;
    }
    em {
        /* 让倾斜的字体不倾斜 */
        font-style: normal;
    }
</style>

</head>
<body>
    <p>上课时候的你</p>
    <em>下课时候的你</em>
</body>
</html>

font

字体连写

顺序：font-style font-weight font-size/line-height font-family

注意：1.字体连写有顺序，不能随意换位置

2.字号和字体必须同时出现

操作如下：

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

<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>css字体属性之复合属性</title>
    <style>
        /* 想要div 文字变倾斜 加粗 字号设置为16像素 并且是微软雅黑 */
        div {
            /* 复合属性：简写的方式 节约代码*/
            /* font: font-style font-weight font-size/line-height font-family; */
            font: italic 700 16px 'microsoft yahei';
        }
    </style>

</head>

<body>
    <div>一直陪着陈万祥</div>
</body>

</html>

娃哈哈哈哈呀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS字体属性总结

font-size用来定义字体大小单位：px注意：标题标签比较特殊，需要单独指定文字大小操作如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi.
复制链接

扫一扫