Đọc đơn vị cùng với giá trị
font-size đặt cỡ chữ. Các đơn vị độ dài tuyệt đối trong CSS có px, pt, in, cm và mm. Chúng là đơn vị của cách trình bày CSS; không dùng một con số px để cam kết kích thước vật lí chính xác trên mọi màn hình.
| Cách đặt font-size | Mốc tính trong các ví dụ |
|---|---|
| 20px |Cỡ 20 pixel CSS|
| 1.2em |1,2 lần cỡ chữ của phần tử cha|
| 1.5rem |1,5 lần cỡ chữ của phần tử gốc html|
| 125% |125% cỡ chữ của phần tử cha|
Còn có ex liên quan đến chiều cao chữ x của phông và các từ khóa cỡ như small, medium, large. Kích thước nhìn thấy tùy phông và thiết lập trình duyệt; các bài tính dưới đây cho rõ mốc số.
Cỡ p theo cha, cỡ span theo gốc
```css
html { font-size: 16px; }
body { font-size: 20px; }
p { font-size: 1.2em; }
span { font-size: 1.5rem; }
```
Giả sử p là con của body và span nằm trong p. Cỡ body là 20px, nên p có cỡ 1,2 × 20 = **24px**. Phần tử gốc html có cỡ 16px, nên span có cỡ 1,5 × 16 = **24px**, dù cha trực tiếp của span là p.
Nếu thay font-size của p bằng 125%, mốc vẫn là body 20px và kết quả là 1,25 × 20 = 25px. Phải xác định đúng cha hoặc gốc trước khi nhân.
em dùng ở thuộc tính khác có mốc khác
Khi em dùng cho font-size, ta tính theo cỡ chữ của cha. Khi em dùng trong text-indent hoặc line-height, nó dựa vào cỡ chữ của chính phần tử đang định dạng.
Ví dụ p có font-size: 20px và text-indent: 2em thì độ thụt là 40px. Đây không phải cam kết bằng chiều rộng đúng hai kí tự trong mọi phông.
Với cỡ khác 0 trong các ví dụ số đang học, ghi đơn vị phù hợp, như font-size:18px;. Không bỏ đơn vị thành font-size:18; rồi mặc định đó là 18px.
Bài luyện
Cha có cỡ 20px, p đặt font-size:1.2em. Cỡ p là bao nhiêu?
16px không phải mốc cha đã cho.
Cần nhân 20 với 1,2.
Đúng. 1,2 × 20 = 24.
em không chuyển thành số pixel bằng cách giữ nguyên 1,2.
Lời giải
em dùng ở font-size lấy cỡ chữ cha làm mốc. Cha 20px nên p có cỡ 1,2 × 20 = 24px.
Bài luyện
html 16px, cha trực tiếp 20px, con đặt font-size:1.5rem. Cỡ con là bao nhiêu?
Đúng. rem lấy mốc html 16px.
30px là lấy nhầm cha 20px.
Chưa nhân theo hệ số 1,5.
Đây mới là mốc gốc.
Lời giải
rem dựa vào cỡ chữ phần tử gốc html. Kết quả 1,5 × 16 = 24px; cỡ cha 20px không thay mốc của rem trong ví dụ.
Bài luyện
Cha 20px, con đặt font-size:125%. Cỡ con là bao nhiêu?
125% là hệ số 1,25, không phải 125px.
Không có mốc 16px trong dữ kiện.
Cần nhân với 1,25.
Đúng. 1,25 × 20 = 25.
Lời giải
Phần trăm trong font-size tính theo cỡ chữ cha. 125% =1,25 nên cỡ con bằng 1,25 × 20 = 25px.
Bài luyện
Muốn đặt cỡ 18 pixel CSS, khai báo nào đúng trong các lựa chọn?
Số 18 thiếu đơn vị trong trường hợp này.
Đúng. Có thuộc tính cỡ chữ và đơn vịpx.
font-style không đặt cỡ chữ.
font-family chọn phông.
Lời giải
font-size điều khiển cỡ chữ, còn px là đơn vị cần dùng trong yêu cầu. Viết font-size:18px; đủ cặp thuộc tính–giá trị; ba lựa chọn còn lại thiếu đơn vị hoặc sai thuộc tính.
Đang học