CSS字体的字体系列，大小，粗细，和样式

最新推荐文章于 2023-03-26 20:30:46 发布

悠然少年心

最新推荐文章于 2023-03-26 20:30:46 发布

阅读量659

点赞数

分类专栏：前端 html

本文链接：https://blog.csdn.net/qq_44116353/article/details/114956038

版权

前端同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

html

13 篇文章 0 订阅

订阅专栏

字体属性
font-family 字体系列

<style>
    body {
        font-family: 宋体, 'Microsoft yaHei'
    }
</style>

<body>
    <p>芜湖起飞</p>
    <p>芜湖南桐</p>
</body>

多个字体之间用逗号隔开
如果字体中间有空格字体要打引号
不是双引号

一般字体使用微软雅黑，一般吧字体写在body里面按顺序使用，比如电脑没有宋体就会使用下一个微软雅黑如果都没有就使用默认的字体

font-size指定字体大小
font-size： px;

<style>
    body {
        font-size: 16px;
    }

    h4 {
        font-size: 20px;

    }
</style>

<body>
    <!-- 标题标签的文字大小一般需要单独设置比较特殊 -->
    <h4>芜湖大司马</h4>
    <p>芜湖起飞</p>
    <p>芜湖南桐</p>
</body>

font-weight一般用number表示后面没有单位

<style>

    .bold{
        font-weight: 700;
    }
    h4{
        font-weight: 400;
    }
</style>

想让文字变细就用400=normal 加粗用700bold

字体样式

<style>
    em {
        font-style: normal;
        /* 变回来 一般都使用这个吧EM倾斜字体变成正常的 */
    }

    p {
        font-style: italic;
        /* 变成倾斜字体 */
    }
</style>

<body>
    <p>芜湖起飞</p>
    <em>倾斜字体</em>
</body>

芜湖起飞

倾斜字体

复合样式简写

<style>
    div {

        /* font: font-style font-weight font-size font-famliy;
        这个属性不能颠倒必须是这个 不要的属性可以省略
        但是font-size 和font-family不能省略 */
        font: normal 700 16px Microsoft yahei;

    }
</style>

<body>
    <div>三生三世十里桃花</div>
</body>