字体font复合属性

最新推荐文章于 2025-10-11 18:43:18 发布

原创最新推荐文章于 2025-10-11 18:43:18 发布 · 2.3k 阅读

CC 4.0 BY-SA版权

文章标签：

目前自学HTML，CSS，JavaScript，以后会不定时更新学习笔记，和大家一起交流学习！
今天介绍一下字体font相关属性的连写
属性名：font（复合属性）
取值： font：style weight size family；
复合属性连写的font格式：font:font-style font-weight font-size/line-height font-family;
要求：
1、只能省略前两个，如果省略了相当于设置了默认值。通俗来讲，连写时有的属性可以不写但必须保留font-size和font-family属性。
2、顺序不能颠倒，各个属性必须用空格隔开。但字的大小属性font-size和行宽属性line-height要用 / 隔开。
3、   如果需要同时设置单独和连写形式
4、   要么把单独的样式写在下面。比如：连写属性“font: italic 700 50px 微软雅黑;”写完，不想让字体倾斜了，就在这个标签下面写单独的样式“font-style:mormal”，此时，字体就显示正常了，这是根据CSS的层叠性。
5、   要么把单独的样式写在连写的里面。

注：正式工作中这个font复合属性不常用！

代码示范：
<!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>Document</title>
<style>
p {
/* font：style weight size family; 四者顺序不能颠倒切换 */
font: italic 700 50px 微软雅黑;
}
<style>
</head>
<body>
<p>这是标签</p>
</body>
</html>