Buzz
Các thuộc tính font trong CSS giúp xác định loại font chữ, kích thước, kiểu chữ,... Mời bạn đọc khám phá thêm thông tin chi tiết về Thuộc Tính Font trong CSS trong bài học tiếp theo của Mytour.
Đỉnh Cao của Thiết Kế: Thuộc Tính Font trong CSS
1. Font -Family trong CSS
2. Font-Style trong CSS
3. Font-Size trong CSS
3.1. Đặt Kích Thước Font bằng Pixel
3.2. Đặt Kích Thước Font bằng Em
3.3. Sự Kết Hợp của Percent (%) và Em
4. Font-Weight trong CSS
5. Responsive Font Size trong CSS
6. Font-Variant trong CSS
7. Các Thuộc Tính Font trong CSS
Font trong CSS
Những đặc điểm của font trong CSS bao gồm:
- font-family là thuộc tính để đổi font chữ.
- Thuộc tính font-style được dùng để biến hóa font chữ thành kiểu in nghiêng.
- Sử dụng thuộc tính font-variant để tạo hiệu ứng small-cap (biến chữ thường thành chữ in nhỏ).
- Sử dụng thuộc tính font-size để điều chỉnh kích thước của font chữ.
- Thuộc tính font rút gọn một số lựa chọn font chữ khác.
1. Sự Quan Trọng Của Lựa Chọn Font Trong CSS
Để tùy chỉnh diện mạo văn bản, sử dụng thuộc tính font-family trong CSS.
Khi áp dụng font-family, xác định nhiều tên font chữ dự phòng. Trình duyệt sẽ chọn font thay thế nếu font đầu tiên không khả dụng.
Bắt đầu với font chữ ưu tiên, kết thúc bằng generic family để trình duyệt có lựa chọn nếu không có font nào khả dụng.
1. Chú Ý Khi Chọn Font Chữ Trong CSS
Khi tên font chữ dài hơn một từ, hãy đặt nó trong dấu ngoặc kép, ví dụ như 'Times New Roman'.
Nếu muốn chỉ định nhiều font chữ, sử dụng dấu phẩy để phân tách chúng.
Ví dụ:
2. Phong Cách Chữ Trong CSS
Thuộc tính font-style trong CSS được sử dụng để làm cho chữ in nghiêng.
Thuộc tính font-style có 3 giá trị:
Bình thường - hiển thị văn bản dưới dạng thông thường.
1. Chữ In Nghiêng trong CSS
italic - hiển thị văn bản dưới dạng chữ in nghiêng.
Ví dụ:
Kết quả hiển thị như sau:
3. Kích Thước Font Chữ trong CSS
Thuộc tính font-size trong CSS được dùng để xác định cỡ chữ cho văn bản.
Trong thiết kế web, quản lý và chọn kích thước font chữ đóng một vai trò quan trọng. Không chỉ cần điều chỉnh kích thước font chữ cho đoạn văn bản, mà còn phải làm điều đó cho kích thước font chữ của tiêu đề và nhiều phần khác.
Thay vì điều chỉnh kích thước font chữ trực tiếp cho đoạn văn bản, chúng ta thường sử dụng các thẻ HTML phù hợp, như sử dụng các thẻ
Dành cho tiêu đề và thẻ
Dành cho đoạn văn bản.
Trong CSS, kích thước font chữ có thể được quy định theo hai loại: kích thước tuyệt đối và tương đối.
Kích thước tuyệt đối (absolute size):
- Đặt kích thước chính xác cho font chữ.
- Ngăn chặn việc điều chỉnh kích thước font trên mọi trình duyệt.
- Sử dụng kích thước tuyệt đối khi cần biết kích thước đầu ra chính xác.
Font chữ có kích thước tương đối (Relative size):
- Đặt kích thước font chữ phản ánh các yếu tố xung quanh một cách sáng tạo.
- Cho phép người dùng điều chỉnh kích thước văn bản trực tiếp trên trình duyệt.
Lưu ý: Nếu không xác định kích thước font chữ cụ thể, kích thước mặc định của đoạn văn bản là 16px (16px = 1em).
3.1 Thiết lập kích thước font chữ bằng đơn vị Pixel
Thay đổi kích thước văn bản bằng cách sử dụng đơn vị pixel mang lại sự linh hoạt và kiểm soát cao cho kích thước chữ.
Một minh họa:
Đầu ra thực tế:
3.2 Đặt Kích Thước Font Chữ bằng đơn vị Em
Cho phép người dùng linh hoạt thay đổi kích thước chữ (tính năng có sẵn trong menu trình duyệt). Một số nhà phát triển thường ưa chuộng sử dụng đơn vị Em thay vì đơn vị Pixel.
Khi sử dụng 1em, kích thước chữ sẽ bằng kích thước chữ hiện tại. Kích thước chữ mặc định của trình duyệt là 16px, nên giá trị mặc định của 1em là 16px.
Để chuyển đổi kích thước từ pixel sang em, sử dụng công thức: pixels/16=em.
Ví dụ thực tế:
Kết quả:
Trong ví dụ này, kích thước văn bản được xác định bằng đơn vị em, tạo ra sự linh hoạt trong việc điều chỉnh kích thước chữ trên mọi trình duyệt.
3.3 Kết hợp đơn vị Percent (%) và Em
Phương pháp này hiệu quả trên mọi trình duyệt, giúp điều chỉnh kích thước chữ cho phần tử
Mặc định theo tỉ lệ phần trăm sẽ tạo điểm khác biệt trong thiết kế.
Ví dụ minh họa:
Kết quả xuất hiện như sau:
4. Attrib Font-Weight trong CSS
Thuộc tính cường độ chữ trong CSS điều chỉnh độ đậm nhạt của font chữ.
Ví dụ minh họa:
Hiển thị kết quả như sau:
5. Kích thước Font phản ứng trong CSS
Bổ sung vào đó, chúng ta có thể điều chỉnh kích thước font chữ bằng đơn vị vw (viết tắt của chiều rộng viewport - kích thước của cửa sổ trình duyệt).
Theo cách này, kích thước văn bản sẽ tự động thích ứng với kích thước của cửa sổ trình duyệt.
Ví dụ minh họa:
Kết quả xuất hiện sẽ như sau:
Chú ý: 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 của viewport là 50 cm, thì 1vw tương đương với 0.5 cm.
6. Thuộc tính Font-Variant trong CSS
Thuộc tính font-variant trong CSS quyết định liệu văn bản có nên hiển thị dưới dạng chữ in hoa nhỏ (small-cap) hay không.
Ví dụ minh họa:
Kết quả cuối cùng sẽ có dạng:
7. Thuộc tính Font trong CSS
Dưới đây là bảng liệt kê các thuộc tính Font trong CSS:
Thuộc tính Mô tả
Tích hợp tất cả các thuộc tính font chữ trong một lệnh.
Xác định và thay đổi font chữ của văn bản.
Chỉ định kích thước của font chữ văn bản.
Đặt kiểu cho font chữ văn bản.
Đặt thuộc tính font-variant để xác định liệu văn bản có nên hiển thị dưới dạng chữ in nhỏ hay không.
Xác định cấp độ đậm nhạt của font chữ bằng thuộc tính font-weight.
Trong bài học này, Mytour vừa giới thiệu thuộc tính Font trong CSS. Trong các bài học CSS tiếp theo của Taimienp0hi.vn, sẽ có thông tin mới về thuộc tính Text trong CSS.
