首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

字体厚度 | font-weight

font-weight CSS属性指定字体的宽度。可用的字体宽度取决于您正在使用的字体font-family。一些字体仅在normalbold中可用。

代码语言:javascript
复制
/* Keyword values */
font-weight: normal;
font-weight: bold;

/* Keyword values relative to the parent */
font-weight: lighter;
font-weight: bolder;

/* Numeric keyword values */
font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400;
font-weight: 500;
font-weight: 600;
font-weight: 700;
font-weight: 800;
font-weight: 900;

/* Global values */
font-weight: inherit;
font-weight: initial;
font-weight: unset;

初始值

normal

应用于

all elements. It also applies to ::first-letter and ::first-line.

是否继承

yes

适用媒体

visual

计算值

the keyword or the numerical value as specified, with bolder and lighter transformed to the real value

动画类型

a font weight

规范顺序

the unique non-ambiguous order defined by the formal grammar

语法

font-weight属性是使用下面列表中的单个关键字值指定的。

normal正常的字体宽度。和400一样。

bold粗体字体重,和700一样。

lighter一种比父元素轻的字体。

bolder一种比父元素重的字体重量。

数字字体权重100200300400500600700800900

后备权重

如果给定的确切宽度不可用,则使用以下启发式来确定实际宽度:

  • 如果宽度大于500,则使用最接近的可用最大宽度(或者,如果没有指定宽度,则选择最接近的宽度)。
  • 如果宽度小于400,则使用最接近的可用宽度(如果没有,则使用最近的可用宽度)
  • 如果给定的宽度是400,恰好500被使用。如果500不可用,则启发式的使用小于400的字体权重。
  • 如果重量正好500是给出的,那么400被使用了。如果400则使用字体权重小于400的启发式。

这意味着,仅提供字体normalbold100- 500normal600- 900bold

相对宽度的含义

当指定lighterbolder指定时,下面的图表显示了如何确定元素的绝对字体重量:

Inherited value

bolder

lighter

100

400

100

200

400

100

300

400

100

400

700

100

500

700

100

600

900

400

700

900

400

800

900

700

900

900

700

公共宽度映射

数值(100-- 900)大致对应于以下常见的重量名称:

Value

Common weight name

100

Thin (Hairline)

200

Extra Light (Ultra Light)

300

Light

400

Normal

500

Medium

600

Semi Bold (Demi Bold)

700

Bold

800

Extra Bold (Ultra Bold)

900

Black (Heavy)

插值

font-weight值是通过离散步骤(100的倍数)进行插值的。插值发生在实数空间中,并通过四舍五入到最接近的100的倍数而被转换为整数,在100的倍数之间的中间值向正无穷大舍入。

形式语法

代码语言:javascript
复制
normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

实例

HTML

代码语言:javascript
复制
<p>
  Alice was beginning to get very tired of sitting by her sister on the
  bank, and of having nothing to do: once or twice she had peeped into the
  book her sister was reading, but it had no pictures or conversations in
  it, 'and what is the use of a book,' thought Alice 'without pictures or
  conversations?'
</p>

<div>I'm heavy<br/>
  <span>I'm lighter</span>
</div>

CSS

代码语言:javascript
复制
/* Set paragraph text to be bold. */
p {
  font-weight: bold;
}

/* Set div text to two steps heavier than
   normal but less than a standard bold. */
div {
 font-weight: 600;
}

/* Set span text to be one step lighter
   than its parent. */
span {
  font-weight: lighter;
}

结果

规范

Specification

Status

Comment

CSS Fonts Module Level 3The definition of 'font-weight' in that specification.

Candidate Recommendation

No change.

CSS TransitionsThe definition of 'font-weight' in that specification.

Working Draft

Defines font-weight as animatable.

CSS Level 2 (Revision 1)The definition of 'font-weight' in that specification.

Recommendation

No change.

CSS Level 1The definition of 'font-weight' in that specification.

Recommendation

Initial definition.

浏览器兼容性

Feature

Chrome

Edge

Firefox (Gecko)

Internet Explorer

Opera

Safari (WebKit)

Basic support

2.0

(Yes)

1.0 (1.7 or earlier)

3.0

3.5

1.3

Feature

Android

Edge

Firefox Mobile (Gecko)

IE Phone

Opera Mobile

Safari Mobile

Basic support

1.0

(Yes)

1.0 (1.0)

6.0

6.0

3.1

扫码关注腾讯云开发者

领取腾讯云代金券