Trên biểu mẫu của tôi [https. //mẫu đơn. dấu gạch nối. com/90560357017151] Tôi đã thêm một số css tùy chỉnh để in đậm văn bản của nút gửi và nó trông ổn trong trình thiết kế biểu mẫu [xem. https. //www. ghi hình. com/t/xdR295dspeCp] nhưng nếu tôi xem trước biểu mẫu thì văn bản không được in đậm, hãy xem. https. //www. ghi hình. com/t/AtTKmljAgpw7
Css tôi đang sử dụng ở bên dưới. Bạn có biết tại sao nó không hiển thị dưới dạng in đậm và/hoặc cách khắc phục không?
Cảm ơn rất nhiều
biểu mẫu-gửi-nút {
lai lịch. #0559d3. quan trọng;
màu. #fff;
-webkit-biên giới-bán kính. 5px;
-moz-biên giới-bán kính. 5px;
bán kính đường viền. 5px;
ranh giới. không ai;
bóng hộp. không ai;
Chiều cao. 60px;
chiều rộng. 180px;
cỡ chữ. 20px. quan trọng;
trọng lượng phông chữ. in đậm;
bóng văn bản. 0 0px #000. quan trọng;
}
Để 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 “trọng lượng” của phông chữ hoặc độ đậm của phông chữ đó. Bạn có thể sử dụng các 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, khi bố cục trang web, đôi khi chúng ta muốn thu hút sự chú ý vào một cái 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 làm nổi bật. Điều này đề cập đến việc làm cho văn bản xuất hiện ở dạng in đậm
Trong bài viết này, chúng ta 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
Tìm trận đấu Bootcamp của bạn
- Career Karma kết hợp bạn với các bootcamp công nghệ hàng đầu
- Truy cập học bổng độc quyền và các khóa học chuẩn bị
Tên
Họ
Điện thoại .
By continuing you agree to our Terms of Service and Privacy Policy , and you consent to receive offers and opportunities from Career Karma by telephone, text message, and email.
CSS đậm. Một người hướng dẫn
Thuộc tính font-weight đặt cách in đậm văn bản 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ề mức độ in đậm của một nhóm 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 số 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 mà bạn muốn đặt cho một thành phần cụ thể
Tỷ lệ đậm CSS
Hãy nghĩ về họ phông chữ của bạn có thang điểm từ 100-1000 trên thang đo độ đậm. Số càng cao, phông chữ càng đậm
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ẽ cho phé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ộ tỷ lệ
Đ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', sử dụng cả số và từ khóa
repl.it
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;
}
Hello World! -- Normal
Hello World! -- Bold
Hello World!
-- Bolder
-- child is bolder than parent
Hello World! -- Lighter
-- child is lighter than parent
Hello World! -- 100
Hello World! -- 200
Hello World! -- 300
Hello World! -- 400 'normal'
Hello World! -- 500
Hello World! -- 600
Hello World! -- 700 'bold'
Hello World! -- 800
Hello World! -- 900
Nhẹ hơn và táo bạo hơn. Họ thực sự có ý nghĩa 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, chúng đậm hay nhạt như thế nào so với phần tử gốc của chúng. Vì vậy, khi chúng ta làm cho một phần tử con đậm hơn, chúng sẽ đậm hơn một phần tử tương đối so với phần tử gốc của chúng – điều tương tự cũng xảy ra với phần tử nhẹ hơn
Trọng lượng phông chữ tương đối như sau
Trọng lượng phông chữ tương đốiTrọng lượng phông chữ thựcthin100normal400bold700heavy900Vì vậy, chúng ta có thể sử dụng font-weight. thuộc tính bold để đặt độ dày phông chữ của một đoạn văn bản thành 800. Khi một đứa trẻ táo bạo hơn cha mẹ chúng một cân nặng tương đối, nó sẽ sử dụng bảng trên để tìm ra mức độ táo bạo.
"Career Karma bước vào cuộc đời tôi khi tôi cần nó nhất và nhanh chóng giúp tôi phù hợp với bootcamp. Hai tháng sau khi tốt nghiệp, tôi đã tìm được công việc mơ ước phù hợp với giá trị và mục tiêu của mình trong cuộc sống. "
Venus, Kỹ sư phần mềm tại Rockbot
Find Your Bootcamp MatchVí dụ: giả sử tôi có một đứa con có cha mẹ có trọng số phông chữ là 400. Nếu tôi đặt giá trị của font-weight trên đứa trẻ thành đậm hơn, thì font-weight trên đứa trẻ sẽ trở thành 700
Điều này là do đứa trẻ đậm hơn một phông chữ tương đối so với cha mẹ. Nếu cha mẹ đã tối hoặc sáng hết mức có thể, thì các giá trị thuộc tính đó sẽ không làm được gì
Ví dụ về trọng lượng phông chữ 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 in đậm tiêu đề Giới thiệu về chúng tôi trên trang Giới thiệu trên trang web của họ. Đ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 trong phông chữ bình thường. Một số cụm từ mà câu lạc bộ muốn thu hút sự chú ý của người xem nên được in đậm
Chúng ta có thể sử dụng đoạn mã sau để tạo khối văn bản này, với một số cụm từ được tô đậm
The Seattle Stamp Club, established in 2009, is a community that encourages and promotes the collection of stamps. The Club welcomes all, 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 250 members.
span { font-weight: bolder; }
Nhấp vào nút
In our HTML file, we have defined a paragraph of text enclosed within
tags. We have also enclosed certain phrases within tags, which we are going to embolden in our CSS code.
Next, in our CSS file, we defined a style rule that sets the font style weight of every tag to bolder . This means that the text enclosed within any tag will appear bolder than the parent element.
When we run our code, our paragraph appears with normal font-weight, and the phrases enclosed within tags appear in bold. In this example, the phrases welcomes all and 250 members are enclosed in tags.
CSS văn bản đậm với phông chữ biến
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ữ biến đổi và có thể lấy bất kỳ số nào trong khoảng từ 1 đến 1000 làm trọng số phông chữ của nó. Hỗ trợ trình duyệt chưa đượ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ề phông chữ biến đổi, hãy xem phần giới thiệu này
Phần 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 phông chữ tương đối cách xa phông chữ của phần tử gốc. 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ẽ trở thành một chuyên gia trong việc tạo kiểu phông chữ với độ dày phông chữ ngay lập tức
Để tìm hiểu thêm về 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 tạo chữ đậm 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