CSS字体属性之字体系列、字体大小、字体粗细、字体样式以及字体的符合属性（基础详解）

最新推荐文章于 2024-05-31 14:59:34 发布

少年深眸似海^O^

最新推荐文章于 2024-05-31 14:59:34 发布

阅读量928

点赞数 1

文章标签： css 前端 html

本文链接：https://blog.csdn.net/qq_52763599/article/details/128669768

版权

CSS字体属性

CSS字体属性之字体系列、大小、粗细以及文本样式

字体系列

CSS使用font-family用于定义文本的字体系列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      p{
        font-family: "Microsoft YaHei";
      }
      div{
        font-family: "宋体";
      }
    </style>
</head>
<body>
    <p>一切都像刚睡醒的样子，欣欣然张开了眼。</P>
    <div>山朗润起来了，水涨起来了，太阳的脸红起来了。</div>
</body>
</html>

运行结果如下所示：

注意：

1.各种字体必须使用英文状态下的逗号进行隔开；

2.一般情况下，如果有空格隔开的多个单词组成的字体，要加引号；

3.尽量使用默认系统自带字体，可以保证用户的任何浏览器打开都能正确的显示；

字体粗细

P{
    font-weight: normal;
}

属性值	作用
normal	默认值，浏览器会显示标准的字体样式font-style:normal;
italic	浏览器会显示斜体的字体样式

注意：

通常，我们很少给字体加斜体，反而通常会将斜体的字体改为normal;

字体的符合属性

p{
    font: font-style font-weight font-size/line-heighr font-family;
}

这时font符合属性的定义，注意有先后顺序，且属性之间用空格隔开，如若顺序错误，浏览器将会不显示任何效果，但是我们可以省略其中的部分属性，但是必须保留font-size 和 font-family 属性，且有先后顺，否则font属性将不显示效果。

字体属性的总结

属性	表示	注意
font-size	字体大小	常用单位为px像素，一定要跟上单位
font-family	字体	实际开发中按照约定来写字体
font-weight	字体粗细	字体加粗是700或者bold；不加粗是400或者normal；记住数字后面不跟单位
font-style	字体样式	倾斜是italic，不倾斜是normal(最常用)
font	符合属性	属性值有顺序，且用空格隔开；字号和字体必须出现