Tidadigi Logo

CSS font-family Property

Thuộc tính CSS font-family chỉ định font chữ cho một phần tử. Nó có thể liệt kê nhiều font dự phòng. Nếu trình duyệt không hỗ trợ font đầu tiên, nó sẽ thử font tiếp theo. Bao gồm tên font cụ thể như "Arial" và họ font chung như "serif" hoặc "sans-serif".

Các loại Font Family

  • family-name: Tên cụ thể của họ font, ví dụ: "Times", "Courier", "Arial", v.v.
  • generic-family: Tên của họ font chung, ví dụ: "serif", "sans-serif", "cursive", "fantasy", "monospace".

Cú pháp

element_selector {
    font-family: family-name|generic-family|initial|inherit;
}

Giá trị thuộc tính

Thuộc tínhMô tả
fonts-nameChỉ định tên của font trong dấu ngoặc kép, được phân tách bằng dấu phẩy.
generic-familyĐặt font của văn bản trong tài liệu HTML từ danh sách font có sẵn. Danh sách này lấy từ kho font.
initialĐặt thuộc tính CSS của một phần tử về giá trị mặc định.
inheritKế thừa một thuộc tính cho một phần tử từ giá trị thuộc tính của phần tử cha.

Lưu ý:

  • Tên family-name nên được đặt trong dấu ngoặc kép khi có khoảng trắng hoặc ký tự đặc biệt.
  • Khi sử dụng thuộc tính style trong HTML, tên font nên được đặt trong dấu nháy đơn.

Chúng ta sẽ hiểu cách sử dụng thuộc tính font-family bằng cách thực hiện nó.

Ví dụ 1: Sử dụng cơ bản của font-family

Ví dụ này minh họa việc sử dụng thuộc tính CSS font-family để tạo kiểu cho các đoạn văn (<p>). Nó áp dụng các font khác nhau như "Impact" "Arial", có các font dự phòng để đảm bảo tính nhất quán trên các nền tảng.

HTML 
<!DOCTYPE html>
<html>

<head>
    <title> CSS font-family Property </title>
    <style>
        .para1 {
            font-family: "Impact", Times, serif;
        }

        .para2 {
            font-family: Arial, Helvetica, sans-serif;
        }
    </style>
</head>

<body>
    <h1>Font-family Property</h1>
    <p class="para1">
        GeeksforGeeks in Impact font
    </p>

    <p class="para2">
        GeeksforGeeks in Arial font.
    </p>

</body>

</html>

Đầu ra:

css-font-family-property

Ví dụ 2: Nhiều giá trị Font-Family

Ví dụ này minh họa việc sử dụng thuộc tính font-family để tạo kiểu văn bản với các font khác nhau. Các font đó là Times New Roman, Arial và Courier New.

HTML 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <title>Font Family Example</title>
    <style>
        .example1 {
            font-family: "Times New Roman", Times, serif;
        }

        .example2 {
            font-family: "Arial", Helvetica, sans-serif;
        }

        .example3 {
            font-family: "Courier New", Courier, monospace;
        }
    </style>
</head>

<body>
    <h1 class="example1">
        This is a heading with Times New Roman
    </h1>
    <p class="example1">
        This is a paragraph with Times New Roman.
    </p>

    <h1 class="example2">
        This is a heading with Arial
    </h1>
    <p class="example2">
        This is a paragraph with Arial.
    </p>

    <h1 class="example3">
        This is a heading with Courier New
    </h1>
    <p class="example3">
        This is a paragraph with Courier New.
    </p>
</body>

</html>

Đầu ra:

css-font-family-property
CSS font-family Property Example Output

Kết luận

Thuộc tính font-family là một tính năng CSS mạnh mẽ để chỉ định font trong thiết kế web. Nó cho phép hệ thống dự phòng, đảm bảo rằng nếu một font không khả dụng, một font khác có thể được sử dụng. Bằng cách hiểu và sử dụng thuộc tính này, bạn có thể nâng cao kiểu chữ và giao diện tổng thể của các trang web.

Các trình duyệt được hỗ trợ

Các trình duyệt hỗ trợ thuộc tính font-family được liệt kê dưới đây:


Last Updated : 21/07/2025