Phông chữ

Thuộc phần Tạo kiểu với CSS trong hành trình HTML của Coddy. Bài học 18 trên 76.

Trong CSS, thuộc tính font-family dùng để chỉ định kiểu chữ cho văn bản bên trong một phần tử HTML. Thuộc tính này cho phép bạn liệt kê các phông chữ ưu tiên cho văn bản. Nếu phông chữ đầu tiên không có sẵn, trình duyệt sẽ dùng phông chữ tiếp theo trong danh sách để giữ giao diện tương tự.

Đây là cú pháp cơ bản để sử dụng thuộc tính font-family:

selector {
    font-family: font1, font2, generic-family;
}

font1, font2: Tên các họ phông chữ ưu tiên, được liệt kê theo thứ tự ưu tiên. Nếu font1 không có sẵn, trình duyệt sẽ thử font2, rồi tiếp tục như vậy.

generic-family: Tên họ phông chữ chung (generic font family), chẳng hạn như serif, sans-serif, monospace, cursive hoặc fantasy. Đây là phương án dự phòng nếu không có phông chữ nào được chỉ định.

Khi chỉ định tên họ phông chữ, bạn cần tuân theo các hướng dẫn sau:

Nếu tên họ phông chữ có khoảng trắng, hãy đặt tên đó trong dấu ngoặc kép (ví dụ: "Times New Roman", "Courier New").

Các tên họ phông chữ cần được phân tách bằng dấu phẩy.

Bạn nên thêm một họ phông chữ chung làm lựa chọn cuối cùng trong danh sách để trình duyệt dùng phông chữ thay thế phù hợp nếu không có phông chữ nào đã chỉ định.

Ví dụ:

p {
    font-family: Arial, Helvetica, sans-serif;
}

Thử thách

Dễ

Bạn được cung cấp một tài liệu HTML có tiêu đề (<h1>) và một đoạn văn (<p>). Nhiệm vụ của bạn là dùng thuộc tính font-family để định dạng các phần tử này. Làm theo các bước sau:

Viết quy tắc CSS nhắm đến phần tử <h1>. Đặt font-family thành "Times New Roman", Times, serif.
Viết quy tắc CSS nhắm đến phần tử <p>. Đặt font-family thành Arial, Helvetica, sans-serif.

Tự làm thử

<html>
<head>
    <title>Font Family</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
</body>
</html>