CSS笔记：CSS 字体属性

最新推荐文章于 2024-04-22 13:50:02 发布

金丝先生

最新推荐文章于 2024-04-22 13:50:02 发布

阅读量113

点赞数

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/weixin_42643070/article/details/118657807

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1、CSS字体属性

CSS Fonts (字体)属性用于定义字体系列、大小、粗细、和文字样式（如斜体）。

1.1字体：font-family

<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>CSS字体属性</title>
    <style>
        h2 {
            font-family: "Microsoft YaHei";
        }
        
        p {
            font-family: "Microsoft YaHei";
        }
    </style>
</head>

<body>
    <h2>断章</h2>
    <p>你站在桥上看风景，</p>
    <p>看风景人在楼上看你。</p>
    <p>明月装饰了你的窗子，</p>
    <p>你装饰了别人的梦。</p>
</body>

各种字体之间必须使用英文状态下的逗号隔开
一般情况下,如果有空格隔开的多个单词组成的字体,加引号.
尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示
最常见的几个字体：body {font-family: ‘Microsoft YaHei’,tahoma,arial,‘Hiragino Sans GB’; }

1.2字体大小：font-size

p { 
 font-size: 20px; 
}

1.3字体粗细：font-weight

font-weight的属性值：normal(默认值不加粗)、bold(粗体)、100-900(400等同于normal,700等同于bold)

p { 
 font-weight: bold; 
}

例子：

<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>
        /* font-weight的属性值：normal(默认值不加粗)、bold(粗体)、100-900(400等同于normal,700等同于bold) */
        
        h2 {
            font-weight: bold;
        }
        
        .wei {
            font-weight: normal;
        }
        
        .hei {
            font-weight: 700;
        }
    </style>
</head>

<body>
    <h2>断章</h2>
    <p class="wei">你站在桥上看风景，</p>
    <p class="hei">看风景人在楼上看你。</p>
    <p>明月装饰了你的窗子，</p>
    <p>你装饰了别人的梦。</p>
</body>

1.4、文字样式：font-style

语法：
normal为正常格式，italic为倾斜字体格式

p { 
 font-style: normal;
}

例子：

<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>
        /* normal为正常格式，italic为倾斜字体格式 */
        
        h4 {
            font-style: normal;
        }
        
        p {
            font-style: italic;
        }
    </style>
</head>

<body>
    <h4>乏了</h4>
    <p>困了</p>
</body>

1.5、复合样式

body { 
 font: font-style font-weight font-size/line-height font-family;
}

使用 font 属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开
不需要设置的属性可以省略（取默认值），但必须保留 font-size 和 font-family 属性，否则 font 属性将不起作用

例子

<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>
        /* font: font-style font-weight font-size/line-height font-family; */
        
        p {
            font: italic 700 30px "Microsoft YaHei";
        }
    </style>
</head>

<body>
    <p>困了</p>
</body>

2、字体属性总结

属性	含义	注意点
font-size	字号	需要加上单位px
font-family	字体	按实际要求写
font-weigth	字体粗细	normal、bold、100-900(400normal,700bold)
font-style	字体样式	倾斜:italic 正常:normal
font	复合连写	按照顺序写：font-style font-weight font-size/line-height font-family；字号和字体(font-size 和 font-family 属性)必须都要有

金丝先生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS笔记：CSS 字体属性

1、CSS字体属性CSS Fonts (字体)属性用于定义字体系列、大小、粗细、和文字样式（如斜体）。1.1字体：font-family<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
复制链接

扫一扫