Trong bài học CSS trước Taimienphi.vn đã giới thiệu cho bạn các thuộc tính Background trong CSS, để tìm hiểu tiếp các thuộc tính Font trong CSS, bạn đọc cùng tham khảo tiếp bài viết dưới đây của Taimienphi.vn.
Các thuộc tính font trong CSS xác định loại font chữ được sử dụng, kích thước, kiểu chữ, ... . Tham khảo tiếp học CSS dưới đây của Taimienphi.vn để tìm hiểu chi tiết các thuộc tính Font trong CSS.
Thuộc tính Font trong CSS
Thuộc tính Font trong CSS
Các thuộc tính font trong CSS bao gồm:
- Thuộc tính font-family được sử dụng để thay đổi font chữ.
- Thuộc tính font-style được sử dụng để tạo font chữ in nghiêng.
- Thuộc tính font-variant được sử dụng để tạo hiệu ứng small-cap (thay đổi chữ thường thành chữ in nhỏ).
- Thuộc tính font-size được sử dụng để thay đổi kích thước font chữ.
- Thuộc tính font được sử dụng để rút gọn một số font chữ khác.
1. Thuộc tính Font -Family trong CSS
Để thay đổi font chữ cho text, chúng ta sử dụng thuộc tính font-family.
Khi sử dụng thuộc tính font-family chúng ta phải xác định nhiều tên font chữ khác nhau dưới dạng "dự phòng". Nếu trình duyệt không hỗ trợ font chữ đầu tiên, chúng ta có thể sử dụng font chữ tiếp theo, ... .
Bắt đầu bằng font chữ mà bạn muốn sử dụng và kết thúc bằng generic family để trình duyệt có thể lựa chọn font chữ trong generic family nếu các font chữ khác không có sẵn.
Lưu ý: Nếu tên font chữ dài hơn một từ, chúng ta phải đặt tên font chữ đó trong dấu ngoặc kép, chẳng hạn như "Times New Roman".
Nếu có nhiều font chữ được chỉ định trong danh sách, chúng ta sử dụng dấu phẩy để phân tách.
Ví dụ:
Kết quả đầu ra có dạng như dưới đây:
2. Thuộc tính Font-Style trong CSS
Thuộc tính font-style trong CSS được sử dụng để chỉ định font chữ in nghiêng cho text.
Thuộc tính font-style bao gồm 3 giá trị:
normal - hiển thị text dưới dạng bình thường.
italic - hiển thị text dưới dạng chữ in nghiêng.
oblique - giá trị này gần giống giá trị italic, nhưng ít được hỗ trợ.
Ví dụ:
Kết quả đầu ra có dạng như dưới đây:
3. Thuộc tính Font-Size trong CSS
Thuộc tính font-size trong CSS được sử dụng để thiết lập kích thước font chữ của text.
Trong thiết kế web, việc quản lý và lựa chọn kích thước font chữ là khá quan trọng. Chúng ta không thể điều chỉnh kích thước font chữ đoạn văn bản giống kích thước font chữ tiêu đề và ngược lại.
Thay vào đó chúng ta phải sử dụng các thẻ HTMLphù hợp, chẳng hạn như sử dụng các thẻ
cho tiêu đề và thẻ
cho đoạn văn bản.
Các giá trị kích thước font chữ trong CSS bao gồm kích thước tuyệt đối (absolute size) và tương đối (relative size).
Kích thước tuyệt đối (absolute size):
- Thiết lập kích thước font chữ cụ thể.
- Không cho phép người dùng thay đổi kích thước font chữ trên tất cả các trình duyệt.
- Kích thước tuyệt đối hữu ích trong trường hợp nếu biết kích thước vật lý đầu ra.
Kích thước tương đối (Relative size):
- Thiết lập kích thước font chữ tương đối các yếu tố xung quanh.
- Cho phép người dùng thay đổi kích thước text trên trình duyệt.
Lưu ý: Nếu không chỉ định kích thước font chữ cụ thể, kích thước mặc định cho đoạn văn bản là 16px (16px = 1em).
3.1 Thiết lập Font Size bằng đơn vị Pixel
Bằng cách thiết lập kích thước font chữ bằng đơn vị pixel, chúng ta có thể kiểm soát toàn bộ kích thước văn bản.
Ví dụ:
Kết quả đầu ra có dạng:
3.2 Thiết lập Font Size bằng đơn vị Em
Cho phép người dùng thay đổi kích thước font chữ (trên menu trình duyệt). Một số nhà phát triển thường sử dụng đơn vị Em thay vì sử dụng đơn vị Pixel.
1em tương đương với kích thước font chữ hiện tại. Kích thước font chữ mặc định trên trình duyệt là 16px, vì vậy kích thước mặc định của 1em là 16px.
Để tính kích thước được đổi từ pixel sang em, chúng ta sử dụng công thức: pixels/16=em.
Ví dụ:
Kết quả đầu ra có dạng:
Trong ví dụ trên, kích thước văn bản được thiết lập bằng đơn vị em tương đương kích thước văn bản được thiết lập bằng đơn vị pixel trong ví dụ trước. Tuy nhiên với kích thước em, chúng ta có thể điều chỉnh kích thước văn bản trên tất cả các trình duyệt.
3.3 Sử dụng kết hợp đơn vị Percent (%) và Em
Giải pháp này hoạt động trên tất cả các trình duyệt, thiết lập kích thước font chữ cho phần tử
mặc định theo đơn vị phần trăm.
Ví dụ:
Kết quả đầu ra có dạng:
4. Thuộc tính Font-Weight trong CSS
Thuộc tính font-weight trong CSS được sử dụng để thiết lập mức độ đậm nhật của font chữ.
Ví dụ:
Kết quả đầu ra có dạng:
5. Responsive Font Size trong CSS
Ngoài ra chúng ta có thể thiết lập kích thước font chữ bằng đơn bị vw (là viết tắt của viewport width - chiều rộng của viewport).
Bằng cách này kích thước văn bản sẽ được điều chỉnh phù hợp với kích thước cửa sổ trình duyệt.
Ví dụ:
Kết quả đầu ra có dạng:
Lưu ý: Viewport là kích thước cửa sổ trình duyệt, 1vw = 1% chiều rộng của viewport. Nếu chiều rộng viewport là 50 cm thì 1vw là 0.5 cm.
6. Thuộc tính Font-Variant trong CSS
Thuộc tính font-variant trong CSS xác định xem văn bản có được hiển thị dưới dạng chữ in hoa nhỏ (small-cap) hay không.
Ví dụ:
Kết quả đầu ra có dạng:
7. Các thuộc tính Font trong CSS
Dưới đây là bảng danh sách các thuộc tính Font trong CSS:
Thuộc tính Mô tả
font Thiết lập tất cả thuộc tính font chữ trong một khai báo.
font-family Chỉ định, thay đổi font chữ văn bản.
font-size Chỉ định kích thước font chữ văn bản.
font-style Chỉ định kiểu font chữ văn bản.
font-variant Chỉ định văn bản có được hiển thị dưới dạng chữ in hoa nhỏ hay không.
font-weight Xác định mức độ đậm nhạt font chữ.
https://thuthuat.taimienphi.vn/thuoc-tinh-font-trong-css-48856n.aspx
Bài học trên đây Taimienphi.vn vừa giới thiệu cho bạn thuộc tính Font trong CSS. Trong các bài học CSS tiếp theo Taimienp0hi.vn sẽ giới thiệu tiếp cho bạn thuộc tính Text trong CSS nhé.