CSS字体属性详解：控制文字样式与布局-CSDN博客

本文详细解读了CSS中的字体属性，包括font-family选择字体、font-size调整字号、font-style倾斜控制、font-variant变体设定和font-weight粗细调整。同时介绍了word-spacing和letter-spacing间距设置，以及text-align对齐、text-indent缩进、line-height行高和text-decoration装饰技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

字体属性

字体属性用来控制网页文字的显示方式，控制文字的大小，粗细，使用字体的类型等，CSS中文字属性包括font,font-family,font-size,font-style,font-variant和font-weight等。

font-family属性

和它的中文意思一样，表示的是“一个字体家族”。每种字体之间用逗号隔开，在浏览器不支持第一种字体时，就会显示后面的字体，一次类推。如果全都不支持，则会显示浏览器默认的字体。在使用字体和字体族的时候如果字体之间有空格，则要加上双引号。

<style>
h1{
font-family: "微软雅黑", "仿宋";
}
</style>

font-size属性

该属性是用来控制文字的大小，取值有4种——绝对大小、相对大小、长度值、百分数，该属性的默认是medium。

绝对大小就是用户给定多大的值就是多大的值，相对大小就是相对于上一级元素的大小，smaller和larger分别表示比上一级元素小一号和大一号。

百分比大小就是比现在默认的大小大多少。

<!DOCTYPE html>
<html>
    <meta charset="utf-8">
    <body>
        <div style="font-size: 18pt;">容器18pt
        <p style="font-size: larger;">larger大小</p>
        <p style="font-size: smaller;">smaller大小</p>
        <p style="font-size: medium;">medium</p>
        <p style="font-size: samll;">small</p>
        <p style="font-size: x-small;">x-small</p>
        <p style="font-size: xx-small;">xx-small</p>
        <p style="font-size: 30pt;">指定大小</p>
        </div>
    </body>
</html>

font-style属性

该属性用来控制文字的倾斜，其值包括normal、italic和oblique3种，默认是normal，其他两种都是字体倾斜，

font-variant属性

该属性用于在浏览器中显式指定元素的字体变体，

font-weight属性

该属性用来控制文字的粗细，属性值有normal、bold、bolider和lighter。细心的同学已经发现后面两个是比较级单词，则表示相对于上一级的更粗或更细。

font属性可以一次性设置前面的各种字体属性，用空格隔开，属性值的顺序是font-weight、font-variant、 font-style、font-size、font-family。

文本属性

CSS中文本属性包括word-spacing、letter-spacing、text-align、text-indent、line-height、text-decoration、text-transform.。

word-spacing、letter-spacing属性

前者用来设置单词间的间隔，可以自己定。后者决定字符间隔，取值可以默认也剋以自己定。可以有负值。

text-align属性指定元素的对其方式。

text-indent属性指定元素的首行缩进。

line-height属性指定元素的行间距。

text-decoration属性是对特定的元素进行修饰

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            body{
                background-color: #ccc;
            }
            .type1{
                letter-spacing: 50px;
            }
            .type2{
                line-height: 2000%;
            }
            h2{
                text-align: center;
            }
            .type4{
                text-transform: capitalize;
            }
            .type5,p{
                text-indent: 2em;
            }
            .type6{
                font-size: 24px;
                text-shadow: 20px,20px,20px,#ff0000;
            }
        </style>
    </head>
    <body>
        <h2>神王盖伦</h2>
        <p>大宝剑
            <div class="type2 type1">很多卡刷道具卡打卡打赏技术的股份合计多少
                十九分十九的开发
            </div>
            <div class="type5">式咖啡机速度加快分解速度放缓的数据库上的看见反函数
                复活节快速导航反馈
            </div>
            .............................................................
        <p>圣诞节客户
            <div class="type1">卡莎看见傻傻的就卡死的回家咯撒大大撒卡哈可接受的卡刷点卡
            爱上打卡机圣诞卡的
            </div>
                *********************************************************
        <p>啥考试
            <div class="type5">士大夫艰苦就卡死的的的哈萨克的哈卡斯
                爱上电话卡技术大会
            </div>
            <div class="type6 type4">sfuios,dfosudofisio,fusdofosidfuso,dfoosidfuiosfiosdfiosdifo
                士大夫撒旦
            </div>
    </body>
</html>