CSS字体样式值

朱雀 2022-12-30 08:15 185阅读 0赞

#### 字体样式 ####

**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>

发表评论取消回复

表情：

评论列表（有 0 条评论，185人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS字体样式（font）[详细]

CSS字体样式（font） 1. font-family 2. font-style 3. font-wei

柔情只为你懂/ 2024年03月26日 12:55/ 0 赞/ 71 阅读

相关 CSS中字体样式属性

font-family属性的部分属性值 <p><span style="font-family:STXinwei"> hello world</span>华文新魏

淡淡的烟草味﹌/ 2023年10月03日 11:37/ 0 赞/ 66 阅读

相关 CSS样式——字体垂直、水平居中

本文转自：[https://www.cnblogs.com/huchong/p/7875127.html][https_www.cnblogs.com_huchong_p_78

深碍√TFBOYSˉ_/ 2023年07月23日 03:30/ 0 赞/ 47 阅读

相关 CSS文本样式值

字体样式针对的是“文字本身”的形体效果，而文本样式针对的是“整个段落”的排版效果。字体样式注重个体，文本样式注重整体。常见的文本样式如下表。 <table> <thead

拼搏现实的明天。/ 2022年12月31日 05:21/ 0 赞/ 215 阅读

相关 CSS字体样式值

字体样式 font-weight: 文字粗细 normal: 默认值，标准粗细 bold：粗体 bolder：更粗 lighter：更细

朱雀/ 2022年12月30日 08:15/ 0 赞/ 186 阅读

相关 html_css字体样式

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <s

Dear 丶/ 2022年06月18日 05:19/ 0 赞/ 307 阅读

相关 CSS字体样式属性

font-size:字号大小 font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。其中，相对长度单位比较常用，推荐使用像素单位px，绝

今天药忘吃喽~/ 2022年03月21日 05:12/ 0 赞/ 443 阅读

相关 CSS字体样式

样式一： 1. `body {` 2. `margin: 0;` 3. `padding: 0;` 4. `line-height: 1.

分手后的思念是犯贱/ 2022年02月18日 08:41/ 0 赞/ 393 阅读

相关 CSS（一）字体样式属性

CSS字体样式属性一）字体 1.font-size 推荐使用相对长度像素单位px 2.font-family: {

墨蓝/ 2021年10月25日 11:58/ 0 赞/ 464 阅读

相关 css 字体文本相关样式

字体设置: font-size:10px; 设置字体大小其中: 自适应大小: font-size:sam

深藏阁楼爱情的钟/ 2021年07月24日 14:44/ 0 赞/ 569 阅读