一、字体大小
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体大小</title>
<style>
/*body{*/
/* font-size: 20px;*/
/*}*/
.atguigu1{
font-size: 40px;
}
.atguigu2{
font-size: 30px;
}
.atguigu3{
font-size: 20px;
}
.atguigu4{
font-size: 12px;
}
.atguigu5{
/*浏览器能够接受的最小字体是12px*/
font-size: 3px;
}
.atguigu7{
/*浏览器能够接受的最小字体是12px*/
font-size: 16px;
}
</style>
</head>
<body>
<div class="atguigu1">尚硅谷1</div>
<div class="atguigu2">尚硅谷2</div>
<div class="atguigu3">尚硅谷3</div>
<div class="atguigu4">尚硅谷4</div>
<div class="atguigu5">尚硅谷5</div>
<div>尚硅谷6</div>
<div class="atguigu7">尚硅谷7</div>
</body>
</html>二、字体族
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体族</title>
<style>
.atguidu1{
/*衬线字体：有棱角感*/
/*非衬线字体：五棱角感*/
font-size: 50px;
font-family: "微软雅黑";
}
.atguidu2{
font-size: 50px;
font-family: "黑体";
}
.atguidu3{
font-size: 50px;
font-family: "宋体";
}
.atguidu4{
font-size: 50px;
font-family: "华文彩云";
}
.atguidu5{
font-size: 50px;
font-family: "华文彩云","微软雅黑","黑体","宋体";
}
.atguidu6{
font-size: 50px;
font-family: "STCaiyun","STHupo","Microsoft YaHei",sans-serif;
/*可以设置多个字体，按照从左往右的顺序逐个查找，找到就用，最后协商serif,sans-serif*/
}
</style>
</head>
<body>
<div class="atguidu1">尚硅谷1</div>
<div class="atguidu2">尚硅谷2</div>
<div class="atguidu3">尚硅谷3</div>
<div class="atguidu4">尚硅谷4</div>
<div class="atguidu5">尚硅谷5</div>
<div class="atguidu6">尚硅谷6</div>
</body>
</html>三、字体风格
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体风格</title>
<style>
.atguigu1{
font-size: 50px;
font-style: normal;
}
属性名：font-style
常用值：
/*normal:正常（默认值）*/
/*italic:斜体（使用字体自带的斜体效果）*/
/*oblique:斜体（强制斜体产生的斜体效果）*/
/*推荐使用italic*/
.atguigu2{
font-size: 50px;
font-style: italic;
}
.atguigu3{
font-size: 50px;
font-style: oblique;
}
em{
font-size: 100px;
font-style: normal;
}
</style>
</head>
<body>
<div class="atguigu1">尚硅谷1</div>
<div class="atguigu2">尚硅谷2</div>
<div class="atguigu3">尚硅谷3</div>
<em>尚硅谷4</em>
</body>
</html>四、字体粗细
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体粗细</title>
<style>
div{
font-size: 50px;
}
.atguigu1{
font-weight: lighter;
}
.atguigu2{
font-weight: normal;
}
.atguigu3{
font-weight: bold;
}
.atguigu4{
font-weight: bolder;
}
.atguigu5{
font-weight: 600;
}
/*数值：*/
/*100-1000且无单位，数值越大，字体越粗（或一样粗，具体得看字体设计时得精确程度）*/
/* 100-300等同于lighter 400-500等同于normal 600及以上等同于bold*/
</style>
</head>
<body>
<div class="atguigu1">硅谷1</div>
<div class="atguigu2">硅谷2</div>
<div class="atguigu3">硅谷3</div>
<div class="atguigu4">硅谷4</div>
<div class="atguigu5">硅谷5</div>
</body>
</html>五、字体复合属性
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体复合属性</title>
<style>
.atguigu{
font: bold italic 100px "华文彩云","华文琥珀";
}
</style>
</head>
<body>
<div class="atguigu">尚硅谷</div>
属性名：font 可以把上述字体样式合并成一个属性
编写规则
1.字体大小，字体族必须写上
2.字体族必须是最后以为，字体大小必须是倒数第二位
3.各属性键空格隔开
实际开发中更推荐使用复合写法，但这也不是绝对得，比如只想设置字体大小，那就直接哦那个font-size属性
</body>
</html>