Kích thước phông chữ CSS
Cỡ chữ
Thuộc font-sizetính đặt kích thước của văn bản.
Có thể quản lý kích thước văn bản là điều quan trọng trong thiết kế web. Tuy nhiên, bạn không nên sử dụng các điều chỉnh kích thước phông chữ để làm cho các đoạn văn trông giống như tiêu đề hoặc các tiêu đề giống như đoạn văn.
Luôn sử dụng các thẻ HTML thích hợp, như <h1> - <h6> cho các 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 thành 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 hợp lý vì lý do trợ năng)
- Kích thước tuyệt đối hữu ích khi kích thước vật lý của đầu ra được biết
Kích thước tương đối:
- Đặt kích thước so với các yếu 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 kích thước phông chữ, kích thước mặc định cho văn bản bình thường, như đoạn văn, là 16px (16px = 1em).
Đặt kích thước phông chữ với điểm ảnh
Đặt kích thước văn bản bằng pixel cung cấp cho bạn toàn quyền kiểm soát kích thước văn bản:
Thí dụ
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 14px;
}
Mẹo: Nếu bạn 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 kích thước phông chữ bằng 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 thành em bằng công thức sau: pixel / 16 = em
Thí 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 */
}
Trong ví dụ trên, kích thước văn bản tính bằng em cũng giống như ví dụ trước tính bằng pixel. Tuy nhiên, với kích thước em bé, có thể điều chỉnh kích thước văn bản trong tất cả các trình duyệt.
Thật không may, vẫn còn sự cố với các phiên bản Internet Explorer cũ hơn. Văn bản trở nên lớn hơn so với khi được tạo ra lớn hơn và nhỏ hơn so với 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 trên tất cả các trình duyệt là đặt kích thước phông chữ mặc định tính bằng phần trăm cho phần tử <body>:
Thí dụ
body {
font-size: 100%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875em;
}
p {
font-size: 0.875em;
}
Mã của chúng tôi bây giờ hoạt động tốt! Nó hiển thị cùng một 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 thu phóng 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 một vwđơn vị, 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ữ thay đổi như thế nào.
Thí dụ
<h1 style="font-size:10vw">Hello World</h1>
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, 1vw là 0,5cm.