Bài 13: Phông chữ trong CSS (CSS Fonts)
Thuộc tính phông chữ trong CSS xác định loại phông chữ, độ đậm, kích cỡ và kiểu của văn bản
Chúng ta hãy cùng xem ví dụ đầu tiên:
Sự khác biệt giữa phông chữ Serif và Sans-serif
Nội dung
Một số khái niệm:
- Generic family (hay có thể gọi là nhóm phông chữ chung) là 1 nhóm các phông chữ có giao diện tương tự (như “Serif” hoặc “Monospace”)
- Font family : tên 1 phông chữ cụ thể (như “Times New Roman” hoặc “Arial”)
| Generic family | Font family | Mô tả |
|---|---|---|
| Serif | Times New Roman Georgia |
Các phông thuộc nhóm Serif trên ký tự có đường kẻ nhỏ ở cuối |
| Sans-serif | Arial Verdana |
“Sans” có nghĩa là không có – những phông chữ này không có đường kẻ ở cuối các ký tự |
| Monospace | Courier New Lucida Console |
Tất cả các ký tự đơn có cùng chiều rộng |
Lưu ý: Trên màn hình máy tính, phông chữ sans-serif được coi là dễ đọc hơn phông chữ serif.
Font-Family (phông chữ)
Phông chữ của một văn bản được đặt với thuộc tínhfont-family.
Thuộc tínhfont-family nên giữ nhiều tên phông chữ như một hệ thống “dự phòng”. Nếu trình duyệt không hỗ trợ phông chữ đầu tiên, nó sẽ thử phông chữ tiếp theo, v.v.
Bắt đầu với 1 phông chữ bạn muốn và kết thúc là tên 1 nhóm phông chữ chung (generic family), để cho phép trình duyệt chọn một phông chữ tương tự trong nhóm đó, nếu không có phông chữ nào khác.
Lưu ý : Nếu tên của một phông chữ có nhiều hơn một từ, thì nó phải nằm trong dấu ngoặc kép, như: “Times New Roman”.
Nếu có nhiều phông chữ được chỉ định trong danh sách thì chúng sẽ được phân tách bằng dấu phẩy:
Ví dụ:
p {
font-family: "Times New Roman", Times, serif;
}
Font Style (Kiểu chữ)
Thuộc tính font-style được sử dụng chủ yếu để chỉ định văn bản in nghiêng.
Thuộc tính này có 3 giá trị như sau:
- normal – Văn bản được hiển thị bình thường
- italic – Văn bản được in nghiêng
- oblique – Văn bản được in nghiêng (giá trị này ít được hỗ trợ bởi trình duyệt)
Ví dụ:
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
Font Size (Cỡ chữ)
Thuộc tínhfont-sizethiết lập kích thước của văn bản.
Tuy nhiên, bạn không nên sử dụng thuộc tính font-size để làm cho đoạn văn trông giống như tiêu đề hoặc tiêu đề trông giống như đoạn văn.
Hãy 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.
Kích thước phông chữ có thể là một 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 một 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 (xấu vì lý do truy cập)
- Kích thước tuyệt đối 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 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 sẽ mặc định cho văn bản thông thường, như đoạn văn bản là 16px (16px = 1em).
Đặt cỡ chữ bằng pixel
Đặ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:
Ví dụ:
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 14px;
}
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 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 với kích thước phông 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 này: 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 */
}
Trong ví dụ trên, kích thước văn bản trong em giống với ví dụ trước bằng pixel. Tuy nhiên, với kích thước em, có thể điều chỉnh kích thước văn bản trong tất cả các trình duyệt.
Sử dụng kết hợp phần trăm và em
Để có thể hoạt động trong tất cả các trình duyệt: đặt kích thước phông chữ cho phần tử <body> theo phần trăm :
Ví dụ:
body {
font-size: 100%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875em;
}
p {
font-size: 0.875em;
}
việc sử dụng kết hợp sẽ giúp 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!
Font Weight
Thuộc tínhfont-weightđược sử dụng chủ yếu để chỉ định văn bản in đậm.
Ví dụ:
p.normal {
font-weight: normal;
}
p.thick {
font-weight: bold;
}
Responsive Font Size (Cỡ chữ tương thích)
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ẽ theo kích thước của cửa sổ trình duyệt.
Ví dụ:
1vw = 1% chiều rộng khung nhìn. Nếu khung nhìn rộng 50 cm thì 1vw là 0,5cm.
Font Variant
Thuộc tính font-variantchỉ định văn bản hiển thị với phông chữ nhỏ, in hoa (nhỏ hơn các chữ cái viết hoa gốc trong văn bản).
Ví dụ:
p.normal {
font-variant: normal;
}
p.small {
font-variant: small-caps;
}
