font-weight

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Thuộc tính font-weight CSS đặt độ đậm (hoặc độ nặng) của phông chữ. Các độ đậm có sẵn phụ thuộc vào font-family hiện đang được đặt.

Try it

font-weight: normal;

font-weight: bold;

font-weight: lighter;

font-weight: bolder;

font-weight: 100;

font-weight: 900;

<section id="default-example">
  <p id="example-element">
    London. Michaelmas term lately over, and the Lord Chancellor sitting in
    Lincoln's Inn Hall. Implacable November weather. As much mud in the streets
    as if the waters had but newly retired from the face of the earth, and it
    would not be wonderful to meet a Megalosaurus, forty feet long or so,
    waddling like an elephantine lizard up Holborn Hill.
  </p>
</section>

section {
  font-size: 1.2em;
}

Cú pháp

css

/* Giá trị từ khóa <font-weight-absolute> */
font-weight: normal;
font-weight: bold;

/* Giá trị số <font-weight-absolute> [1,1000] */
font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400; /* normal */
font-weight: 500;
font-weight: 600;
font-weight: 700; /* bold */
font-weight: 800;
font-weight: 900;

/* Giá trị từ khóa tương đối so với phần tử cha */
font-weight: lighter;
font-weight: bolder;

/* Giá trị toàn cục */
font-weight: inherit;
font-weight: initial;
font-weight: revert;
font-weight: revert-layer;
font-weight: unset;

Thuộc tính font-weight được chỉ định bằng giá trị <font-weight-absolute> hoặc giá trị độ đậm tương đối, như liệt kê bên dưới.

Giá trị

normal: Độ đậm phông chữ bình thường. Tương đương với 400.
bold: Độ đậm phông chữ đậm. Tương đương với 700.
<number>: Giá trị <number> trong khoảng từ 1 đến 1000, bao gồm cả hai đầu. Số lớn hơn đại diện cho độ đậm hơn (hoặc bằng) so với số nhỏ hơn. Điều này cho phép kiểm soát chi tiết cho phông chữ biến thể. Đối với phông chữ không biến thể, nếu độ đậm chính xác được chỉ định không có sẵn, sẽ sử dụng thuật toán dự phòng — các giá trị số chia hết cho 100 tương ứng với các tên độ đậm phổ biến, như mô tả trong phần Bảng ánh xạ tên độ đậm phổ biến bên dưới.
lighter: Độ đậm phông chữ nhẹ hơn một bậc so với phần tử cha. Lưu ý rằng chỉ có bốn độ đậm phông chữ được xem xét cho việc tính toán độ đậm tương đối; xem phần Ý nghĩa của độ đậm tương đối bên dưới.
bolder: Độ đậm phông chữ nặng hơn một bậc so với phần tử cha. Lưu ý rằng chỉ có bốn độ đậm phông chữ được xem xét cho việc tính toán độ đậm tương đối; xem phần Ý nghĩa của độ đậm tương đối bên dưới.

Trọng lượng dự phòng

Nếu độ đậm chính xác được yêu cầu không có sẵn, quy tắc sau được dùng để xác định độ đậm thực sự được hiển thị:

Nếu độ đậm mục tiêu nằm trong khoảng từ 400 đến 500 (bao gồm):
- Tìm kiếm các độ đậm có sẵn giữa mục tiêu và 500, theo thứ tự tăng dần.
- Nếu không tìm thấy, tìm kiếm các độ đậm nhỏ hơn mục tiêu, theo thứ tự giảm dần.
- Nếu không tìm thấy, tìm kiếm các độ đậm lớn hơn 500, theo thứ tự tăng dần.
Nếu độ đậm nhỏ hơn 400 được yêu cầu, tìm kiếm các độ đậm nhỏ hơn mục tiêu theo thứ tự giảm dần. Nếu không tìm thấy, tìm kiếm các độ đậm lớn hơn mục tiêu theo thứ tự tăng dần.
Nếu độ đậm lớn hơn 500 được yêu cầu, tìm kiếm các độ đậm lớn hơn mục tiêu theo thứ tự tăng dần. Nếu không tìm thấy, tìm kiếm các độ đậm nhỏ hơn mục tiêu theo thứ tự giảm dần.

Note: Thuật toán trọng lượng dự phòng chỉ được sử dụng để hiển thị. Giá trị tính toán của thuộc tính vẫn là giá trị được chỉ định.

Ý nghĩa của độ đậm tương đối

Khi lighter hoặc bolder được chỉ định, biểu đồ bên dưới cho thấy cách xác định độ đậm phông chữ tuyệt đối của phần tử.

Lưu ý rằng khi sử dụng độ đậm tương đối, chỉ có bốn độ đậm phông chữ được xem xét — thin (100), normal (400), bold (700), và heavy (900). Nếu một họ phông chữ có nhiều độ đậm hơn, chúng sẽ bị bỏ qua cho mục đích tính toán độ đậm tương đối.

Giá trị kế thừa	`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

Bảng ánh xạ tên độ đậm phổ biến

Các giá trị số từ 100 đến 900 tương ứng gần với các tên độ đậm phổ biến sau (xem đặc tả OpenType):

Giá trị	Tên độ đậm phổ biến
100	Thin (Hairline)
200	Extra Light (Ultra Light)
300	Sáng
400	Normal (Regular)
500	Medium
600	Semi Bold (Demi Bold)
700	Bold
800	Extra Bold (Ultra Bold)
900	Black (Heavy)
950	Extra Black (Ultra Black)

Phông chữ biến thể

Trong khi nhiều phông chữ có một độ đậm cụ thể tương ứng với một trong các số trong Bảng ánh xạ tên độ đậm phổ biến, hầu hết phông chữ biến thể hỗ trợ một phạm vi độ đậm cung cấp độ chi tiết cao hơn nhiều, giúp các nhà thiết kế và nhà phát triển kiểm soát tốt hơn độ đậm đã chọn.

Đối với phông chữ biến thể TrueType hoặc OpenType, biến thể "wght" được sử dụng để triển khai các chiều rộng khác nhau.

Bản demo này tải với font-weight: 500; được đặt. Thay đổi giá trị của thuộc tính font-weight trong bộ chọn .sample để xem trọng lượng của văn bản thay đổi (ví dụ: 200, 700). Nhấn "Play" trong các khối mã bên dưới để chỉnh sửa ví dụ trong MDN Playground:

html

<p class="sample">
  ...it would not be wonderful to meet a Megalosaurus, forty feet long or so,
  waddling like an elephantine lizard up Holborn Hill.
</p>

css

@font-face {
  src: url("https://mdn.github.io/shared-assets/fonts/variable-fonts/MutatorSans.ttf");
  font-family: "MutatorSans";
  font-style: normal;
  font-weight: 1 1000;
}

.sample {
  text-transform: uppercase;
  font-weight: 500;
  font-size: 1.5rem;
  font-family: "MutatorSans", sans-serif;
}

Khả năng tiếp cận

Những người có tình trạng thị lực kém có thể gặp khó khăn khi đọc văn bản được đặt với giá trị font-weight là 100 (Thin/Hairline) hoặc 200 (Extra Light), đặc biệt nếu phông chữ có tỷ lệ tương phản màu sắc thấp.

Định nghĩa chính thức

Initial value	`normal`
Applies to	all elements and text. It also applies to `::first-letter` and `::first-line`.
Inherited	yes
Computed value	the keyword or the numerical value as specified, with `bolder` and `lighter` transformed to the real value
Animation type	by computed value type

Cú pháp chính thức

font-weight = 
  <font-weight-absolute>  |
  bolder                  |
  lighter                 

<font-weight-absolute> = 
  normal             |
  bold               |
  <number [1,1000]>

Ví dụ

Thiết lập độ đậm phông chữ

HTML

html

<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

css

/* 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;
}

Kết quả

Đặc tả

Thông số kỹ thuật
CSS Fonts Module Level 4 # font-weight-prop

Khả năng tương thích trình duyệt

Xem thêm

font-family
font-style
SVG font-weight attribute
Learn: Fundamental text and font styling
CSS fonts module

Help improve MDN

Tìm hiểu cách đóng góp

This page was last modified on Jan 1, 1970 by MDN contributors.

Xem trang này trên GitHub • Báo cáo sự cố với nội dung này

Giá trị kế thừa	`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

Giá trị kế thừa	`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

Giá trị kế thừa	`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