字体样式
font-weight: 文字粗细
- normal: 默认值，标准粗细
- bold：粗体
- bolder：更粗
- lighter：更细
- 100~900：设置具体粗细，400等同于normal，而700等同于bold
- inherit：继承父元素字体的粗细值
<style>
.c1 {font-weight: bold;}
#p2 {font-weight: bolder;}
#p3 {font-weight: lighter;}
#p4 {font-weight: 500;}
#p5 {font-weight: inherit;}
</style>
<p>石灰吟</p>
<hr>
<p id="p1" class="c1">千锤万凿出深山</p>
<hr>
<p id="p2">，烈火焚烧若等闲</p>
<hr>
<p id="p3">。粉身碎骨全不怕</p>
<hr>
<p id="p4">要留清白在人间</p>
<hr>
<ul class="c1">
<li>
<p id="p5">于谦 [明代]</p>
</li>
</ul>
文字风格
font-style: – 文字风格
- normal; – 正常，默认就是正常的
- italic; – 倾斜
<style>
#p1 {font-style: italic;}
#p2 {font-style: normal;}
</style>
<p id="p1">死去元知万事空，但悲不见九州同</p>
<hr>
<p id="p2">王师北定中原日，家祭无忘告乃翁</p>
字体大小
一般是12px或13px或14px
注意：
1、通过font-size设置文字大小一定要带单位，即一定要写px;
2、如果设置成inherit表示继承父元素的字体大小值。
<style>
#p1 {font-size: 20px}
.c1 {font-size: 25px}
#p2 {font-size: inherit}
</style>
<p id="p1">竹石</p>
<div class="c1" >
<p>咬定青山不放松，立根原在破岩中</p>
<a id="p2">千磨万击还坚劲，任尔东西南北</a>
</div>
文字字体
font-family: – 字体风格
常见字体：
- serif 衬线字体
- sans-serif 非衬线字体
- 中文：宋体，微软雅黑，黑体
注意：
设置的字体必须是用户电脑里已经安装的字体，浏览器会使用它可识别的第一个值。
如果取值为中文，需要用单或双引号扩起来
<style>
#p1 {font-family: "微软雅黑"}
#p2 {font-family: "宋体"}
#p3 {font-family: "华文行楷"}
#p4 {font-family: "华文隶书"}
#p5 {font-family: "华文细黑"}
#p6 {font-family: "华文楷体"}
</style>
<p id="p1">采桑子.重阳</p>
<p id="p2">人生易老天难老，岁岁重阳。</p>
<p id="p3">今又重阳，战地黄花分外香。</p>
<p id="p4">一年一度秋风劲，</p>
<p id="p5">不似春光。</p>
<p id="p6">胜似春光，廖廓江天万里霜。</p>
字体颜色
- color：rgb(123,123,123); – 字体三原色拼凑字体颜色
- color：red; – 预设颜色
<style>
#p1 {color: red}
#p2 {color: blueviolet}
#p3 {color: blue}
#p4 {color: #00ff88}
#p5 {color: rgb(123, 123, 123)
}
</style>
<p id="p1">人生易老天难老，岁岁重阳。</p>
<p id="p2">今又重阳，战地黄花分外香。</p>
<p id="p3">一年一度秋风劲，</p>
<p id="p4">不似春光。</p>
<p id="p5">胜似春光，廖廓江天万里霜。</p>