CSS字体属性-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_56807425/article/details/143984914

字号设置

需要书写合法的尺寸单位
可以使用所有的css尺寸单位：px; em; rem; %
当字号没有设置时，表现为16px

<div style="font-size: 30px;">我们1</div>

字体设置

不同的设置系统的默认字体不一样（一般黑体）
设置字体的样式没有生效时，会显示默认字体
可以对一个元素设置多个字体，中间用逗号隔开，浏览器若不支持第一个就会尝试下一个（若都不识别，则显示默认字体）

<div style="font-family: '黑体','宋体';">我们2</div>

文字颜色

需要合法的颜色值：颜色名、16进制、rgb、rgba颜色值（加了透明度）
文字没有设置颜色时，默认为黑色
颜色名可能不被一些浏览器接受，使用16进制和rgb能适用所有的浏览器

    <div style="color: aqua;">我们3</div>
    <div style="color: #0000FF;">我们3</div>
    <div style="color: rgb(122, 223, 123);">我们3</div>
    
    //添加透明度
    <div style="color: rgb(122, 223, 123,0.8);">我们3</div>

在这里插入图片描述

字体粗细

font-weight: 字体的粗度值
1. 数字100-900，无单位，一般设置为成百，数字越大字体越粗
2. bold表示粗细，相当于数值700
3. bolder表示特粗体，比继承样式粗
4. lighter表示特细体比继承字体细
5. normal表示正常粗细，相当于400

    <h4 style="font-weight: normal;">H标题</h4>

在这里插入图片描述

字体风格

设置文字为倾斜的效果
font-style：样式取值
1. italic倾斜的字体
2. oblique中间状态的倾斜，偏倾斜的字体
3. （em标签也可以倾斜）
4. normal表示正常字体，用于重置字体样式

    <div style="font-style: italic;">我们4</div>
    <div style="font-style: oblique;">我们5</div>
    <i>我们5</i>

字体样式重置

将浏览器的元素原有的样式进行改变

            body{
            font-size: 30px;
            font-family: '隶书';
            color: blueviolet;
        }
        b,i{font-style: normal;}
    </style>
</head>

<body>
    <div>小巷人家</div>
    <p>小巷人家</p>
    <b>小巷人家</b>
    <strong>小巷人家</strong>
    <i>小巷人家</i>

在这里插入图片描述