Tidadigi Logo

CSS Fonts

CSS fonts kiểm soát cách văn bản hiển thị trên trang web. Với CSS, bạn có thể chỉ định các thuộc tính khác nhau. Ví dụ như font family, size, weight, style và line height để tạo kiểu chữ hấp dẫn và dễ đọc.

Các thuộc tính chính của CSS Fonts

Để tùy chỉnh fonts một cách hiệu quả trong thiết kế web, cần hiểu các thuộc tính chính. Dưới đây là những thuộc tính CSS font quan trọng nhất bạn cần nắm vững.

  • font-family: Thuộc tính này dùng để chỉ định loại font chữ sẽ được sử dụng.
  • font-size: Thuộc tính này giúp xác định kích thước của văn bản hiển thị.
  • font-weight: Thuộc tính này dùng để điều chỉnh độ dày của chữ.
  • font-style: Thuộc tính này kiểm soát độ nghiêng của chữ (ví dụ: italic).
  • line-height: Thuộc tính này đặt khoảng cách giữa các dòng văn bản.
  • letter-spacing: Thuộc tính này dùng để thay đổi khoảng cách giữa các ký tự.
  • text-transform: Thuộc tính này kiểm soát việc viết hoa của văn bản.
HTML 
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
        .gfg {
            font-family: "Arial, Helvetica, sans-serif";
            font-size: 60px;
            color: #090;
            text-align: center;
        }
    </style>

<!--Driver Code Starts-->
</head>

<body>
    <div class="gfg">GeeksforGeeks</div>
</body>

</html>

<!--Driver Code Ends-->
  • Đoạn code áp dụng font Arial màu xanh lá cây 60px cho văn bản "GeeksforGeeks". Sau đó căn giữa nó trên trang.
  • Văn bản được định kiểu bằng class .gfg trong HTML.

Cách áp dụng Fonts trong CSS

. font-family

Thuộc tính font-family xác định font nào sẽ được dùng cho văn bản. Bạn có thể cung cấp danh sách fonts dự phòng nếu font ưu tiên không khả dụng.

Cú pháp:

font-family: "Font Name", generic-font-name;
CSS 
body {
    font-family: "Arial", sans-serif;
}

Trong ví dụ này, trình duyệt sẽ thử hiển thị văn bản bằng Arial trước. Nếu Arial không có sẵn, nó sẽ chuyển sang font sans-serif.

. font-size

Thuộc tính font-size kiểm soát kích thước của văn bản. Bạn có thể đặt kích thước bằng nhiều đơn vị. Ví dụ như pixels (px), ems (em) và percentages (%).

Cú pháp:

font-size: value;
CSS 
h1 {
    font-size: 32px; /* Pixels */
}

p {
    font-size: 1.2em; /* Relative to the parent element */
}
  • Pixels (px) cung cấp kích thước font cố định.
  • Ems (em) có liên quan đến kích thước font của phần tử cha. Điều này giúp chúng hữu ích cho thiết kế responsive.

. font-weight

Thuộc tính font-weight kiểm soát độ dày của văn bản. Nó có thể chấp nhận các giá trị như normal, bold, hoặc giá trị số (100 đến 900).

Cú pháp:

font-weight: value;
CSS 
p {
    font-weight: bold; /* Bold text */
}

strong {
    font-weight: 700; /* Equivalent to bold */
}

Các giá trị số cho phép kiểm soát tốt hơn độ dày. Ví dụ: 100 cho light, 900 cho extra bold.

. font-style

Thuộc tính font-style xác định kiểu của font. Thông thường là italic hoặc normal.

Cú pháp:

font-style: value;
CSS 
em {
    font-style: italic; /* Italicized text */
}

p {
    font-style: normal; /* Normal text */
}

. line-height

Thuộc tính line-height xác định khoảng cách giữa các dòng văn bản. Tăng line height cải thiện khả năng đọc. Đặc biệt đối với các đoạn văn dài.

Cú pháp:

line-height: value;
CSS 
p {
    line-height: 1.5; /* 1.5 times the font size */
}

Web Safe Fonts so với Custom Fonts

. Web Safe Fonts

Web safe fonts thường được hỗ trợ trên tất cả các trình duyệt và hệ điều hành. Các fonts này được cài đặt sẵn trên hầu hết máy tính. Đảm bảo văn bản của bạn hiển thị giống nhau trên các thiết bị.

Các Web Safe Fonts phổ biến

  1. Arial
  2. Times New Roman
  3. Courier New
  4. Verdana
  5. Georgia
CSS 
body {
    font-family: "Verdana", sans-serif;
}

. Custom Fonts

Custom fonts cho phép bạn sử dụng các font không được cài đặt sẵn trên thiết bị của người dùng. Bạn có thể tải chúng bằng web fonts. Phương pháp phổ biến nhất là dùng Google Fonts hoặc tự host fonts trên server.

HTML 
<head>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>
    <h1 style="font-family: 'Roboto', sans-serif;">Hello, World!</h1>
</body>

Responsive Typography

Để làm cho typography thích ứng với các kích thước màn hình khác nhau, hãy dùng các đơn vị responsive. Ví dụ như em, rem, %, hoặc vw cho kích thước font. Bạn cũng có thể kết hợp CSS media queries với typography. Điều này đảm bảo khả năng đọc trên các thiết bị.

CSS 
body {
    font-size: 16px; /* Default font size */
}

@media (max-width: 600px) {
    body {
        font-size: 14px; /* Smaller font on smaller screens */
    }
}
  • em và rem: Các đơn vị này tương ứng với kích thước font của phần tử cha hoặc phần tử gốc. Điều này cho phép khả năng масштабов tốt hơn.
  • vw (viewport width): Đơn vị này масштабов kích thước font dựa trên chiều rộng của viewport. Điều này rất tốt cho bố cục linh hoạt.

Các phương pháp hay nhất để sử dụng CSS Fonts

  • Giới hạn số lượng Fonts: Tránh sử dụng quá nhiều loại font trên một trang. Chỉ nên dùng 2-3 font families để duy trì tính nhất quán. Việc này giúp cải thiện thời gian tải trang.
  • Fonts dự phòng: Luôn xác định fonts dự phòng để đảm bảo khả năng đọc. Điều này áp dụng trong trường hợp font chính không khả dụng.
  • Khả năng đọc: Chọn các font dễ đọc trên mọi kích thước màn hình. Đặc biệt là đối với văn bản nội dung chính.
  • Tối ưu hóa tải Font: Nếu bạn đang sử dụng custom fonts, hãy tối ưu hóa quá trình tải. Chỉ bao gồm các weight và style cần thiết.

Last Updated : 21/07/2025