Tidadigi Logo

CSS @font-face rule

Quy tắc @font-face trong CSS dùng để nhúng font chữ tùy chỉnh vào trang web. Điều này cho phép bạn dùng bất kỳ font nào. Bạn không cần cài đặt trên máy người dùng. Thiết kế web của bạn nhất quán với kiểu chữ của thương hiệu.

Việc thêm font tùy chỉnh giúp tạo thiết kế độc đáo. Bạn có thể duy trì bản sắc thương hiệu mạnh mẽ và cải thiện trải nghiệm người dùng. Trải nghiệm được cải thiện nhờ các font chữ hấp dẫn.

Cú pháp

@font-face {
  font-family: fontName;
  src: url(fontFile path);
  font-stretch: font-stretch Property;
  font-weight: font-weight Property;
  font-style: font-style Property;
}

Các thuộc tính chính của quy tắc @font-face

Dưới đây là bảng các thuộc tính chính của quy tắc @font-face:

Thuộc tínhMô tả
font-familyChỉ định tên của font chữ tùy chỉnh để dùng trong CSS.
srcXác định vị trí (URL) của tệp font chữ bên ngoài.
font-stretch:Điều chỉnh xem font chữ hiển thị rộng hơn hay hẹp hơn so với độ rộng bình thường.
font-weightThiết lập độ đậm hoặc độ dày của font chữ (ví dụ: normal, bold hoặc giá trị số như 400, 700).
font-styleXác định xem văn bản hiển thị ở kiểu normal, italic hoặc oblique.

Một vài dịch vụ cung cấp font chữ

Các dịch vụ này sẽ cung cấp cho bạn nhiều loại font chữ khác nhau.

Ví dụ về quy tắc CSS @font-face

Dưới đây là một vài ví dụ về các quy tắc font-face trong CSS:

Ví dụ 1: Sử dụng cơ bản

Ví dụ này minh họa việc dùng quy tắc @font-face. Quy tắc này chỉ định các thuộc tính font khác nhau để trang trí văn bản.

HTML 
<!DOCTYPE html>
<html>
<head>
    <title>CSS @font-face rule</title>
    <style>
        @font-face {
            font-family: fontName;
            src: url(sansation_light.woff);
        }

        @font-face {
            font-family: fontName;
            src: url(sansation_bold.woff);
            font-weight: bold;
        }

        div {
            font-family: fontName;
        }

        h1 {
            color: green;
        }
    </style>
</head>

<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <div>A Computer Science Portal for Geeks</div>
    </center>
</body>
</html>

Đầu ra:

css-font-face-rule

Ví dụ 2: Nhiều độ đậm và kiểu font

Ví dụ này minh họa việc dùng quy tắc @font-face. Nó chỉ định nguồn của đường dẫn tệp cùng với định dạng.

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

<head>
    <title>CSS @font-face rule</title>
    <style type="text/css">
        @font-face {
            font-family: "OpenSans";
            src: url("/examples/fonts/OpenSans-Regular.eot");
            src: url("/examples/fonts/OpenSans-Regular.ttf") format("truetype");
            font-stretch: normal;
            font-weight: normal;
            font-style: normal;
        }

        @font-face {
            font-family: "OpenSansBold";
            src: url("/examples/fonts/OpenSans-Bold.eot");
            src: url("/examples/fonts/OpenSans-Bold.ttf") format("truetype");
            font-stretch: normal;
            font-weight: normal;
            font-style: normal;
        }

        /* Specify the OpenSans bold font */

        h1 {
            font-family: "OpenSansBold", Arial, sans-serif;
            color: green;
        }

        p {
            font-family: "OpenSans", Arial, sans-serif;
        }
    </style>
</head>

<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <p>A Computer Science Portal for Geeks</p>
    </center>
</body>

</html>

Đầu ra: 

css-font-face-rule

Lưu ý: Có 5 định dạng Font là: TTF/OTF, WOFF, WOFF2, SVG và EOT.

Hỗ trợ trình duyệt

Quy tắc @font-face được hỗ trợ bởi tất cả các trình duyệt chính.


Last Updated : 21/07/2025