• 有问题请联系QQ:2374146085
  • 有问题请联系QQ:2374146085

css字体属性

1年前 (2021-07-29) 1045次浏览 已收录 0个评论

字体系列

  • 如果有多个单词组成的字体,要对它加引号。
  • 样式中可以定义多个字体,浏览器会根据定义好的顺序进行选择,如果用户没有安装第一个字体包,就会依次选择下一个字体来尝试。
  • 字体一般定义在body标签中,网页全部内容实用该字体。
<!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>
        h2{
        font-family:'微软雅黑';
    }
    h3{
        font-family: Microsoft YaHei;
    }
    h4{
        font-family: 'Times New Roman', Times, serif;
    }
    </style>
</head>
<body>
    <h2>我是宋体</h2>
    <h3>我也是微软雅黑</h3>
    <h4>依次选择用户已经安装好的字体</h4>
</body>
</html>
结果演示

字体大小

  • body里的样式对标题标签和链接标签不起作用,需要单独设置样式
<!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>
        body{
            font-size: 16px;
        }
        h1{
            font-size: 20px;
        }
    </style>
</head>
<body>
    <h1>标题</h1>
    <p>测试</p>
</body>
</html>
结果演示

字体粗细

<!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>
        .bo{
            font-weight: bold;
        }
        .bo2{
            font-weight: 900;/*常用*/
        }
        h2{
            font-weight: 400;
            /*
            400等价于normal,都是正常粗细
            font-weight:normal
            */
        }
    </style>
</head>
<body>
    <h2>不加粗</h2>
    <p>我很正常</p>
    <p class="bo">我加粗啦</p>
    <strong>我也加粗啦</strong>
    <p class="bo2">我通过改变数值变粗细</p>
</html>
结果演示

文字样式

属性值
作用
normal
默认值,浏览器会显示标准的字体样式
italic
浏览器会显示斜体的字体样式
<!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>
        p{
            font-style: italic;
        }
    </style>
</head>
<body>
    <p>我是斜体</p>
</body>
</html>
结果演示

 


渣渣龙, 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:css字体属性
喜欢 (0)

您必须 登录 才能发表评论!