Kích thước phông chữ CSS
Cỡ chữ
Thuộc tính font-size
thiết lập kích thước của văn bản.
Khả năng quản lý kích thước văn bản rất quan trọng trong thiết kế web. Tuy nhiên, bạn không nên sử dụng chức năng điều chỉnh cỡ chữ để đoạn văn trông giống tiêu đề, hoặc tiêu đề giống đoạn văn.
Luôn sử dụng các thẻ HTML thích hợp, như <h1> - <h6> cho tiêu đề và <p> cho các đoạn văn.
Giá trị kích thước phông chữ có thể là kích thước tuyệt đối hoặc tương đối.
Kích thước tuyệt đối:
- Đặt văn bản theo kích thước được chỉ định
- Không cho phép người dùng thay đổi kích thước văn bản trong tất cả các trình duyệt (không tốt vì lý do khả năng truy cập)
- Kích thước tuyệt đối rất hữu ích khi biết kích thước vật lý của đầu ra
Kích thước tương đối:
- Đặt kích thước tương ứng với các phần tử xung quanh
- Cho phép người dùng thay đổi kích thước văn bản trong trình duyệt
Lưu ý: Nếu bạn không chỉ định cỡ chữ, kích thước mặc định cho văn bản thông thường, như đoạn văn, là 16px (16px=1em).
Đặt cỡ chữ bằng pixel
Đặt kích thước văn bản bằng pixel cho phép bạn kiểm soát hoàn toàn kích thước văn bản:
Mẹo: Nếu sử dụng pixel, bạn vẫn có thể sử dụng công cụ thu phóng để thay đổi kích thước toàn bộ trang.
Đặt cỡ chữ với Em
Để cho phép người dùng thay đổi kích thước văn bản (trong menu trình duyệt), nhiều nhà phát triển sử dụng em thay vì pixel.
1em bằng cỡ chữ hiện tại. Kích thước văn bản mặc định trong trình duyệt là 16px. Vì vậy, kích thước mặc định của 1em là 16px.
Kích thước có thể được tính từ pixel đến em bằng công thức sau: pixel /16= em
Ví dụ
h1 {
font-size: 2.5em; /* 40px/16=2.5em */
}
h2 {
font-size: 1.875em; /* 30px/16=1.875em */
}
p {
font-size: 0.875em; /* 14px/16=0.875em */
}
Hãy tự mình thử »Trong ví dụ trên, kích thước văn bản trong em giống với ví dụ trước tính bằng pixel. Tuy nhiên, với em size thì có thể điều chỉnh được kích thước chữ trên mọi trình duyệt.
Thật không may, vẫn còn một vấn đề với các phiên bản Internet Explorer cũ hơn. Văn bản trở nên lớn hơn mức cần thiết khi được làm lớn hơn và nhỏ hơn mức cần thiết khi được làm nhỏ hơn.
Sử dụng kết hợp Phần trăm và Em
Giải pháp hoạt động trong tất cả các trình duyệt là đặt kích thước phông chữ mặc định theo phần trăm cho phần tử <body>:
Ví dụ
body {
font-size: 100%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875em;
}
p {
font-size: 0.875em;
}
Hãy tự mình thử »Mã của chúng tôi hiện hoạt động rất tốt! Nó hiển thị cùng kích thước văn bản trong tất cả các trình duyệt và cho phép tất cả các trình duyệt phóng to hoặc thay đổi kích thước văn bản!
Kích thước phông chữ đáp ứng
Kích thước văn bản có thể được đặt bằng đơn vị vw
, có nghĩa là "chiều rộng khung nhìn".
Bằng cách đó, kích thước văn bản sẽ tuân theo kích thước của cửa sổ trình duyệt:
Chào thế giới
Thay đổi kích thước cửa sổ trình duyệt để xem kích thước phông chữ có tỷ lệ như thế nào.
Viewport là kích thước cửa sổ trình duyệt. 1vw = 1% chiều rộng khung nhìn. Nếu khung nhìn rộng 50cm thì 1vw là 0,5cm.