CSS字体属性

开了个杂货铺

于 2023-02-07 23:43:47 发布

阅读量100

点赞数

分类专栏： css 文章标签： html css 前端

本文链接：https://blog.csdn.net/weixin_46090150/article/details/128927916

版权

css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS中的字体属性，包括如何设置字体家族`font-family`，调整字号`font-size`，控制字体粗细`font-weight`，以及改变字体样式`font-style`。此外，还讲解了如何使用`font`属性进行字体样式的连写，以简化代码。在实际开发中，理解并掌握这些属性能有效提升网页文本的样式控制。

摘要由CSDN通过智能技术生成

文章目录

CSS字体属性

CSS字体属性

字体font-family

p {
     font-family: '宋体', Helvetica, sans-serif;
}

字号font-size

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

/* 标题标签比较特殊，需要单独指定文字大小 */
h2 {
     font-size: 18px;
}

字体粗细font-weight

1.学会让加粗标签（比如 h 和 strong 等) 不加粗，或者其他标签加粗
2.实际开发时，我们更喜欢用数字表示粗细
在这里插入图片描述

.bold {
            /*font-weight: bold;  */
            /* 700后面不要跟单位 等价于bold 都是加粗的效果 */
            /* 实际开发中提倡数字 */
            font-weight: 700;
            
        }
 h2 {
            /* font-weight: normal; 等价于400 */
            font-weight: 400;
            
}

字体样式font-style

p {
            font-style: italic;
        }
        em {
            font-style: normal;
}

字体连写font

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

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

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

<style>
        /* p {
            font-style: italic;
            font-weight: 700;
            font-size: 16px;
            font-family: '宋体';
            复合属性书写：font-style font-weight font-size font-family
        } */
        p {
            font: italic 700 16px 'Microsoft YaHei';
        }
</style>