Thuộc tính kích thước phông chữ CSS đặt kích thước phông chữ của bất kỳ phần tử văn bản nào trên trang hoặc trang web của bạn. Thuộc tính font-size có thể được áp dụng cho bất kỳ lớp, ID hoặc phần tử nào bao gồm nội dung văn bản. Thuộc tính chấp nhận các giá trị bằng px, em, rem, vw, vh và sử dụng từ khóa.
Hầu hết các nhà phát triển sử dụng kết hợp các kích thước phông chữ khác nhau để tạo kiểu cho một trang web. Ví dụ:nhà phát triển web có thể sử dụng phông chữ lớn cho tiêu đề và phông chữ nhỏ hơn cho văn bản nội dung và các phông chữ khác. Vì vậy, nhiều người hỏi:làm cách nào để thay đổi kích thước phông chữ trong CSS hoặc HTML?
CSS font-size thuộc tính cho phép các nhà phát triển đặt kích thước phông chữ trong một đoạn văn hoặc dòng văn bản trên trang web.
Hướng dẫn này thảo luận, có tham chiếu đến các ví dụ, cách sử dụng font-size bất động sản. Xem qua hướng dẫn này cho phép bạn trở thành chuyên gia trong việc thay đổi kích thước văn bản.
CSS font-Size
Kiểu phông chữ phù hợp là một phần quan trọng của thiết kế web. Văn bản chưa được đánh mẫu gây khó khăn cho việc đọc đối với khách truy cập, điều này gần như chắc chắn dẫn đến trải nghiệm trang web khó chịu.
Có nhiều kiểu CSS cho phông chữ có thể được sử dụng để tùy chỉnh cách văn bản xuất hiện, như font-weight, font-family, text-decoration và color. Một thuộc tính quan trọng khác là kích thước phông chữ, kiểm soát kích thước của phông chữ trong một khối văn bản.
Cú pháp cho CSS font-size tài sản là:
font-size: sizeValue;
sizeValue là kích thước phông chữ bạn muốn một khối văn bản sử dụng. Có một số cách để chỉ định kích thước phông chữ được sử dụng bởi một khối văn bản. Các phương pháp chúng ta sẽ thảo luận trong bài viết này là:
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 một cuộc thi đà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ọ.
- pixel
- em
- root em
- đơn vị khung nhìn
- từ khoá
Hãy để chúng tôi khám phá một ví dụ về cách sử dụng từng cách tiếp cận kích thước phông chữ trên một trang web.
Đặt kích thước phông chữ bằng điểm ảnh
Một trong những cách phổ biến nhất để đặt kích thước phông chữ là sử dụng pixel.
Điểm ảnh là một đơn vị đo lường tốt vì chúng cho phép bạn chính xác. Đơn vị pixel phần lớn không bị ảnh hưởng bởi hệ điều hành hoặc trình duyệt web. Một pixel trên một màn hình là một pixel trên màn hình khác. Giá trị pixel bạn chỉ định gần như sẽ xuất hiện giống nhau trên các trình duyệt khác nhau.
Tuy nhiên, việc sử dụng pixel để đặt kích thước phông chữ trong một khối văn bản có một hạn chế:khả năng truy cập. Kích thước phông chữ được xác định bằng pixel không thể truy cập được vì một số trình duyệt không cho phép người dùng tùy chỉnh kích thước phông chữ. Ví dụ:người dùng khiếm thị có thể gặp khó khăn khi sử dụng một trang web sử dụng pixel để xác định kích thước phông chữ.
Giả sử chúng tôi đang tạo một trang web có kích thước phông chữ là 28px cho tất cả <h1> phần tử và 12px cho tất cả <p> các yếu tố. Chúng tôi có thể sử dụng mã sau để thực hiện nhiệm vụ này:
h1 { font-size: 28px; }
p ( font-size: 12px; }
Trong mã của chúng tôi, chúng tôi đã sử dụng bộ chọn CSS đặt kích thước phông chữ của tất cả <h1> các phần tử thành 28px và tất cả <p> phần tử thành 12px . Đoạn mã sau đây cho biết cách các phần tử này xuất hiện với kích thước phông chữ mới của chúng tôi:
<style>
h1 { font-size: 28px; }
p { font-size: 12px; }
</style>
<html>
<h1>This is a heading.</h1>
<p>This is a paragraph of text.</p>
</html>
Đặt kích thước phông chữ bằng ems
Một cách phổ biến khác để đặt kích thước của phông chữ trong CSS là sử dụng các kích thước em. Đơn vị đo em đề cập đến kích thước phông chữ của phần tử mẹ. Nếu bạn đặt kích thước phông chữ thành 2em , kích thước phông chữ sẽ gấp đôi kích thước của phần tử mẹ.
Ví dụ về Định cỡ phông chữ CSS với ems
Ví dụ:giả sử bạn có một đoạn văn bản được lưu trữ trong một hộp. Kích thước phông chữ của hộp là 20px . Nếu bạn đã chỉ định kích thước phông chữ của đoạn văn bản là 1em , kích thước phông chữ của đoạn sẽ là 20px . Điều này giống với kích thước phông chữ của phần tử mẹ.
Nếu bạn chưa đặt kích thước phông chữ cho phần tử mẹ, trình duyệt sẽ sử dụng giá trị mặc định được chỉ định cho trình duyệt đó. Đây thường là 16px . Do đó, nếu bạn chưa chỉ định bất kỳ kích thước phông chữ nào, hãy 1em theo mặc định là 16px , 2em theo mặc định là 32px .
Giả sử kích thước phông chữ của trang web của chúng tôi là 16px . Chúng tôi muốn tất cả các đoạn văn bản xuất hiện bằng cách sử dụng cỡ chữ đó, có nghĩa là chúng tôi nên sử dụng giá trị 1em . Ngoài ra, chúng tôi muốn tất cả các tiêu đề của chúng tôi xuất hiện với kích thước phông chữ là 24px , bằng 1.5em .
Chúng tôi có thể sử dụng mã sau để thực hiện nhiệm vụ này:
p { font-size: 1em; }
h1 { font-size: 1.5em; }
Trong mã của chúng tôi, kích thước của tất cả các đoạn sẽ là 16px (1em =16px theo mặc định) và tất cả <h1> các phần tử sẽ là 24px (1.5em =24px ).
Đây là cách văn bản của chúng tôi sẽ xuất hiện trên trang web:
<style>
p { font-size: 1em; }
h1 { font-size: 1.5em; }
</style>
<html>
<h1>This is a heading.</h1>
<p>This is a paragraph of text.</p>
</html>
Trong ví dụ trên, bạn có thể thấy các kiểu mới cho cả <h1> của chúng tôi và <p> các phần tử.
Bạn cần lưu ý rằng nếu <h1> của chúng tôi xuất hiện trong một hộp có kích thước phông chữ khác, kích thước bằng <h1> của chúng tôi sẽ thay đổi. Điều này là do các giá trị em kế thừa kích thước phông chữ của cha mẹ chúng.
Đặt kích thước phông chữ bằng em gốc
Viết tắt của root em, rem là một đơn vị đo lường mới được giới thiệu trong CSS3 có thể được sử dụng để đặt kích thước phông chữ. Giá trị sử dụng rem có liên quan đến <html> gốc , thay vì phần tử mẹ.
rem giá trị hữu ích vì chúng cho phép bạn chỉ định một giá trị liên quan đến toàn bộ tài liệu. Bằng cách này, kích thước văn bản của bạn sẽ không bị ảnh hưởng nếu phần tử mẹ có giá trị em khác.
Giả sử chúng ta có một trang web với kích thước phông chữ mặc định là 16px . Giống như trong ví dụ trước, chúng tôi muốn tất cả <h1> s xuất hiện trong 24px và tất cả các đoạn xuất hiện trong 16px . Chúng tôi có thể đặt các kích thước phông chữ này bằng cách sử dụng mã sau:
<style>
p { font-size: 1rem; }
h1 { font-size: 1.5rem; }
</style>
<html>
<h1>This is a heading.</h1>
<p>This is a paragraph of text.</p>
</html>
Mã của chúng tôi gần giống như trong ví dụ trước của chúng tôi. Sự khác biệt duy nhất là đơn vị đo lường chúng tôi sử dụng là rem thay vì em . Trong ví dụ này, kích thước phông chữ của chúng tôi sẽ vẫn là 24px và 16px cho các tiêu đề và đoạn văn cấp cao nhất, tương ứng. Đó là vì kích thước phông chữ mặc định của trang web của chúng tôi là 16px .
Đặt kích thước phông chữ bằng từ khóa
Có hai loại từ khóa bạn có thể sử dụng để đặt kích thước của phông chữ trong CSS.
Từ khóa tuyệt đối được sử dụng để đặt kích thước phông chữ không đổi, bất kể các thay đổi đối với trang web. Các từ khóa bạn có thể sử dụng để đặt kích thước phông chữ tuyệt đối như sau:
-
xx-small(9px) -
x-small(10px) -
small(13px) -
medium(16px) -
large(18px) -
x-large(24px) -
xx-large(32px)
Các giá trị được chỉ định trong dấu ngoặc đơn dựa trên trình duyệt có kích thước phông chữ mặc định là 16px .
Mặt khác, từ khóa tương đối đặt kích thước phông chữ sẽ thay đổi tùy thuộc vào kích thước phông chữ ở những nơi khác trên trang web. Các từ khóa tương đối bạn có thể sử dụng là:nhỏ hơn và lớn hơn. Những từ khóa này hữu ích vì chúng cho phép bạn thay đổi kích thước phông chữ của mình khi các kích thước phông chữ khác trên trang thay đổi.
Giả sử chúng ta muốn đặt kích thước của tất cả <h2> các phần tử trên trang thành 24px (x-large) và tất cả <h3> các phần tử thành 18px (lớn). Chúng tôi có thể làm như vậy bằng cách sử dụng mã này:
<style>
h2 { font-size: x-large; }
h3 { font-size: large; }
</style>
<html>
<h2>This is a heading.</h2>
<p>This is some paragraph text.</p>
<h3>This is a lower-level heading.</h3>
<p>This is some more paragraph text.</p>
</html>
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.
Các kích thước phông chữ cho <h2> của chúng tôi và <h3> các thẻ là 24px và 18px , tương ứng. Tuy nhiên, chúng tôi đã không chỉ định các kích thước này bằng cách sử dụng pixel. Thay vào đó, chúng tôi đã sử dụng các từ khóa có kích thước phông chữ mặc định do trình duyệt cung cấp.
Đặt kích thước phông chữ bằng cách sử dụng đơn vị khung nhìn
Đơn vị khung nhìn được tính theo tỷ lệ phần trăm của kích thước khung nhìn của trình duyệt. Hai đơn vị khung nhìn được CSS hỗ trợ là:view height (vh ) và chiều rộng xem (vw ).
Bởi vì đơn vị khung nhìn là một tỷ lệ phần trăm của kích thước khung nhìn của trình duyệt, 1vh chẳng hạn bằng 1% chiều cao khung nhìn. Vì vậy, nếu bạn có chế độ xem rộng 1000px, 1vh bằng 10px.
Sử dụng đơn vị khung nhìn rất hữu ích vì kích thước phông chữ của bạn sẽ thay đổi khi bạn thay đổi kích thước cửa sổ trình duyệt. Đổi lại, điều này cho phép bạn mang đến trải nghiệm người dùng dễ tiếp cận hơn, thích ứng với các kích thước thiết bị và trình duyệt khác nhau.
Giả sử chúng tôi muốn tạo một trang web có tiêu đề bằng 4% chiều rộng của khung nhìn và có các đoạn văn bằng 1% chiều rộng của khung nhìn. Chúng tôi có thể làm như vậy bằng cách sử dụng mã này:
<style>
p { font-size: 1vw; }
h1 { font-size: 4vw; }
</style>
<html>
<h1>This is a heading.</h1>
<p>This is a paragraph of text.</p>
</html>
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.
Nếu bạn thay đổi kích thước trình duyệt, kích thước của các tiêu đề này sẽ thay đổi.
Kết luận
Thuộc tính font-size được sử dụng trong CSS (và do đó là HTML) để thay đổi kích thước của phông chữ. Nó chấp nhận một số đơn vị đo lường trong đó kích thước phông chữ có thể được hiển thị, bao gồm pixel, em, rem, từ khóa và đơn vị khung nhìn. Nó có thể được áp dụng cho các lớp CSS và ID, cũng như cho chính các phần tử.
Hướng dẫn này đã trình bày những kiến thức cơ bản về kích thước phông chữ CSS. Bây giờ bạn đã sẵn sàng để bắt đầu sử dụng thuộc tính font-size như một chuyên gia.