CSS字体样式值

字体样式

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>复制代码

1.

2.

3.

4.

5.

6.

7.

8.

9.

10.

11.

12.

13.

14.

15.

16.

17.

18.

19.

20.

21.

22.

23.

文字风格

font-style: -- 文字风格

normal;     -- 正常，默认就是正常的

italic;     -- 倾斜

<style>

      #p1 {font-style: italic;}

      #p2 {font-style: normal;}

</style>

<p id="p1">死去元知万事空，但悲不见九州同</p>

<hr>

<p id="p2">王师北定中原日，家祭无忘告乃翁</p>复制代码

1.

2.

3.

4.

5.

6.

7.

8.

字体大小

一般是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>复制代码

1.

2.

3.

4.

5.

6.

7.

8.

9.

10.

11.

文字字体

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>复制代码

1.

2.

3.

4.

5.

6.

7.

8.

9.

10.

11.

12.

13.

14.

15.

字体颜色

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>复制代码

-----------------------------------

CSS字体样式值

https://blog.51cto.com/u_15100527/2617147