Tidadigi Logo

CSS | Generic font-family collection

Thuộc tính `font-family` dùng để đặt font chữ cho văn bản trong HTML. Các `font-family` khác nhau được dùng để tạo trang web hấp dẫn. Có nhiều font để chọn từ kho font như Google fonts, Adobe fonts... Bạn cần liên kết API font và tùy chỉnh. Các generic font families chủ yếu thuộc các loại sau đây:
  • Serif
  • Sans-serif
  • cursive
  • monospace
  • fantasy
Mô tả chi tiết về các generic font-family được liệt kê dưới đây:
  • serif: Nó thường được dùng khi viết văn bản cho mục đích in ấn. Ví dụ: sách, báo, tạp chí... Các ký tự của văn bản được trang trí bằng nét ở cuối. Ví dụ về serif font-family là Times New Roman, Garamond, Georgia, Literata, Minion, Perpetua... Syntax: 
    element {
    font-family:serif;
}
    Example: html 
    <!DOCTYPE html>
<html>
    
<head>
    <title>
        Generic Font Family
    </title>
    
    <style>
        .GFG {
            font-family:serif ;
        }
        body {
            color:green;
            font-size:20px;
        }
    </style>
</head>

<body>
    <p>GeeksforGeeks</p>
    
    <p class = "GFG">GeeksforGeeks</p>
</body>

</html>
    Output: css-generic-font-family-collection
  • sans-serif: Kiểu chữ này hiện đại, trang trọng và đơn giản về hình thức. Không giống như "Serif" nó không có nét ở cuối. Nó được sử dụng rộng rãi, thường là trong văn bản kỹ thuật số. Ví dụ về sans-serif là Verdana, Arial, Calibri, Helvetica, Futura, Impact, Lato, Optima, Skia... 
    element {
    font-family: sans-serif;
}
    Example: html 
    <!DOCTYPE html>
<html>
    
<head>
    <title>
        Generic Font Family
    </title>
    
    <style>
        .GFG {
            font-family:sans-serif ;
        }
        body {
            color:green;
            font-size:20px;
        }
    </style>
</head>

<body>
    <p>GeeksforGeeks</p>
    
    <p class = "GFG">GeeksforGeeks</p>
</body>

</html>
    Output: css-generic-font-family-collection
  • cursive: Loại font này chủ yếu được dùng trong thư mời, tin nhắn thân mật, tiêu đề... Hình thức của nó giống như chữ viết tay bằng bút mực hoặc bút lông. Ví dụ về cursive font-family là Flanella, Belluccia, Insolente, Corsiva, Zapfino... Syntax: 
    element {
    font-family:cursive;
}
    Example: html 
    <!DOCTYPE html>
<html>
    
<head>
    <title>
        Generic Font Family
    </title>
    
    <style>
        .GFG {
            font-family:cursive;
        }
        body {
            color:green;
            font-size:20px;
        }
    </style>
</head>

<body>
    <p>GeeksforGeeks</p>
    
    <p class = "GFG">GeeksforGeeks</p>
</body>

</html>
    Output: css-generic-font-family-collection
  • monospace: Nó được dùng để đưa ra ví dụ, văn bản đánh máy, hướng dẫn, địa chỉ gửi thư, mẫu code... Mỗi ký tự của văn bản có cùng độ rộng. Ví dụ về monospace font-family là Courier, Consolas, Monaco, SimSun, Terminal, Menlo, Inconsolata... Syntax: 
    element {
    font-family:monospace;
}
    Example: html 
    <!DOCTYPE html>
<html>
    
<head>
    <title>
        Generic Font Family
    </title>
    
    <style>
        .GFG {
            font-family:monospace;
        }
        body {
            color:green;
            font-size:20px;
        }
    </style>
</head>

<body>
    <p>GeeksforGeeks</p>
    
    <p class = "GFG">GeeksforGeeks</p>
</body>

</html>
    Output: css-generic-font-family-collection
  • fantasy: Nó được dùng để làm cho văn bản trang trí, ấn tượng và biểu cảm hơn. Loại font này nên được dùng trong văn bản ngắn. Vì nó không phải lúc nào cũng dễ đọc. Ví dụ về fantasy font-family là Impact, Cracked, Critter, Studz, Copperplate... Syntax: 
    element {
    font-family:fantasy;
}
    Example: html 
    <!DOCTYPE html>
<html>
    
<head>
    <title>
        Generic Font Family
    </title>
    
    <style>
        .GFG {
            font-family:fantasy;
        }
        body {
            color:green;
            font-size:20px;
        }
    </style>
</head>

<body>
    <p>GeeksforGeeks</p>
    
    <p class = "GFG">GeeksforGeeks</p>
</body>

</html>
    Output: css-generic-font-family-collection
Sau đây là mô tả về một số font family được đề cập. Chúng được liệt kê là ví dụ trong các generic font-families ở trên:
  • Verdana:
    • Designed By:Matthew Carter
    • Category:sans-serif
    • Released on:1996
  • helvetica:
    • Designed By:Max Miedinger, Eduard Hoffmann
    • Category:sans-serif
    • Released on:1957
  • courier:
    • Designed By:Howard "Bud" Kettler
    • Category:Monospaced
    • Released on:~1956
  • arial:
    • Designed By:Robin Nicholas and Patricia Saunders
    • Category:Sans-serif
    • Released on:1982
  • impact:
    • Designed By:Geoffrey Lee
    • Category:Sans-serif
    • Released on:1965
  • calibri:
    • Designed By:Luc(as) de Groot
    • Category: Sans-serif
    • Released on:2007
  • consolas:
    • Designed By:Luc(as) de Groot
    • Category:Monospaced
    • Released on:2002
  • georgia:
    • Designed By:Matthew Carter
    • Category: Serif
    • Released on: 1996
  • garamond:
    • Designed By: Paul Hickson
    • Category:Serif
    • Released on: 1993
  • perpetua:
    • Designed By:Eric Gill
    • Category:Serif
    • Released on:1929-32
  • onyx:
    • Designed By:Gerry Powell
    • Category:Serif
    • Released on: 1955
Example: Ví dụ này dùng các loại font-family khác nhau. html 
<!DOCTYPE html>
<html>
    
<head>
    <title>
        Generic Font Family
    </title>
    
    <style>
        body {
            color:green;
            font-size:20px;
        }
    </style>
</head>

<body>
    <p>GeeksforGeeks</p>
    
    <p style="font-family:verdana;">GeeksforGeeks</p>
    <
 Output: css-generic-font-family-collection
Last Updated : 21/07/2025