CSS字体样式值

作者 : 开心源码 本文共1554个字,预计阅读时间需要4分钟 发布时间: 2022-05-14 共63人阅读

字体样式

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>
说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » CSS字体样式值

发表评论