本文详细介绍了CSS中关于字体样式的设置，包括字体系列、字体大小、字体粗细、文字样式和字体复合属性。通过实例代码演示了如何使用font-family定义字体，font-size设置字体大小，font-weight改变字体粗细，font-style实现文字倾斜，以及如何通过font属性一次性设置多个字体属性。强调了在实际应用中应注意的细节和浏览器兼容性问题。
1.字体系列
css使用font-family属性来定义文本的字体系列。
语法
标签名{
font-family：;
}
<style>
p{
font-family:STLiti ;
}
div{
font-family: 'Microsoft YaHei',Arial, Helvetica, sans-serif;
}
</style>
<body>
<p>字体样式</p>
<div>字体样式</div>
<p>字体样式</p>
</body>
注：
- 各种字体之间必须使用英文状态下的逗号隔开
- 一般情况下如果有空格隔开的多个单词组成的字体加引号
- 尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示
- 多个字体时，浏览器会首先尝试列表中的第一个字体，如果不支持则尝试下一个，以此类推。
2.字体大小
CSS使用font-size属性定义字体大小。
语法
标签名{
font-size：;
}
<style>
p{
font-size: 30px ;
}
body{
font-size: 10px;
}
</style>
<body>
<p>字体样式</p>
<div>字体样式</div>
<p>字体样式</p>
</body>
注：
- px(像素)大小是我们网页的最常用的单位
- 谷歌浏览器默认的文字大小为16px
- 不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小
- 可以给body指定整个页面文字的大小
3.字体粗细
CSS使用font-weigh属性设置文本字体的粗细。
例：
.bold{
font-weight: bold;
}
<style>
/* 粗体 */
.bold{
font-weight: bold;
}
/* 特粗体 */
.bolder{
font-weight: bolder;
}
/* 细体 */
.lighter{
font-weight: lighter;
}
.zdy{
font-weight: 400;
}
</style>
<body>
<p class="bold">字体样式</p>
<div>字体样式</div>
<p class="bolder">字体样式</p>
<p class="lighter">字体样式</p>
<p class="zdy">字体样式</p>
</body>
注：
- 实际使用中一般使用数字，数字后不需要加任何单位
- 由细到粗的设置字体粗细，100 为最细的字体，400 等同于 normal，700 等同于 bold
4.文字样式
例：
p{
font-style: italic;
}
<style>
p{
/* 设置倾斜 */
font-style: italic;
}
em {
/* 让倾斜的字体不倾斜 */
font-style: normal;
}
</style>
<body>
<em>字体样式</em>
<p>字体样式</p>
<div>字体样式</div>
<p>字体样式</p>
</body>
注：
一般很少给文字加斜体，反而要给斜体标签改为不倾斜字体
5.字体复合属性
通过 font 属性可以同时设置多个字体属性，使用 font 属性需要遵循以下顺序：
body{
font : font-style font-weight font-size/line-height font-family;
}
<style>
p {
font: italic 600 35px STLiti;
}
</style>
<body>
<p>字体样式</p>
<div>字体样式</div>
<p>字体样式</p>
</body>
在使用 font 属性时，有以下几点需要注意：
- 使用 font 属性时必须按照如上所示的顺序，并且 font-size 和 font-family 两个属性不可忽略；
- font属性中的每个参数仅允许设置一个值，除 font-size 和 font-family 属性外，被忽略的属性将被设置为各自的默认值；
- 若要定义 line-height 属性，则需要使用斜线将 font-size 和 line-height 属性分开。
265
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
