1. 字体大小
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>字体大小</title>
<style>
body {
font-size: 20px;
}
.test1 {
font-size: 40px;
}
/* .test2 {
font-size: 30px;
}
.test3 {
font-size: 20px;
}
.test4 {
font-size: 10px;
} */
</style>
</head>
<body>
<div class="test1">孙笑川1</div>
<div class="test2">孙笑川2</div>
<div class="test3">孙笑川3</div>
<div class="test4">孙笑川4</div>
</body>
</html>2. 字体族
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>字体族</title>
<style>
/*
字体族：衬线字体（笔锋强劲的那种）/非衬线字体
可以设置多个字体，浏览器解析时按从左到右的顺序查找，没找到就使用后面的，且通常在最后写上 serif 或 sans-serif作为这一组的标识，如果都没找到，浏览器会联合系统选择一种合适的字体
*/
.test1 {
font-size: 100px;
font-family: "微软雅黑";
}
.test2 {
font-size: 100px;
font-family: "楷体";
}
.test3 {
font-size: 100px;
font-family: "宋体";
}
.test4 {
font-size: 100px;
font-family: "华文彩云";
}
.test5 {
font-size: 100px;
font-family: "STCaiyun", "STHupo", "Microsoft YaHei", sans-serif;
}
</style>
</head>
<body>
<div class="test1">孙笑川1</div>
<div class="test2">孙笑川2</div>
<div class="test3">孙笑川3</div>
<div class="test4">孙笑川4</div>
<div class="test5">孙笑川4</div>
</body>
</html>3. 字体风格
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>字体风格</title>
<style>
.test1 {
font-size: 100px;
font-style: normal;
}
.test2 {
font-size: 100px;
font-style: italic;
}
.test3 {
font-size: 100px;
font-style: oblique;
}
em {
font-size: 100px;
}
</style>
</head>
<body>
<div class="test1">孙笑川1</div>
<div class="test2">孙笑川2</div>
<div class="test3">孙笑川3</div>
<em>孙笑川4</em>
</body>
</html>4. 字体粗细
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>字体粗细</title>
<style>
div {
font-size: 100px;
}
.test1 {
font-weight: lighter;
}
.test2 {
font-weight: normal;
}
.test3 {
font-weight: bold;
}
.test4 {
font-weight: bolder;
}
.test5 {
font-weight: 300;
}
</style>
</head>
<body>
<div class="test1">孙笑川1</div>
<div class="test2">孙笑川2</div>
<div class="test3">孙笑川3</div>
<div class="test4">孙笑川4</div>
<div class="test5">孙笑川5</div>
</body>
</html>5. 字体复合属性
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>字体复合属性</title>
<style>
/*
编写规则：
1.字体大小、字体族必须写上
2.字体族必须是最后一位，字体大小必须是倒数第二位
3.各个属性间用空格隔开
*/
.test1 {
font: bold italic 100px "华文彩云1","华文琥珀";
}
</style>
</head>
<body>
<div class="test1">孙笑川1</div>
</body>
</html>
评论 (0)