Phông chữ trong CSS
Thuộc tính font xác định kiểu chữ, độ đậm nhạt, kích thước và một số định dạng khác cho văn bản. Sự khác nhau giữa font serif và sans-serif Font Family Trong CSS, có 2 loại font family đó là: generic family – nhóm font như Serif hoặc Monospace ...
Thuộc tính font xác định kiểu chữ, độ đậm nhạt, kích thước và một số định dạng khác cho văn bản.
Sự khác nhau giữa font serif và sans-serif
Font Family
Trong CSS, có 2 loại font family đó là:
- generic family – nhóm font như Serif hoặc Monospace
- font family – xác định font như Time New Roman hay Arial
| Generic family | Font family | Mô tả |
| Serif | Times New Roman | chữ có chân |
| Georgia | ||
| Sans-serif | Arial | chữ không chân |
| Verdana | ||
| Monospace | Courier New | Tất cả chữ monospace có độ rộng như nhau |
| Lucida Console |
Lưu ý: trên màn hình máy tính, phông chữ sans-serif được đánh giá là dễ đọc hơn các phông chữ serif.
Font Family
Phông chữ của văn bản được thiết lập trong thuộc tính font-family. Thuộc tính này khi khai báo thường có hệ thống font đi kèm. Nếu như trình duyệt không hỗ trợ font này thì font khai báo sau sẽ được sử dụng.
Font bạn chủ định dùng sẽ được khai báo trước, sau đó là các generic family font (các phông chữ tương tự nhau), trình duyệt sẽ lựa chọn phông tương tự để hiện thị nếu phông đó không được hỗ trợ.
Lưu ý: nếu tên phông chữ có nhiều từ thì phải được đặt trong dấu ngoặc kép, ví dụ “Time New Roman”. Các font được khai báo cách nhau bằng dấu phẩy:
p {
font-family: "Times New Roman", Times, serif;
}
Font Style
Thuộc tính font-style thường được sử dụng là chữ in nghiêng. Thuộc tính này có 3 dạng:
- normal: chữ bình thường
- italic: chữ in nghiêng
- oblique: giống như chữ in nghiêng nhưng ít được hỗ trợ hơn
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
Font Size
Thuộc tinh font-size thiết lập kích cỡ cho văn bản. Thiết lập kích thước cho văn bản là phần quan trọng trong thiết kế web. Tuy nhiên, bạn không nên tùy chỉnh bừa bãi để cỡ chữ đoạn văn giống tiêu đề, hay ngược lại. Luôn sử dụng các thẻ thích hợp như <h1> – <h6> cho tiêu đề và thẻ <p> cho đoạn văn.
Giá trị của kích cỡ chữ có thể là tuyệt đối hoặc tương đối.
Kích thước tuyệt đối:
- Thiết lập kích thước văn bản
- Không cho người dùng tùy chỉnh kích thước trên mọi trình duyệt
- Kích thước tuyệt đối dùng khi biết kích thước cụ thể.
Kích thước tương đối:
- Thiết lập kích thước tương đối theo các phần tử xung quanh
- Cho phép người dùng thay đổi kích thước chữ trên trình duyêt
Lưu ý: nếu bạn không xác định được một kích cỡ chữ, mặc định chữ là normal, giống như đoạn văn cỡ 16px (16px=1em).
Thiết lập cỡ chữ bằng pixel
Thiết lập cỡ chữ bằng pixel giúp bạn toàn quyền kiểm soát kích thước chữ.
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 cỡ toàn bộ trang.
Thiết lập cỡ chữ bằng em
Để cho phép người dùng chỉnh cỡ chữ (trên thanh menu trình duyệt), một số lập trình viên thay thế pixel bằng em. Đơn vị em được đề xuất bởi W3C.
1em có giá trị tiêu chuẩn cho cỡ chữ hiện tại. Mặc định hiển thị trên trình duyệt với kích thước tương đương 16px. Vì thế có thể coi 1em bằng 16px. Kích thước có thể được tính toán từ pixel sang em sử dụng công thức: pixel/16=em.
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 chữ có đơn vị em tương đương với ví dụ kích thước với pixel. Tuy nhiên, với em bạn sẽ có thể điều chỉnh được kích thước trên trình duyệt. Tuy nhiên, vẫn còn một số vấn đề khi hiển thị trên trình duyệt phiên bản cũ IE. Chữ sẽ to hơn khi tăng cỡ, nhỏ đi khi giảm cỡ.
Sử dụng cỡ chữ theo tỷ lệ và em
Giải pháp tương thích đối với mọi trình duyệt là thiết lập cỡ chữ theo tỷ lệ đối với phần tử <body>:
body {
font-size: 100%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875em;
}
p {
font-size: 0.875em;
}
Đoạn mã CSS trên sẽ hoạt động tốt, nó hiển thị kích cỡ hợp lý trên mọi trình duyệt, cho phép zoom hoặc chỉnh cỡ chữ trên trình duyệt.
Font Weight
Thuộc tính font-weight xác định độ đậm nhạt của chữ.
p.normal {
font-weight: normal;
}
p.thick {
font-weight: bold;
}
Font Variant
Thuộc tính font-variant xác định xem văn bản có được hiển thị dạng chữ hoa nhỏ hay không.
Trong một phông chữ hoa nhỏ, tất cả các chữ thường được chuyển thành chữ hoa. Tuy nhiên, các chữ hoa được chuyển đổi xuất hiện trong một cỡ chữ nhỏ hơn so với chữ in hoa ban đầu trong văn bản.
p.normal {
font-variant: normal;
}
p.small {
font-variant: small-caps;
}
Tất cả thuộc tính CSS văn bản
| Thuộc tính | Mô tả |
| font | thiết lập tất cả thuộc tính text trong một khai báo |
| font-family | thiết lập kiểu chữ |
| font-size | thiết lập kích thước chữ |
| font-style | Thiết lập định dạng cho chữ |
| font-variant | xác định văn bản có hiển thị chữ hoa nhỏ hay không |
| font-weight | xác định độ đậm nhạt của chữ |
- Học lập trình front-end cơ bản với bootstrap 4/html5/css3
- Học lập trình front-end nâng cao qua Project thực tế
- Học thiết kế web với Photoshop, CSS theo kiểu SASS
- Học cách sử dụng Git_hub cho lập trình viên
- Học lập trình Back-end PHP theo mô hình MVC cơ bản
- Học lập trình Back-end PHP theo mô hình MVC nâng cao
- Học lập trình Cơ sở dữ liệu với AngularJS
- Học lập trình theme wordpress. Làm ra mọi website hoàn chỉnh với wordpress
- Combo lập trình front-end từ cơ bản – nâng cao
- Combo lập trình back-end từ cơ bản đến nâng cao
- Combo lập trình web với word press từ A-Z
