当前位置 博文首页 > thorn豆豆的博客：CSS入门--字体的复合属性
一.字体的复合属性：CSS Fonts属性用于定义字体系列，大小，粗细，文字样式
二.
(1).字体系列：
font-family属性定义文本的字体系列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css字体系列</title>
<style>
p {
font-family: arial,tahoma,"微软雅黑"；
}
</style>
</head>
<body>
<h2>我是本拉豆</h2>
<p>偶吼吼吼</p>
<p>哈</p>
</body>
</html>
(2).字体的大小：
font-size属性定义字体的大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>字体的大小</title>
<style>
body {
font-size: 30px;
}
/* 标题标签比较特殊，需要单独指定文字大小 */
h2 {
font-size: 30px;
}
</style>
</head>
<body>
<h2>我是煲仔饭</h2>
<p>
你想成为rapstar么？
</p>
</body>
</html>
(3).字体粗细：
font-weight属性定义字体的粗细
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>字体的粗细</title>
<style>
/* 让标题变成正常字体粗细 */
h3 {
/* 和font-weight: normal同理，都是让字体变细，变成400 */
/* 开发时，最好用数字表示粗细，一般400正常，700加粗 */
font-weight: 400;
}
/* 让流泪猫猫加粗 */
.cry {
font-weight: 700;
}
</style>
</head>
<body>
<h3>猫猫分为</h3>
<ul>
<li> 妙猫猫</li>
<li class="cry">流泪猫猫</li>
<li>本拉豆猫猫</li>
<li>委屈猫猫妙猫猫</li>
</ul>
</body>
</html>
(4).文字样式：
font-style定义字体的样式
p1{font-style:normal;//默认值
}
p1{font-style:italic;//斜体
}
(5).字体的复合属性：
{font：font-style font-weight font-size/fongt-height font-falily}
其中字体大小，字体系列不可省
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>font属性定义样式的复合属性</title>
<style>
body {
font: italic 700 16px/20px "Microsoft yahei";
}
</style>
</head>
<body>
<p>我想吃榴莲披萨了</p>
<p>不让我吃</p>
</body>
</html>
