Việc định dạng văn bản trên trang web là một phần quan trọng của thiết kế web. Ví dụ, bạn có thể muốn các tiêu đề hiển thị với một font cụ thể, hoặc toàn bộ văn bản trên trang sử dụng font serif.
Đó chính là lúc thuộc tính font-family của CSS phát huy tác dụng. Thuộc tính này cho phép bạn chỉ định một hoặc nhiều họ font sẽ được dùng để định dạng văn bản trên trang web.
Hướng dẫn này sẽ thảo luận về cơ bản của thuộc tính font-family kèm theo các ví dụ minh họa, giúp bạn hiểu cách sử dụng nó để định dạng văn bản.
Tìm hiểu về CSS Font Family
Có nhiều khía cạnh liên quan đến việc định dạng font trong CSS, từ thiết lập màu sắc đến kích thước font. Tuy nhiên, một trong những phần quan trọng nhất là thiết lập họ font (font family) — kiểu dáng được sử dụng bởi văn bản trên trang web.
Để thiết lập họ font cho văn bản, bạn sử dụng thuộc tính font-family. Cú pháp như sau:
font-family: fontFamilyOne, fontFamilyTwo, ...;
Thuộc tính font-family chấp nhận một font đơn lẻ hoặc một danh sách các font. Nếu chỉ định nhiều font, hãy phân tách từng font bằng dấu phẩy.
Thứ tự các font trong danh sách chính là thứ tự trình duyệt sẽ cố gắng áp dụng. Trình duyệt sẽ sử dụng font đầu tiên trong danh sách mà nó tìm thấy được cài đặt hoặc có thể tải xuống. Nếu font đó không khả dụng, font thứ hai sẽ được dùng, và cứ thế tiếp tục.
Lưu ý quan trọng: thuộc tính font-family sẽ chọn font cho từng ký tự trong khối văn bản. Nếu một ký tự cụ thể không có sẵn trong font đầu tiên, font tiếp theo trong danh sách sẽ được thử, cho đến khi tìm thấy font phù hợp.
Khi sử dụng thuộc tính font-family, tốt nhất nên bao gồm ít nhất một tên họ font chung (generic font family) như serif, sans-serif hoặc monospace. Điều này đảm bảo rằng nếu các font khác trong danh sách không khả dụng, trình duyệt vẫn có thể chọn một font phù hợp để hiển thị văn bản.
Có hai cách sử dụng thuộc tính font-family: chỉ định font tùy chỉnh (custom font) hoặc áp dụng họ font chung cho văn bản. Các họ font chung có sẵn bao gồm:
- serif: Ký tự sử dụng kiểu chữ có chân (ví dụ: Lucida Bright, Palladio).
- sans-serif: Ký tự sử dụng kiểu chữ không chân (ví dụ: Open Sans, Trebuchet MS).
- monospace: Tất cả ký tự có cùng chiều rộng (ví dụ: monospace, Menlo).
- cursive: Ký tự có nét nối liền (ví dụ: Lucida Calligraphy).
- fantasy: Font trang trí dùng để thu hút sự chú ý (ví dụ: Papyrus).
Ngoài ra còn có các họ font chung khác, bạn có thể tham khảo thêm tại tài liệu MDN về font-family.
Ví dụ về CSS Font Family
Giả sử chúng ta được yêu cầu tùy chỉnh font cho một số phần trên website của câu lạc bộ tem địa phương "The Seattle Stamp Club".
Yêu cầu đầu tiên: thay đổi font của tất cả thẻ <h1> trên trang "Contact" để sử dụng font "Open Sans". Nếu font này không khả dụng, sẽ dùng họ font chung "sans-serif". Code thực hiện như sau:
<html>
<h1>Contact Us</h1>
<style>
h1 { font-family: "Open Sans", sans-serif; }
</style>
</html>
Trong code HTML, chúng ta có một thẻ <h1> chứa văn bản "Contact Us". Phần CSS sử dụng font-family để định nghĩa font cho tất cả các phần tử <h1>. Giá trị gán cho thuộc tính này thiết lập font là Open Sans, và dự phòng là sans-serif.
Tiếp theo, giả sử chúng ta cũng muốn định dạng tất cả các thẻ <p> trên trang Contact để dùng font "Times". Nếu không có, sẽ dùng font serif mặc định. Code như sau:
<html>
<p>Are you interested in learning more about the Seattle Stamp Club? Contact us today!</p>
<style>
p { font-family: "Times", serif; }
</style>
</html>
Trong ví dụ này, trình duyệt sẽ cố gắng hiển thị tất cả thẻ <p> với font Times. Nếu font này không có sẵn, font serif sẽ được sử dụng.
Kết luận
Thuộc tính font-family của CSS cho phép bạn chỉ định kiểu dáng văn bản trên trang web. Ví dụ, bạn có thể dùng font "Arial" hoặc họ font chung "cursive" cho toàn bộ văn bản.
Hướng dẫn này đã trình bày cơ bản về thuộc tính font-family và cách sử dụng nó để định dạng văn bản. Bây giờ bạn đã sẵn sàng sử dụng thuộc tính này như một nhà thiết kế web chuyên nghiệp!