font-weight

字体粗细设置属于一种比较复杂的字体样式定义,之所以说它复杂,是因为字体本身粗细千变万化,没有统一标准,对于字体粗细的具体定义也各不相同。本节主要讨论的就是在如此纷繁的字体粗细标准中,总结出一套可行的规律。

  属性值:normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 继承值

  初始值:normal

  作用于:所有元素

  是否继承:是

  百分比值:不适用

  计算值:见文本

编辑本段指定方法

  font-weight的属性值有3种指定方法:第1种是关键字法,关键字包括“normal”和“bold”两个;第2种是相对粗细值法,相对粗细也是由关键字定义,但是它的粗细是相对于上级元素的继承值而言的,包括“bolder”和“lighter”两个;第3种为数字法,包括从“100”到“900”的9个数字序列(注意,只能是100、200之类的整百数)。这些数字序列代表从最细(100)到最粗(900)的字体粗细程度。每一个数字定义的粗细都要比上一个等级稍微粗一些。

### CSS `font-weight` 属性详解 #### 定义与功能 `font-weight` 是一个重要的 CSS 属性,用于设置文本的粗细程度。此属性允许开发者指定字体的不同权重级别,从而实现视觉上的层次感和强调效果[^4]。 #### 取值范围 该属性接受一系列预定义的关键字以及数值作为取值: - **关键字**:normal (默认),bold,bolder,lighter。 - **数值**:100 到 900 的整数,以100为单位递增(即100, 200,..., 900)。其中400相当于 normal,700相当于 bold。 #### 实际应用案例 下面通过具体的例子来展示如何运用 `font-weight` 来改变文字外观: ```css /* 设置整个页面正文部分的文字为常规厚度 */ body { font-weight: normal; } /* 特定段落加粗显示 */ p.special { font-weight: bold; } ``` 对于更精细控制的情况,则可以采用具体数字表示不同级别的粗度: ```css h1 { /* 非常重的标题 */ font-weight: 800; } em { /* 轻微加重的重点词 */ font-weight: 500; } ``` 值得注意的是,并不是所有的字体都支持完整的 weight 数值序列;某些字体可能仅提供有限数量的变体版本。 #### 自定义字体中的 `font-weight` 当引入外部字体文件时,可以通过 `@font-face` 规则结合特定的 `font-weight` 参数加载具有不同粗细特性的同一字体家族成员[^3]。 ```css @font-face { font-family: 'MyCustomFont'; src: url('mycustomfont-light.woff') format('woff'); font-weight: 300; /* 加载轻量版 */ } @font-face { font-family: 'MyCustomFont'; src: url('mycustomfont-bold.woff') format('woff'); font-weight: 700; /* 加载厚重版 */ } ``` 这样,在实际使用过程中就可以方便地切换不同的字体粗细而无需重复声明其他字体系列名称。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值