Thuộc tính nào được sử dụng để thay đổi phông chữ trong CSS?

Phạm vi bài viết

• Bài viết này giải thích chi tiết tất cả các thuộc tính CSS khác nhau
• Bài viết này cho biết cách thao tác với các thuộc tính phông chữ khác nhau
• Bài viết này cũng chứa thuộc tính tốc ký phông chữ, cho phép chúng tôi hợp nhất các thuộc tính khác nhau thành một thuộc tính
• Cùng với các giải thích, bài viết cũng chứa mã ví dụ và đầu ra

Giới thiệu

Hãy để chúng tôi bắt đầu bằng cách kiểm tra hình ảnh bên dưới, thể hiện sự so sánh giữa các văn bản trên bất kỳ trang web bình thường nào

Bạn sẽ nhận thấy rằng đoạn chính sẽ bao gồm văn bản, có màu sắc, hình dạng, kích thước, chiều rộng khác nhau, v.v. , và theo đó, chúng có ý nghĩa khác nhau. Nó làm cho trang web của bạn dễ đọc hơn, ấn tượng hơn và thẩm mỹ hơn một cách chuyên nghiệp

Những điều này đạt được bằng cách sử dụng các thuộc tính phông chữ CSS. Vì vậy, bây giờ hãy để chúng tôi hiểu chi tiết các thuộc tính phông chữ CSS. Nói chung, phần chính của trang web bao gồm các thành phần VĂN BẢN như bảng chữ cái, số, từ, câu và đoạn văn được sử dụng để truyền đạt hầu hết ý nghĩa trên trang web. Font chữ có thể gọi là bộ mặt của VĂN BẢN. Nó là một tập hợp các ký tự văn bản có thể hiển thị theo một kiểu và kích thước cụ thể

HTML có thể được sử dụng để cung cấp nội dung văn bản cho trang web, chẳng hạn như đoạn văn, dòng, dấu đầu dòng, v.v. Nhưng để kiểm soát và thao tác mọi khía cạnh (như kích thước, kiểu dáng và màu sắc) của FONTS, chúng tôi sử dụng thuộc tính Phông chữ CSS

Các thuộc tính phông chữ CSS cho phép các nhà phát triển điều chỉnh giao diện của phông chữ trên trang web. Kích thước, kiểu dáng, màu sắc và nhiều thứ khác có thể được thay đổi bằng cách sử dụng các thuộc tính. cho e. g. , nếu nhà phát triển muốn làm cho một phần của văn bản có sức ảnh hưởng hơn, họ có thể ĐẬM phần đó

Tương tự, nếu ai muốn đổi kiểu chữ từ thường (thẳng) sang nghiêng (nghiêng) cũng được. Có rất nhiều điều có thể bằng cách thay đổi thuộc tính phông chữ. Và để làm được điều đó, chúng ta cần tìm hiểu về các thuộc tính phông chữ khác nhau trong CSS

Các thuộc tính phông chữ CSS khác nhau là-

• Màu chữ CSS
• Cỡ chữ CSS
• kiểu phông chữ CSS
• Biến thể phông chữ CSS
• trọng lượng phông chữ CSS
• họ phông chữ CSS
• Kéo dài phông chữ CSS
• chiều cao dòng CSS

Cuối cùng, sau khi thảo luận về tất cả các thuộc tính trên, chúng ta sẽ thảo luận về thuộc tính tốc ký phông chữ CSS, thuộc tính này sẽ giúp chúng ta kết hợp & chỉ định tất cả các thuộc tính trên trong một thuộc tính duy nhất

Bây giờ, chúng ta hãy thảo luận từng cái một về tất cả các thuộc tính Phông chữ CSS

Màu phông chữ CSS

Thuộc tính color được sử dụng để đặt màu cho văn bản/phông chữ trên trang web. Giá trị được cung cấp cho thuộc tính màu sẽ là màu của phông chữ

cú pháp

color: < color name >;
color: < hex code >;
color: < rgb( ) >;
color: < hsl( ) >;
Bất kỳ phương pháp gán giá trị nào ở trên đều có thể được sử dụng để đặt màu của văn bản
Các phương pháp khác nhau là-
Tên màu - đỏ, xanh dương, xanh lục, v.v. Vì vậy, nó sẽ làm cho các phần tử của màu đó
Mã hex - Đó là đại diện thập lục phân của một màu. Mã được tạo theo các giá trị Đỏ, Xanh lam, Xanh lam có màu và được đặt trước một hàm băm (#), #RRGGBB. ví dụ-#ff00f2
rgb() - Đây là một trong những phương pháp phổ biến nhất. Nó lấy cường độ của giá trị màu Đỏ-Lục-Xanh nằm trong khoảng từ 0-255 hoặc từ 0% đến 100%. ví dụ. - rgb(0,255,0)
hsl() - Đây là phương thức lấy giá trị Hue, Saturation và Lightness của màu. Nó có thể hữu ích khi bạn có thể chọn một màu dựa trên trí tưởng tượng của bạn. ví dụ. - hsl(59, 100%, 50%)
Thí dụ. Ở đây, trong ví dụ này, chúng tôi đang tạo bốn tiêu đề bằng cách sử dụng các thành phần tiêu đề khác nhau của HTML (h1,h2,h3,h4), sau đó chúng tôi sẽ chọn các thành phần đó và áp dụng các màu khác nhau bằng các phương pháp ứng dụng khác nhau. Chúng tôi sẽ áp dụng màu xanh lam cho tiêu đề 1, màu tím cho tiêu đề 2, xanh lục cho tiêu đề 3 và màu vàng cho tiêu đề 4



    



    This is heading 1
    
This is heading 2
    
This is heading 3
    
This is heading 4



đầu ra

Cỡ chữ CSS

Trong CSS, thuộc tính kích thước phông chữ được sử dụng để đặt hoặc điều chỉnh kích thước của phông chữ. Nó có thể có một số giá trị có thể là tuyệt đối (e. g. - xx-nhỏ, vừa, xx-lớn. ) hoặc tương đối (lớn hơn, nhỏ hơn, %) hoặc độ dài (được đánh số- 12px, 1em, v.v. )

cú pháp

font-size: xx-small | x-large | xx-large | larger | smaller | 20% | 2em | 7px;
Bất kỳ giá trị nào cũng có thể được sử dụng cho thuộc tính cỡ chữ
Bây giờ, chúng ta sẽ nói về các loại giá trị khác nhau có thể được gán cho thuộc tính cỡ chữ
kích thước tuyệt đối
Kích thước tuyệt đối được sử dụng để đặt kích thước phông chữ dựa trên các kích thước được xác định trước. Giá trị mặc định của kích thước tuyệt đối là trung bình. Nó có thể có các giá trị bắt đầu từ xx-nhỏ đến xx-lớn
Cú pháp kích thước tuyệt đối



font-size: xx-small | x-small | small | medium | large | x-large | xx-large ;
Kích thước tương đối
Mặc dù kích thước tuyệt đối dễ sử dụng, nhưng nó khiến chúng tôi kém linh hoạt hơn và với tư cách là nhà phát triển, để bao quát hơn tất cả người dùng, chúng tôi sử dụng kích thước tương đối. Nó đặt phông chữ tương ứng với kích thước phông chữ của phần tử gốc. Nó có thể có hai giá trị - nhỏ hơn và lớn hơn
Bây giờ, giả sử một phần tử cha có cỡ chữ trung bình, sau đó chúng ta tạo một phần tử con và đặt cỡ chữ của nó. lớn hơn, thì nó sẽ gán một giá trị lớn hơn kích thước 'trung bình'. Cuối cùng, kích thước của phần tử con sẽ là "lớn"
Kích thước tương đối Cú pháp
font-size: larger | smaller;
Chiều dài. Chúng ta cũng có thể sử dụng các giá trị độ dài bằng số như 23,54, v.v. , với các đơn vị như px, cm, v.v. Nó cho phép kiểm soát nhiều hơn kích thước của văn bản
cỡ chữ. 10px. 12cm. 1em;
em là thước đo kích thước văn bản mặc định trong trình duyệt, 1em=16px
Sử dụng % cũng là một loại kích thước tương đối
Cỡ chữ. 20%;
Trong ví dụ trên, nếu kích thước của phần tử cha là 100px, thì kích thước của phần tử con sẽ là 20px
Ví dụ Trong ví dụ này, chúng ta sẽ thực hiện bốn phép chia khác nhau bằng cách sử dụng
thẻ và sau đó chúng tôi sẽ thêm văn bản vào đó. Sau đó, chúng tôi sẽ áp dụng thuộc tính kích thước phông chữ cho từng div, nhưng với các giá trị và phương thức khác nhau. 



    


    
This is 20px.




    
This is large.
    
This is 200%.
    
This is small



đầu ra

Trọng lượng phông chữ CSS

Trọng lượng của phông chữ đề cập đến độ dày của phông chữ, tôi. e. , phông chữ sẽ dày hay mỏng như thế nào trên trang web. Thuộc tính font-weight của CSS được sử dụng để thiết lập độ dày/độ dày/độ đậm của phông chữ

Nó phụ thuộc vào các trọng số được chỉ định của trình duyệt hoặc các phông chữ có sẵn trong một họ phông chữ. Nó có thể có các giá trị tuyệt đối hoặc tương đối hoặc số như bình thường, đậm, nhạt hơn, đậm hơn, 100, 400. Mặc dù vậy, chúng tôi không cần chỉ định bất kỳ đơn vị nào trong khi sử dụng các giá trị số

400 có trọng lượng như bình thường và 700 có trọng lượng như in đậm

cú pháp

font-weight: normal | bold | bolder | lighter | ;
Giá trị số tương ứng với
Thí dụ. Ở đây trong ví dụ này, chúng tôi sẽ tạo hai đoạn chứa văn bản có các thuộc tính phông chữ khác nhau và chúng tôi sẽ gán các thuộc tính phông chữ bằng cách sử dụng thuộc tính tốc ký phông chữ CSS
 

			
Thuộc tính nào sau đây dùng để thay đổi kiểu chữ của văn bản?
			
Thuộc tính phông chữ  font property  là thuộc tính tốc ký cho. kiểu chữ. biến thể phông chữ. trọng lượng phông chữ. 
		
			
Việc sử dụng thuộc tính phông chữ trong CSS là gì?
			
Thuộc tính Phông chữ CSS được sử dụng  để kiểm soát giao diện của văn bản . Bằng cách sử dụng thuộc tính phông chữ CSS, bạn có thể thay đổi kích thước văn bản, màu sắc, kiểu dáng, v.v. Bạn đã học cách in đậm hoặc gạch chân văn bản.