CSS font-size字体
font字体
目标：能够使用字体和文本相关样式修改元素外观样式
字体大小
属性名：front-size
取值：数字+px
注意点：谷歌浏览器的默认值是16px，单位需要设置，否则是无效的。
<style>
p{
font-size: 30px;
}
</style>
</head>
<body>
<p>今天也有努力呦！！！</p>
</body>
字体粗细
属性名：font-weight
取值：
关键字取值：
| 正常 | normal |
|---|---|
| 加粗 | bold |
纯数字取值：100~900的整百数
| 正常 | 400 |
|---|---|
| 加粗 | 700 |
注意点：
不是所有字体都提供了9中粗细，因此部分取值页面中无变化
在实际开发中，以正常，加粗两种取值使用的最多。
<style>
p{
font-weight: bold;
}
.weight{//复习类选择器的使用
font-size: 700;
}
</style>
</head>
<body>
<p>今天也有努力呦！！！</p>
<p class="weight">嗯嗯，努力了呀！</p>
</body>
字体样式
属性名：font-style
取值：
正常(默认值)：normal
倾斜：italic
<style>
#style{ //复习id选择器的使用
font-style: italic;
}
</style>
</head>
<body>
<p id="style">明天也要加油呦！</p>
</body>
常见的字体系列
1、无衬线字体(sans-serif)
| 特点 | 文字笔画粗细均匀，并且首位无装饰 |
|---|---|
| 场景 | 网页中大多采用无衬线字体 |
| 常见的该系列 | 黑体、Arial |
2、衬线字体
| 特点 | 文字笔画粗细不均匀，并且首尾有笔锋装饰 |
|---|---|
| 场景 | 报刊书籍中 |
| 常见的该系列 | 宋体、The New Roman |
3、等宽字体
| 特点 | 每个字母或者文字的宽度相等 |
|---|---|
| 场景 | 一般用于代码编写，有利于代码的阅读 |
| 常见的该系列 | Consolas、fira code |
字体系列font-family
属性名：font-family
常见取值：具体字体1，具体字体2，具体字体3......字体系列
渲染规则：从左往右按照顺序查找，如果电脑中未安装该字体，则显示下一个字体。如果都不支持，会根据OS，显示最后字体系列的默认字样。
注意点：
1、如果字体名称中存在多个单词，推荐使用引号包裹
2、最后一项字体不需要使用引号包裹
3、网页开发时，尽量使用系统自带常见字体，保证不同用户浏览网页都可以正确显示。
样式的层叠问题
假如给同一个p标签设置了两个颜色的属性，那么写在最后的会把前面的覆盖掉
<style>
p{
color: blue;
color: red;//实际上执行这个红色
}
</style>
</head>
<body>
<p>明天也要加油呦！</p>
</body>
字体样式的连写
属性名：font
取值：font：style，weight，size，family
顺序要求：可以是swsf
省略要求：只能省略前面两个，如果省略相当于设置了默认值
注意点：
如果需要同时设置单独和连写的形式
要么把单独的样式写在连写的下面
要么把单独的样式写在连写的里面(否则就相当于给同一个标签设置了两个相同属性。导致上面的被覆盖掉，所以写在下面。)
<style>
p{
font: italic 700 300px 楷体，宋体，隶书，sans-serif;
}
</style>
</head>
<body>
<p>明天也要加油呦！</p>
</body>
浙公网安备 33010602011771号