CSS学习71~76（CSS字体属性）

前进的北极熊

已于 2022-09-09 22:47:54 修改

阅读量160

点赞数

分类专栏： HTML&CSS 文章标签： css html 学习

于 2022-09-09 09:35:38 首次发布

本文链接：https://blog.csdn.net/m0_57809042/article/details/126776595

版权

HTML&CSS 专栏收录该内容

25 篇文章 1 订阅

订阅专栏

3 CSS字体属性

CSS Fonts(字体)属性用于定义字体系列、大小、粗细、和文字样式（如斜体）。

3.1 字体系列

CSS使用font-family属性定义文本的字体系列。

各种字体之间必须使用英文状态下的逗号隔开
一般情况下，如果有空格隔开的多个单词组成的字体加引号.
尽量使用系统默认自带字体,保证在任何用户的浏览器中都能正确显示
最常见的几个字体 : body {font-family: ‘Microsoft YaHei’ , tahoma, arial,‘Hiragino Sans GB’;}
如果有多种字体，从前往后找到有的字体

<!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: '微软雅黑';
        }
        p {
            /* font-family: 'Microsoft YaHei', Arial, Helvetica, sans-serif; */
            font-family: 'Times New Roman', Times, serif;
        }
    </style>
</head>
<body>
    <h2>pink的秘密</h2>
    <p>那一抹众人中最漂亮的颜色，</p>
    <p>优雅，淡然，又那么心中清澈。</p>
    <p>前端总是伴随着困难和犯错，</p>
    <p>静心，坦然，攻克一个又一个。</p>
    <p>拼死也要克服它，</p>
    <p>这是pink的秘密也是老师最终的嘱托。</p>
</body>
</html>

3.2 字体大小

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

p {
    font-size: 20px;
}

px(像素)大小是我们网页的最常用的单位
谷歌浏览器默认的文字大小为16px
不同浏览器可能默认显示的字号大小不一致,我们尽量给一个明确值大小,不要默认大小
可以给body指定整个页面文字的大小

3.3 字体粗细

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

p {
    font-weight: bold;
}

在这里插入图片描述

学会让加粗标签（比如h和strong等）不加粗，或者其他标签加粗。

eg:

<!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>
        .bold {
            /* font-weight: bold; */
            /* 这个700的后面不要跟单位 等价于 bold 都是加粗的效果 */
            /* 实际开发中，我们更提倡使用数字 表示加粗或者变细 */
            font-weight: 700;
        }
        h2 {
            font-weight: 400;
            /* 等价于font-weight: normal; */
        }
    </style>
</head>
<body>
    <h2>pink的秘密</h2>
    <p>那一抹众人中最漂亮的颜色，</p>
    <p>优雅，淡然，又那么心中清澈。</p>
    <p>前端总是伴随着困难和犯错，</p>
    <p>静心，坦然，攻克一个又一个。</p>
    <p class="bold">拼死也要克服它，</p>
    <p>这是pink的秘密也是老师最终的嘱托。</p>
</body>
</html>

3.4 文字样式

CSS使用font-style属性设置文本的风格。

p {
    font-style: normal;
}

在这里插入图片描述

注意：平时我们很少给文字加斜体，反而要给斜体标签（em, i）改为不倾斜字体。

eg:

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

3.5 字体复合属性

字体属性可以把以上文字样式综合来写，这样可以更节约代码。

body {
    font: font-style font-weight font-size/line-height  font family;
}

使用font属性时,必须按上面语法格式中的顺序书写,不能更换顺序,并且各个属性间以空格隔开
不需要设置的属性可以省略(取默认值) , 但必须保留font- size和font family属性,否则font属性将不起作用

eg:

<!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>13-CSS属性之复合属性</title>
    <style>
        /* 想要div文字倾斜 加粗 字号设置为16像素 并且是 微软雅黑 */
        div {
            /* font-style: italic;
            font-weight: 700;
            font-size: 16px;
            font-family: 'Microsoft YaHei'; */
            /* 复合属性：简写的方式 */
            /* font: font-style font-weight font-size/line-height  font family  */
            /* font: italic 700 16px 'Microsoft YaHei'; */
            font: 20px 'Microsoft YaHei'
        }
        </style>
</head>
<body>
    <div>三生三世十里桃花，一心一意百行代码</div>
</body>
</html>

3.6 字体属性总结

在这里插入图片描述

前进的北极熊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习71~76（CSS字体属性）

CSS Fonts(字体)属性用于定义、大小、粗细、和文字样式（如斜体）。CSS使用属性定义文本的字体系列。3.2 字体大小CSS使用属性定义字体大小。px(像素)大小是我们网页的最常用的单位谷歌浏览器默认的文字大小为16px不同浏览器可能默认显示的字号大小不一致,我们尽量给一个明确值大小,不要默认大小可以给body指定整个页面文字的大小3.3 字体粗细CSS使用属性设置文本字体的粗细。eg:3.4 文字样式CSS使用属性设置文本的风格。：平时我们很少给文字加斜体，反而要给斜体标
复制链接

扫一扫