css-常用字体属性-爱代码爱编程
字体大小：
属性名：font-size
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>01字体大小</title>
<style>
/* 继承性可以让所有元素调成统一
body {
} */
.rbk1 {
font-size: 40px;
}
.rbk2 {
font-size: 30px;
}
.rbk3 {
font-size: 20px;
}
/* 浏览器能够接受最小的字体是12px */
.rbk4 {
font-size: 3px;
}
</style>
</head>
<body>
<div class="rbk1">一杯热白开1.</div>
<div class="rbk2">一杯热白开2.</div>
<div class="rbk3">一杯热白开3.</div>
<div class="rbk4">一杯热白开4.</div>
</body>
</html>
注意的是：
字体族：
font-Family
衬线字体：有棱有角的
非衬线字体：与衬线字体相反
可设置多个字体，按照从左往右的顺序逐个查找，找到就用，没有找到就使用后面的，通常在最后写上serif（衬线字体）或sans-serif（非衬线字体）
推荐写字体英文名字，可自行查询
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>02字体族</title>
<style>
.rbk1 {
font-size: 40px;
font-family: "Microsoft YaHei";
}
.rbk2 {
font-size: 40px;
font-family: "星夜温柔奶酪体";
}
.rbk3 {
font-size: 40px;
font-family: "楷体";
}
.rbk4 {
font-size: 40px;
font-family: "HanziPen", "STCaiyun","STHupo","Microsoft YaHei",sans-serif;
}
</style>
</head>
<body>
<div class="rbk1">一杯热白开1.</div>
<div class="rbk2">一杯热白开2.</div>
<div class="rbk3">一杯热白开3.</div>
<div class="rbk4">一杯热白开4.</div>
</body>
</html>
字体风格：
font-style
normally：正常（默认值）
italic：斜体（使用字体自带的斜体效果）更推荐
oblique：斜体（强制倾斜产生的斜体效果）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>03字体风格</title>
<style>
/* 默认值是normally */
.rbk1 {
font-size: 40px;
font-style: normally;
}
/* 斜体 */
.rbk2 {
font-size: 40px;
font-style: italic;
}
/* 斜体 */
.rbk3 {
font-size: 40px;
font-style: oblique;
}
em {
font-size: 40px;
font-style: normally;
}
</style>
</head>
<body>
<div class="rbk1">一杯热白开1.</div>
<div class="rbk2">一杯热白开2.</div>
<div class="rbk3">一杯热白开3.</div>
<!-- em直接是倾斜标签 -->
<em>一杯热白开4.</em>
</body>
</html>
字体粗细：
font-weight
1.lighter：细
2.normally：正常
3. bold：粗
4. bolder：很粗（多数字体不支持）
5. 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>04字体粗细</title>
<style>
div {
font-size: 40px;
}
.rbk1 {
font-weight: lighter;
}
.rbk2 {
font-weight: normal;
}
.rbk3 {
font-weight: bold;
}
.rbk4 {
font-weight: bolder;
}
/* 数值在100-1000改变，主要看字体设置的粗细有几种 */
.rbk5 {
font: weight 400;
}
</style>
</head>
<body>
<div class="rbk1">一杯热白开1.</div>
<div class="rbk2">一杯热白开2.</div>
<div class="rbk3">一杯热白开3.</div>
<div class="rbk4">一杯热白开4.</div>
<div class="rbk5">一杯热白开5.</div>
</body>
</html>
字体复合：
属性名：font 合并成一个属性
1.字体大小、字体族必须都写上
2.字体族必须是最后一位，字体大小必须是倒数第二位
3.各个属性间用空格隔开
只想设置某个属性的时候可以不使用字体复合，单独使用font-size等即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>05字体复合属性</title>
<style>
.rbk {
font: bold italic 100px "STHupo", "Microsoft YaHei", sans-serif;
}
</style>
</head>
<body>
<div class="rbk">一杯热白开.</div>
</body>
</html>