共计 1551 个字符,预计需要花费 4 分钟才能阅读完成。
字体款式
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>
正文完