Để tạo hiệu ứng chữ đậm CSS, bạn phải sử dụng thuộc tính font-weight. Thuộc tính font-weight xác định "độ đậm" của phông chữ hoặc độ đậm của phông chữ đó. Bạn có thể sử dụng từ khóa hoặc giá trị số để hướng dẫn CSS về độ đậm của một đoạn văn bản.
Là nhà phát triển, trong việc sắp xếp bố cục một trang web, đôi khi chúng ta muốn thu hút sự chú ý vào một thứ gì đó. Có một số cách chúng ta có thể làm điều đó. Cách cơ bản nhất là tăng font-weight của văn bản bạn muốn đánh dấu. Điều này đề cập đến việc làm cho văn bản xuất hiện dưới dạng khuyến khích.
Trong bài viết này, chúng tôi sẽ nói về font-weight, cách đặt nó và đưa ra minh họa về các giá trị khác nhau có thể có cho thuộc tính.
CSS Bold:Hướng dẫn
Thuộc tính font-weight đặt cách văn bản in đậm sẽ xuất hiện trên màn hình. Bạn có thể sử dụng từ khóa hoặc giá trị số để hướng dẫn CSS về cách in đậm của một tập hợp văn bản cụ thể.
Cú pháp của thuộc tính CSS font-weight như sau:
font-weight: weightOfFont;
Giá trị của weightOfFont là trọng lượng của phông chữ bạn muốn sử dụng cho phần tử mà kiểu được áp dụng.
Thuộc tính font-weight chấp nhận một vài giá trị khác nhau, tùy thuộc vào font-weight bạn muốn đặt cho một phần tử cụ thể.
Thang đậm CSS
Hãy nghĩ về họ phông chữ của bạn có thang điểm từ 100-1000 trên thang độ đậm. Số càng cao, phông chữ càng đậm.
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia chương trình đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
Thực hiện một số nghiên cứu về họ phông chữ ưa thích của bạn. Điều này sẽ giúp bạn chắc chắn rằng kết quả sẽ nhạt hoặc đậm như bạn muốn trên trang web của mình. Một số họ phông chữ không sử dụng toàn bộ quy mô.
Đoạn mã sau minh họa mức độ sáng và tối của một phông chữ phổ biến có tên là ‘Arial’ có thể nhận được như thế nào, sử dụng cả số và từ khóa:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<style>
body {
font-family: 'Arial';
font-size: 3rem;
}
span {
font-size: 1.5rem;
}
p:nth-child(1) {
font-weight: normal;
}
p:nth-child(2) {
font-weight: bold;
}
p:nth-child(3) span {
font-weight: bolder;
}
p:nth-child(4) span {
font-weight: lighter;
}
p:nth-child(5) {
font-weight: 100;
}
p:nth-child(6) {
font-weight: 200;
}
p:nth-child(7) {
font-weight: 300;
}
p:nth-child(8) {
font-weight: 400;
}
p:nth-child(9) {
font-weight: 500;
}
p:nth-child(10) {
font-weight: 600;
}
p:nth-child(11) {
font-weight: 700;
}
p:nth-child(12) {
font-weight: 800;
}
p:nth-child(13) {
font-weight: 900;
}
</style>
</head>
<body>
<p>Hello World! <span>-- Normal</span></p>
<p>Hello World! <span>-- Bold</span></p>
<p>Hello World!
<span>-- Bolder
<br>
-- child is bolder than parent
</span></p>
<p>Hello World! <span>-- Lighter
<br>
-- child is lighter than parent
</span>
</p>
<p>Hello World! <span>-- 100</span></p>
<p>Hello World! <span>-- 200</span></p>
<p>Hello World! <span>-- 300</span></p>
<p>Hello World! <span>-- 400 'normal'</span></p>
<p>Hello World! <span>-- 500</span></p>
<p>Hello World! <span>-- 600</span></p>
<p>Hello World! <span>-- 700 'bold'</span></p>
<p>Hello World! <span>-- 800</span></p>
<p>Hello World! <span>-- 900</span></p>
</body>
</html> Nhẹ hơn và đậm hơn:Chúng thực sự có nghĩa là gì?
Điều chính cần được chỉ ra ở đây là nhẹ hơn và táo bạo hơn không phải là một bản dịch theo nghĩa đen. Đậm hơn ở đây không có nghĩa là "đậm hơn đậm".
Đậm hơn và nhạt hơn thực sự có nghĩa là, trong ngữ cảnh này, độ đậm hoặc nhạt của chúng trong mối quan hệ với thành phần mẹ của chúng. Vì vậy, khi chúng tôi làm cho phần tử con đậm hơn, chúng sẽ tối hơn một phần tử có trọng lượng phông chữ tương đối so với phần tử gốc - tương tự như vậy sẽ nhẹ hơn.
Trọng số phông chữ tương đối như sau:
| Relative font-weight | Font-weight thực tế |
| mỏng | 100 |
| bình thường | 400 |
| in đậm | 700 |
| nặng | 900 |
Vì vậy, chúng ta có thể sử dụng thuộc tính font-weight:bold để đặt font-weight của một đoạn văn bản thành 800. Khi một đứa trẻ lớn hơn cha mẹ của chúng một trọng lượng tương đối, nó sẽ sử dụng bảng trên để tìm ra độ đậm để làm nó.
Ví dụ:giả sử tôi có một đứa trẻ có cha mẹ có font-weight là 400. Nếu tôi đặt giá trị của font-weight trên đứa trẻ đó thành đậm hơn, font-weight trên đứa trẻ sẽ trở thành 700.
Điều này là do con có trọng lượng phông chữ tương đối tối hơn so với cha mẹ. Nếu cấp độ gốc đã tối hoặc sáng hết mức có thể, thì các giá trị thuộc tính đó sẽ không ảnh hưởng gì.
Ví dụ về độ đậm phông chữ trong CSS
Giả sử chúng ta đang thiết kế một trang web cho Câu lạc bộ Tem Seattle, một hội tem địa phương. Hiệp hội tem đã yêu cầu chúng tôi thực hiện Giới thiệu về chúng tôi tiêu đề về Giới thiệu trang của trang web của họ xuất hiện bằng chữ in đậm. Điều này sẽ thu hút sự chú ý của khách truy cập vào tiêu đề.
Câu lạc bộ tem đã yêu cầu chúng tôi thêm một khối văn bản vào trang web của họ với lịch sử của câu lạc bộ. Khối văn bản này sẽ xuất hiện ở trọng lượng phông chữ bình thường. Các cụm từ nhất định mà câu lạc bộ muốn thu hút sự chú ý của người xem, phải được in đậm.
Chúng tôi có thể sử dụng mã sau để tạo khối văn bản này, với một số cụm từ nhất định được khuyến khích:
<html>
<p>The Seattle Stamp Club, established in 2009, is a community that encourages and promotes the collection of stamps. The Club <span>welcomes all</span>, from beginners to experts, and hosts monthly meetings where members can show each other their stamps, discuss the latest news in stamps, and bond over their shared interests. Right now, the club has <span>250 members</span>.</p>
<style>
span {
font-weight: bolder;
}
nút trong trình chỉnh sửa mã ở trên để xem đầu ra của mã HTML / CSS của chúng tôi.
Trong tệp HTML của chúng tôi, chúng tôi đã xác định một đoạn văn bản nằm trong các thẻ
. Chúng tôi cũng đã kèm theo một số cụm từ nhất định trong thẻ , chúng tôi sẽ đưa vào mã CSS của mình.
Tiếp theo, trong tệp CSS của mình, chúng tôi đã xác định quy tắc kiểu đặt trọng lượng kiểu phông chữ của mọi thẻ thành đậm hơn . Điều này có nghĩa là văn bản nằm trong bất kỳ thẻ nào sẽ xuất hiện đậm hơn phần tử mẹ.
Khi chúng tôi chạy mã của mình, đoạn văn của chúng tôi xuất hiện với trọng lượng phông chữ bình thường và các cụm từ nằm trong thẻ được in đậm. Trong ví dụ này, các cụm từ hoan nghênh tất cả và 250 thành viên được đặt trong các thẻ .
Văn bản in đậm CSS với phông chữ có thể thay đổi
Có một số phông chữ mới hơn được cung cấp cho chúng tôi thông qua Cấp độ Phông chữ CSS mới nhất. Chúng được gọi là phông chữ có thể thay đổi và có thể lấy bất kỳ số từ 1 đến 1000 làm trọng lượng phông chữ của nó. Hỗ trợ trình duyệt không được triển khai đầy đủ cho đến tháng 5 năm 2020, vì vậy chúng còn khá mới. Nếu bạn muốn biết thêm thông tin về các phông chữ thay đổi, hãy xem phần giới thiệu này.
Kết luận
Trong hướng dẫn này, chúng ta đã thảo luận về thuộc tính CSS font-weight và cách nó ảnh hưởng đến độ đậm của phông chữ.
Chúng tôi đã học được rằng đậm hơn và nhẹ hơn có nghĩa là một font-weight tương đối cách xa font-weight của phần tử mẹ. Trong thực tế, chúng tôi đã thấy một loạt các trọng số phông chữ để xem văn bản trông như thế nào. Bạn sẽ là người chuyên nghiệp trong việc tạo kiểu phông chữ với trọng lượng phông chữ ngay lập tức!
Để tìm hiểu thêm về cách viết mã trong CSS, hãy đọc hướng dẫn của chúng tôi về cách học CSS. Bạn có thể đọc hướng dẫn của chúng tôi về cách in đậm văn bản trong HTML nếu bạn muốn làm đậm văn bản của mình mà không cần dựa vào CSS.