CSS--字体样式

最新推荐文章于 2023-06-08 14:21:59 发布

浮光跃金.free

最新推荐文章于 2023-06-08 14:21:59 发布

阅读量1.1k

点赞数

文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/qq_52040402/article/details/127289085

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体样式</title>
    <style>
        /* 文字样式 */
        /* 1.字体大小
            属性名:font-size
            取值:数字+px
            谷歌浏览器默认文字大小16px
            单位需要设置,否则无效 */
        p{
            font-size: 30px;
            /* 根据层叠性:后边的属性覆盖前边的属性 */
            color: brown;
            color: blue;
            /* font相关属性的连写 
                font: style weight size 字体; (顺序不能变)
                如果想单独改变连写里边的一些属性,可以在连写后边加上,层叠性
                只能省略前两个属性,省略后为默认值*/
            font: italic 700 40px 楷体;
            font-weight: 300;
        }
        /* 2.字体粗细
            属性名:font-weight
            取值:关键字:normal(正常);bold(加粗)
                 纯数字:100~900整百数
                 400(正常);700(加粗),推荐用数字
            不是所有字体都提供九种粗细,因此部分取值界面中没有变化
            实际开发中以正常,加粗两种取值最多 */
        div{
            font-weight: bold;
        }
        h1{
            font-weight: 400;
        }
        /* 3.字体是否倾斜
            属性名:font-style
            取值:正常:normal
                 倾斜:italic */
        em{
            font-style: italic;
        }
        /* 4.文字字体
            属性名:font-family
            常见取值:具体字体1,具体字体2,具体字体3,字体系列
            渲染规则:(1)从左往右按顺序查找,如果电脑中未安装该字体,则显示下一个字体
                    (2)如果都不支持,此时会根据操作系统,显示最后字体系列的默认字体
            注意点;(1)如果字体名称存在多个单词,推荐使用引号包裹
                    (2)最后一项字体系列不需要引号包裹
                    (3)网页开发时,尽量使用系统常见自带字体,保证不同用户浏览网页都可以正确显示 */
            /* 无衬线字体(sans-serif):网页常用
                衬线字体(serif):报刊书籍
                等宽字体:程序代码编写 */
            /* 如果用户电脑没有安装微软雅黑,就按黑体显示
                如果用户电脑没有安装黑体,就按任意一种非衬线字体系列显示 */
        h3{
            font-family: 微软雅黑,黑体,sans-serif;
        }
        
       
    </style>
</head>
<body>
    <p>7777777</p>
    <div>999999999</div>
    <h1>00000000</h1>
    <em>穆斯林的葬礼</em>
    <h3>天官赐福,百无禁忌</h3>
    <p>不要害怕,也别再惦记,想念的时候就变成一颗星星,月亮会替我用力抱紧你</p>
</body>
</html>