Hướng dẫn font chữ css

Là một developer, bạn sẽ không thể tiến xa nếu không biết cách thay đổi kích thước phông chữ trong CSS. Bài viết này sẽ hướng dẫn bạn cách thực hiện. 

Có thể style (tạo kiểu) cho các phần khác nhau của trang HTML là một kỹ năng quan trọng đối với các nhà thiết kế và phát triển web. Để style cho các trang web HTML của bạn với màu sắc và kích thước phông chữ, bạn cần phải làm quen với CSS. Cụ thể, để thay đổi kích thước phông chữ, bạn có thể sử dụng thuộc tính font-size (kích thước phông chữ) của CSS .

Nếu bạn đang tìm cách thay đổi kích thước phông chữ HTML bằng CSS, bài viết này sẽ giúp bạn. Hãy bắt đầu với phần giới thiệu về thuộc tính font-size của CSS .

Hiểu thuộc tính font-size CSS

Thuộc tính font-size trong CSS rất hữu ích khi bạn cần thay đổi kích thước của văn bản HTML. Bạn có thể sử dụng thuộc tính này để thay đổi kích thước của mọi đoạn văn bản trên trang HTML hoặc nhắm mục tiêu vào một phần tử (element) cụ thể.

Nói chung bạn nên nhắm mục tiêu vào một phần tử (element) cụ thể vì bạn thường không muốn mọi thứ có cùng kích thước. Văn bản không tuân theo hệ thống phân cấp trực quan khó để có thể quét qua và phân biệt các tiêu đề cấp cao hơn với các tiêu đề cấp thấp.

Nói một cách đơn giản hơn, đừng lạm dụng thuộc tính font-size. Nếu bạn muốn một tiêu đề nổi bật, có các thẻ tiêu đề (heading tag) HTML khác nhau cho điều đó. 

Thuộc tính font-size CSS nhận hai loại giá trị: tuyệt đối và tương đối.

Các giá trị độ dài tuyệt đối (ví dụ px) là cố định trong khi các giá trị tương đối (ví dụ: em và ex) thì linh hoạt. Ví dụ: đối với một đơn vị phông chữ tương đối như em, kích thước thường được xác định bởi kích thước phông chữ của phần tử cha (parent element). Tuy nhiên, các root-based font-relative units (đơn vị phông chữ tương đối dựa trên gốc) như rem bị ảnh hưởng bởi kích thước phông chữ của phần tử gốc ().

Mỗi thứ đều có ưu và nhược điểm, nhưng chúng ta sẽ không thảo luận chúng trong bài viết này.

Cách thay đổi kích thước phông chữ của một phần tử HTML trong CSS

Bạn có thể thay đổi kích thước phông chữ của văn bản HTML bằng cách sử dụng một số cú pháp CSS chuẩn.

Đầu tiên, chỉ định selector (văn bản bạn muốn sửa đổi) và mở một số dấu ngoặc nhọn. Tiếp theo, nhập thuộc tính font-size, theo sau là dấu hai chấm, chỉ định kích thước cụ thể mà bạn muốn văn bản HTML của mình được trình bày và đóng nó bằng dấu chấm phẩy.

Đây là cú pháp:

CSS selector {

font-size: value;

}

Để hiểu rõ hơn về khái niệm này, hãy xem lại bản soạn thảo HTML sau có một vài dòng mã bổ sung (một tiêu đề và một đoạn văn):

Simple HTML Page

This is my first heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Nếu bạn muốn thay đổi kích thước phông chữ của phần tử đoạn văn, bạn cần chọn nó (thông qua một lớp, thẻ hoặc id) và sử dụng thuộc tính font-size CSS , đặt giá trị tùy chỉnh với các đơn vị ưa thích của bạn. Trong ví dụ của chúng tôi, chúng tôi sẽ sử dụng pixel (px).

font-size: value;0

font-size: value;1

}

Mặc dù CSS inline thường không được khuyên dùng trong các dự án lớn, nhưng bạn cũng có thể sử dụng nó để thay đổi kích thước của văn bản HTML:

Simple HTML Page

This is my first heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Văn bản trong thẻ HTML p bây giờ sẽ có kích thước tùy chỉnh mới.

Khắc phục sự cố khi thay đổi kích thước phông chữ HTML trong CSS

Mặc dù toàn bộ quá trình thay đổi kích thước văn bản trong CSS có vẻ dễ dàng, nhưng nó có thể không phải lúc nào cũng diễn ra chính xác như bạn mong đợi. Nếu bạn gặp sự cố, hãy bắt đầu bằng cách kiểm tra xem bạn đã lưu các thay đổi vào file của mình hay chưa (đồng thời, hãy đảm bảo bạn liên kết sheet CSS với file HTML của mình). Nếu bạn đã làm như vậy, hãy thử sử dụng phương pháp inline, sau đó làm mới trang.

Nếu cách này có hiệu quả, có thể có vấn đề với mã CSS của bạn. Hãy thử sử dụng thẻ !important, và nếu không, hẳn là có một số mã xung đột. Phân tích cú pháp từng dòng mã CSS của bạn để thử và tìm ra lỗi đó.

Việc chọn đúng font chữ và phong cách là rất quan trọng đối với khả năng đọc của văn bản trên một trang web.

CSS cung cấp một số thuộc tính để tạo kiểu cho font chữ của văn bản, bao gồm thay đổi font chữ, kích thước và độ đậm của chúng, quản lý biến thể, v.v.

Các thuộc tính font chữ là:

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

1,

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

2,

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

3,

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

4 và

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

5.

Hãy thảo luận chi tiết hơn về từng thuộc tính font chữ này.

Font Family

Thuộc tính

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

1 được dùng để xác định font chữ được sử dụng cho văn bản.

Thuộc tính này có thể chứa một số tên font chữ được phân tách bằng dấu phẩy như một hệ thống dự phòng, do đó nếu font chữ đầu tiên không có sẵn trên hệ thống của người dùng, trình duyệt sẽ cố gắng sử dụng phông chữ thứ hai, v.v.

Do đó, hãy liệt kê font chữ bạn muốn trước, sau đó liệt kê bất kỳ font chữ nào có thể thay thế font chữ đầu tiên nếu nó không có sẵn. Bạn nên kết thúc danh sách với một font chữ chung chung như -

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

7,

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

8,

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

9,

h1 {
    font-size: 24px;
}
p {
    font-size: 14px;
}

0 và

h1 {
    font-size: 24px;
}
p {
    font-size: 14px;
}

1. Một khai báo font family điển hình có thể trông như thế này:

body {
    font-family: Arial, Helvetica, sans-serif;
}

Lưu ý: Nếu tên của một font family chứa nhiều hơn một từ, nó phải được đặt bên trong cặp dấu nháy kép, ví dụ:

h1 {
    font-size: 24px;
}
p {
    font-size: 14px;
}

2,

h1 {
    font-size: 24px;
}
p {
    font-size: 14px;
}

3,

h1 {
    font-size: 24px;
}
p {
    font-size: 14px;
}

4, v.v.

Font family phổ biến nhất được sử dụng trong thiết kế web là serif và sans-serif , vì chúng phù hợp để đọc hơn. Ngoài ra, font chữ monospace thường được sử dụng để hiển thị mã, bởi vì trong kiểu chữ này, mỗi chữ cái chiếm cùng một khoảng trống trông giống như văn bản được đánh máy.

Các font chữ cursive trông giống như chữ viết tay. Các font chữ fantasy thể hiện font chữ nghệ thuật, nhưng chúng không sử dụng rộng rãi vì ít có sẵn trên các hệ điều hành.

Sự khác biệt giữa font Serif và Sans-serif

Font serif có dòng hoặc nét nhỏ ở các đầu ký tự, trong khi font chữ sans-serif thẳng hơn và không có những nét nhỏ này. Xem hình minh họa sau đây.

Để tìm hiểu về các kết hợp font chữ thường được sử dụng, vui lòng xem tài liệu tham khảo về font chữ an toàn trên web.

Font Style

Thuộc tính

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

2 được sử dụng để thiết lập các kiểu chữ cho nội dung văn bản của một phần tử.

Giá trị của

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

2 có thể là

h1 {
    font-size: 24px;
}
p {
    font-size: 14px;
}

7,

h1 {
    font-size: 24px;
}
p {
    font-size: 14px;
}

8 hoặc

h1 {
    font-size: 24px;
}
p {
    font-size: 14px;
}

9. Giá trị mặc định là

h1 {
    font-size: 24px;
}
p {
    font-size: 14px;
}

7.

Hãy thử ví dụ sau để hiểu về cơ bản nó hoạt động như thế nào:

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

Lưu ý: Thoạt nhìn, cả hai kiểu font chữ oblique và italic đều có vẻ giống nhau, nhưng có sự khác biệt. Style

h1 {
    font-size: 24px;
}
p {
    font-size: 14px;
}

8 sử dụng một phiên bản nghiêng của font chữ trong khi style

h1 {
    font-size: 24px;
}
p {
    font-size: 14px;
}

9 chỉ đơn giản làm nghiêng font chữ bình thường.

Font Size

Thuộc tính

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

4 được sử dụng để thiết lập kích thước của font chữ cho nội dung văn bản của một phần tử.

Có một số cách để chỉ định giá trị kích thước font chữ, ví dụ như từ khóa, tỷ lệ phần trăm, pixel, ems, v.v.

Đặt kích thước font chữ với pixel

Đặt kích thước font chữ bằng các giá trị pixel (ví dụ: 14px, 16px, v.v.) là một lựa chọn tốt khi bạn cần độ chính xác của pixel. Pixel là một đơn vị đo lường tuyệt đối chỉ định độ dài cố định.

Hãy thử ví dụ sau để hiểu về cơ bản nó hoạt động như thế nào:

h1 {
    font-size: 24px;
}
p {
    font-size: 14px;
}

Việc xác định kích thước font chữ bằng pixel không được coi là cách dễ tiếp cận, vì người dùng không thể thay đổi kích thước font chữ từ cài đặt trình duyệt. Ví dụ: người dùng có thị lực hạn chế hoặc kém có thể muốn đặt kích thước font chữ lớn hơn nhiều so với kích thước do bạn chỉ định.

Do đó, bạn nên tránh sử dụng các giá trị pixel và thay vào đó hãy sử dụng các giá trị liên quan đến kích thước font chữ mặc định của người dùng nếu bạn muốn tạo một thiết kế thêm vào.

Mẹo: Văn bản cũng có thể được thay đổi kích thước trong tất cả các trình duyệt bằng cách sử dụng tính năng thu phóng . Tuy nhiên, tính năng này thay đổi kích thước toàn bộ trang, không chỉ văn bản. W3C khuyến cáo sử dụng giá trị em hoặc giá trị phần trăm (%) để tạo bố cục mạnh mẽ và khả năng mở rộng.

Đặt kích thước font chữ bằng "em"

Đơn vị

h1 {
    font-size: 2em;    /* 32px/16px=2em */
}
p {
    font-size: 0.875em;    /* 14px/16px=0.875em */
}

4 liên quan đến kích thước font chữ của phần tử cha. Khi xác định thuộc tính

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

4,

h1 {
    font-size: 2em;    /* 32px/16px=2em */
}
p {
    font-size: 0.875em;    /* 14px/16px=0.875em */
}

6 bằng với kích thước của font chữ áp dụng cho phần tử gốc .

Vì vậy, nếu bạn đặt

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

4 20px trên phần tử body, thì

h1 {
    font-size: 2em;    /* 32px/16px=2em */
}
p {
    font-size: 0.875em;    /* 14px/16px=0.875em */
}

8 và

h1 {
    font-size: 2em;    /* 32px/16px=2em */
}
p {
    font-size: 0.875em;    /* 14px/16px=0.875em */
}

9.

Tuy nhiên, nếu bạn chưa đặt kích thước font chữ ở bất kỳ đâu trên trang, thì đó là mặc định của trình duyệt, thường là 16px. Do đó, theo mặc định

body {
    font-size: 62.5%;    /* font-size 1em = 10px */
}
p {
    font-size: 1.4em;    /* 1.4em = 14px */
}
p span {
    font-size: 2em;    /* 2em = 28px */
}

0 và

body {
    font-size: 62.5%;    /* font-size 1em = 10px */
}
p {
    font-size: 1.4em;    /* 1.4em = 14px */
}
p span {
    font-size: 2em;    /* 2em = 28px */
}

1.

Hãy xem ví dụ sau để hiểu về cơ bản nó hoạt động như thế nào:

h1 {
    font-size: 2em;    /* 32px/16px=2em */
}
p {
    font-size: 0.875em;    /* 14px/16px=0.875em */
}

Sử dụng kết hợp % và "em"

Như bạn đã quan sát trong ví dụ trên, việc tính toán các giá trị em trông không đơn giản. Để đơn giản hóa điều này, một kỹ thuật phổ biến là đặt

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

4 cho phần tử body thành

body {
    font-size: 62.5%;    /* font-size 1em = 10px */
}
p {
    font-size: 1.4em;    /* 1.4em = 14px */
}
p span {
    font-size: 2em;    /* 2em = 28px */
}

3 (62,5% của 16px mặc định), tương đương với 10px hoặc 0,625em.

Bây giờ bạn có thể thiết lập

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

4 cho bất kỳ khai báo nào sử dụng đơn vị em, với một chuyển đổi dễ nhớ, bằng cách chia giá trị

body {
    font-size: 62.5%;    /* font-size 1em = 10px */
}
p {
    font-size: 1.4em;    /* 1.4em = 14px */
}
p span {
    font-size: 2em;    /* 2em = 28px */
}

5 cho 10, Bằng cách này

body {
    font-size: 62.5%;    /* font-size 1em = 10px */
}
p {
    font-size: 1.4em;    /* 1.4em = 14px */
}
p span {
    font-size: 2em;    /* 2em = 28px */
}

6,

body {
    font-size: 62.5%;    /* font-size 1em = 10px */
}
p {
    font-size: 1.4em;    /* 1.4em = 14px */
}
p span {
    font-size: 2em;    /* 2em = 28px */
}

7,

body {
    font-size: 62.5%;    /* font-size 1em = 10px */
}
p {
    font-size: 1.4em;    /* 1.4em = 14px */
}
p span {
    font-size: 2em;    /* 2em = 28px */
}

8,

body {
    font-size: 62.5%;    /* font-size 1em = 10px */
}
p {
    font-size: 1.4em;    /* 1.4em = 14px */
}
p span {
    font-size: 2em;    /* 2em = 28px */
}

9, v.v. Hãy xem ví dụ sau:

body {
    font-size: 62.5%;    /* font-size 1em = 10px */
}
p {
    font-size: 1.4em;    /* 1.4em = 14px */
}
p span {
    font-size: 2em;    /* 2em = 28px */
}

Đặt kích thước font chữ với "root em"

Để làm cho mọi thứ đơn giản hơn nữa, CSS3 đã giới thiệu đơn vị

html {
    font-size: 62.5%;    /* font-size 1em = 10px */
}
p {
    font-size: 1.4rem;    /* 1.4rem = 14px */
}
p span {
    font-size: 2rem;    /* 2rem = 20px (not 28px) */
}

0 (viết tắt của "root em") luôn liên quan đến kích thước font chữ của phần tử gốc (

html {
    font-size: 62.5%;    /* font-size 1em = 10px */
}
p {
    font-size: 1.4rem;    /* 1.4rem = 14px */
}
p span {
    font-size: 2rem;    /* 2rem = 20px (not 28px) */
}

1), bất kể phần tử nằm ở đâu trong tài liệu (không giống như đơn vị

h1 {
    font-size: 2em;    /* 32px/16px=2em */
}
p {
    font-size: 0.875em;    /* 14px/16px=0.875em */
}

4 liên quan đến kích thước font chữ của phần tử gốc).

Điều này có nghĩa là

html {
    font-size: 62.5%;    /* font-size 1em = 10px */
}
p {
    font-size: 1.4rem;    /* 1.4rem = 14px */
}
p span {
    font-size: 2rem;    /* 2rem = 20px (not 28px) */
}

3 tương đương với kích thước font chữ của phần tử

html {
    font-size: 62.5%;    /* font-size 1em = 10px */
}
p {
    font-size: 1.4rem;    /* 1.4rem = 14px */
}
p span {
    font-size: 2rem;    /* 2rem = 20px (not 28px) */
}

1,

html {
    font-size: 62.5%;    /* font-size 1em = 10px */
}
p {
    font-size: 1.4rem;    /* 1.4rem = 14px */
}
p span {
    font-size: 2rem;    /* 2rem = 20px (not 28px) */
}

5 theo mặc định trong hầu hết các trình duyệt. Hãy thử một ví dụ để hiểu cách nó thực sự hoạt động:

html {
    font-size: 62.5%;    /* font-size 1em = 10px */
}
p {
    font-size: 1.4rem;    /* 1.4rem = 14px */
}
p span {
    font-size: 2rem;    /* 2rem = 20px (not 28px) */
}

Đặt kích thước font chữ bằng từ khóa

CSS cung cấp một số từ khóa mà bạn có thể sử dụng để xác định kích thước font chữ.

Một font size tuyệt đối có thể được xác định bằng một trong những từ khóa sau:

html {
    font-size: 62.5%;    /* font-size 1em = 10px */
}
p {
    font-size: 1.4rem;    /* 1.4rem = 14px */
}
p span {
    font-size: 2rem;    /* 2rem = 20px (not 28px) */
}

6,

html {
    font-size: 62.5%;    /* font-size 1em = 10px */
}
p {
    font-size: 1.4rem;    /* 1.4rem = 14px */
}
p span {
    font-size: 2rem;    /* 2rem = 20px (not 28px) */
}

7,

html {
    font-size: 62.5%;    /* font-size 1em = 10px */
}
p {
    font-size: 1.4rem;    /* 1.4rem = 14px */
}
p span {
    font-size: 2rem;    /* 2rem = 20px (not 28px) */
}

8,

html {
    font-size: 62.5%;    /* font-size 1em = 10px */
}
p {
    font-size: 1.4rem;    /* 1.4rem = 14px */
}
p span {
    font-size: 2rem;    /* 2rem = 20px (not 28px) */
}

9,

body {
    font-size: large;
}
h1 {
    font-size: larger;
}
p {
    font-size: smaller;
}

0,

body {
    font-size: large;
}
h1 {
    font-size: larger;
}
p {
    font-size: smaller;
}

1 và

body {
    font-size: large;
}
h1 {
    font-size: larger;
}
p {
    font-size: smaller;
}

2. Trong khi đó, kích thước font chữ tương đối có thể được chỉ định bằng cách sử dụng các từ khóa:

body {
    font-size: large;
}
h1 {
    font-size: larger;
}
p {
    font-size: smaller;
}

3 hoặc

body {
    font-size: large;
}
h1 {
    font-size: larger;
}
p {
    font-size: smaller;
}

4. Hãy thử một ví dụ và xem nó hoạt động như thế nào:

body {
    font-size: large;
}
h1 {
    font-size: larger;
}
p {
    font-size: smaller;
}

Lưu ý: Từ khóa

html {
    font-size: 62.5%;    /* font-size 1em = 10px */
}
p {
    font-size: 1.4rem;    /* 1.4rem = 14px */
}
p span {
    font-size: 2rem;    /* 2rem = 20px (not 28px) */
}

9 tương đương với kích thước font chữ mặc định của trình duyệt, thường là 16px. Tương tự như vậy, xx-small tương đương với 9 pixel, x-small là 10 pixel, small là 13 pixel, large là 18 pixel, x-large là 24 pixel và xx-large là 32 pixel.

Mẹo: Bằng cách đặt kích thước font chữ trên phần tử body, bạn có thể đặt kích thước font chữ tương đối ở mọi nơi khác trên trang, cho phép bạn dễ dàng điều chỉnh kích thước font chữ lên hoặc xuống cho phù hợp.

Đặt kích thước font chữ bằng đơn vị khung nhìn

Kích thước font chữ có thể được chỉ định bằng cách sử dụng các đơn vị khung nhìn (viewport unit) như

body {
    font-size: large;
}
h1 {
    font-size: larger;
}
p {
    font-size: smaller;
}

6 hoặc

body {
    font-size: large;
}
h1 {
    font-size: larger;
}
p {
    font-size: smaller;
}

7.

Đơn vị khung nhìn đề cập đến phần trăm kích thước khung nhìn của trình duyệt, trong đó 1vw = 1% chiều rộng khung nhìn và 1vh = 1% chiều cao khung nhìn. Do đó, nếu khung nhìn rộng 1600px, 1vw là 16px.

Hãy thử ví dụ sau bằng cách thay đổi kích thước cửa sổ trình duyệt và xem nó hoạt động như thế nào:

body {
    font-size: 1vw;
}
h1 {
    font-size: 3vw;
}

Tuy nhiên, có một vấn đề với các đơn vị khung nhìn. Trên màn hình nhỏ, font chữ trở nên nhỏ đến mức khó có thể đọc được. Để ngăn chặn điều này, bạn có thể sử dụng hàm

body {
    font-size: large;
}
h1 {
    font-size: larger;
}
p {
    font-size: smaller;
}

8 trong CSS , như sau:

html { 
    font-size: calc(1em + 1vw); 
}
h1 {
    font-size: 3rem;
}

Trong ví dụ này, ngay cả khi chiều rộng khung nhìn trở thành 0, kích thước font chữ sẽ ít nhất là 1em hoặc 16px.

Bạn cũng có thể sử dụng các truy vấn media trong CSS để tạo ra kiểu chữ linh hoạt và đáp ứng tốt hơn.

Font Weight

Thuộc tính

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

3 quy định độ đậm nhạt của font chữ.

Thuộc tính

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

3 có thể có một trong các giá trị sau:

h1 {
    font-size: 24px;
}
p {
    font-size: 14px;
}

7,

body {
    font-size: 1vw;
}
h1 {
    font-size: 3vw;
}

2,

body {
    font-size: 1vw;
}
h1 {
    font-size: 3vw;
}

3,

body {
    font-size: 1vw;
}
h1 {
    font-size: 3vw;
}

4,

body {
    font-size: 1vw;
}
h1 {
    font-size: 3vw;
}

5,

body {
    font-size: 1vw;
}
h1 {
    font-size: 3vw;
}

6,

body {
    font-size: 1vw;
}
h1 {
    font-size: 3vw;
}

7,

body {
    font-size: 1vw;
}
h1 {
    font-size: 3vw;
}

8,

body {
    font-size: 1vw;
}
h1 {
    font-size: 3vw;
}

9,

html { 
    font-size: calc(1em + 1vw); 
}
h1 {
    font-size: 3rem;
}

0,

html { 
    font-size: calc(1em + 1vw); 
}
h1 {
    font-size: 3rem;
}

1,

html { 
    font-size: calc(1em + 1vw); 
}
h1 {
    font-size: 3rem;
}

2,

html { 
    font-size: calc(1em + 1vw); 
}
h1 {
    font-size: 3rem;
}

3 và .

• Các giá trị số từ

  body {
      font-size: 1vw;
  }
  h1 {
      font-size: 3vw;
  }

  5 -

  html { 
      font-size: calc(1em + 1vw); 
  }
  h1 {
      font-size: 3rem;
  }

  3 chỉ định trọng số font chữ, trong đó mỗi số đại diện cho độ đậm nhạt của font chữ.

  body {
      font-size: 1vw;
  }
  h1 {
      font-size: 3vw;
  }

  8 giống như

  h1 {
      font-size: 24px;
  }
  p {
      font-size: 14px;
  }

  7 và

  html { 
      font-size: calc(1em + 1vw); 
  }
  h1 {
      font-size: 3rem;
  }

  1 giống như

  body {
      font-size: 1vw;
  }
  h1 {
      font-size: 3vw;
  }

  2.
• Các giá trị

  body {
      font-size: 1vw;
  }
  h1 {
      font-size: 3vw;
  }

  3 và

  body {
      font-size: 1vw;
  }
  h1 {
      font-size: 3vw;
  }

  4 có liên quan đến độ đậm nhạt của font chữ được kế thừa, trong khi các giá trị khác như

  h1 {
      font-size: 24px;
  }
  p {
      font-size: 14px;
  }

  7 và

  body {
      font-size: 1vw;
  }
  h1 {
      font-size: 3vw;
  }

  2 là độ đậm nhạt tuyệt đối của font chữ.

Hãy thử một ví dụ để hiểu cơ bản thuộc tính này hoạt động như thế nào:

p {
    font-weight: bold;
}

Lưu ý: Hầu hết các font chữ chỉ có sẵn với một số độ đậm nhạt hạn chế; thường chúng chỉ có sẵn ở dạng bình thường và đậm. Trong trường hợp nếu một font chữ không có sẵn với font weight đã chỉ định, một font chữ thay thế gần nhất có font weight đã chỉ định sẽ được chọn.

Font Variant

Thuộc tính

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

5 cho phép nội dung được hiển thị trong một biến thể viết hoa nhỏ đặc biệt.

Chữ viết hoa nhỏ hơi khác so với chữ viết hoa bình thường, trong đó các chữ cái viết thường xuất hiện dưới dạng phiên bản nhỏ hơn của các chữ cái viết hoa tương ứng.