@font-face CSS: Font chữ độc đáo cho website của bạn

Bạn muốn website của mình có một diện mạo thật độc đáo và chuyên nghiệp? Hãy sử dụng @font-face trong CSS để nhúng các font chữ tùy chỉnh. Điều này giúp website của bạn nổi bật và tạo ấn tượng tốt với người dùng. Tìm hiểu ngay cách sử dụng @font-face và khám phá sức mạnh của nó! Đọc thêm về CSS để làm chủ phong cách website.

@font-face CSS là gì?

@font-face là một quy tắc CSS cho phép bạn nhúng các font chữ tùy chỉnh vào trang web của mình. Thông thường, trình duyệt chỉ hiển thị các font chữ được cài đặt sẵn trên hệ thống của người dùng. @font-face giải quyết vấn đề này bằng cách cho phép bạn tải các tệp font chữ từ máy chủ của mình và sử dụng chúng trên trang web.

This empowers you to craft websites using fonts not natively available on users' devices.

Tại sao nên sử dụng @font-face?

• Tính thẩm mỹ: Sử dụng font chữ độc đáo giúp website nổi bật và thể hiện cá tính thương hiệu.
• Trải nghiệm người dùng: Lựa chọn font chữ phù hợp giúp cải thiện khả năng đọc và tạo cảm giác thoải mái cho người dùng.
• Tính nhất quán: Đảm bảo font chữ hiển thị giống nhau trên mọi thiết bị và trình duyệt.
• Thương hiệu: Thể hiện bản sắc riêng và xây dựng nhận diện thương hiệu mạnh mẽ thông qua font chữ.

Lợi ích khi sử dụng @font-face trong CSS

Việc sử dụng @font-face mang lại nhiều lợi ích vượt trội cho việc thiết kế và phát triển website. Nó cho phép bạn kiểm soát hoàn toàn giao diện văn bản trên trang web của mình. Bạn có thể tùy chỉnh và cá nhân hóa trải nghiệm người dùng.

Cú pháp của @font-face

Cú pháp cơ bản của quy tắc @font-face như sau:

@font-face { font-family: 'TênFontBạnMuốnĐặt'; src: url('đường/dẫn/đến/font.woff2') format('woff2'), url('đường/dẫn/đến/font.woff') format('woff'), url('đường/dẫn/đến/font.ttf') format('truetype'); font-weight: normal; font-style: normal; }

Giải thích:

• font-family : Tên bạn muốn đặt cho font chữ này. Sử dụng tên này để áp dụng font chữ cho các phần tử HTML.
• src : Đường dẫn đến các tệp font chữ. Nên cung cấp nhiều định dạng khác nhau ( .woff2 , .woff , .ttf ) để đảm bảo khả năng tương thích trên mọi trình duyệt.
• format : Định dạng của tệp font chữ.
• font-weight : Độ đậm của font chữ (ví dụ: normal , bold , 100 , 900 ).
• font-style : Kiểu chữ (ví dụ: normal , italic ).

Ví dụ sử dụng @font-face

Giả sử bạn có một font chữ tên là "MyCustomFont" và các tệp font chữ của nó nằm trong thư mục "fonts". Bạn có thể sử dụng @font-face như sau:

@font-face { font-family: 'MyCustomFont'; src: url('fonts/MyCustomFont.woff2') format('woff2'), url('fonts/MyCustomFont.woff') format('woff'); font-weight: normal; font-style: normal; } body { font-family: 'MyCustomFont', sans-serif; }

Trong ví dụ này, chúng ta đã định nghĩa một font chữ có tên là "MyCustomFont" và áp dụng nó cho toàn bộ phần tử body . Nếu trình duyệt không hỗ trợ "MyCustomFont", nó sẽ sử dụng font chữ mặc định sans-serif .

Các định dạng font chữ phổ biến

• WOFF2: Định dạng font chữ được khuyến nghị sử dụng vì nó cung cấp khả năng nén tốt nhất và được hỗ trợ rộng rãi trên các trình duyệt hiện đại.
• WOFF: Định dạng font chữ phổ biến, được hỗ trợ bởi nhiều trình duyệt.
• TTF: Định dạng font chữ lâu đời, vẫn được sử dụng nhưng không được khuyến nghị bằng WOFF2 hoặc WOFF.
• OTF: Tương tự như TTF, OTF (OpenType Font) cũng là một định dạng font vector phổ biến.
• EOT: Định dạng font chữ cũ, chỉ được hỗ trợ bởi Internet Explorer. Không nên sử dụng EOT trong các dự án mới.

Mẹo tối ưu hóa @font-face

• Sử dụng WOFF2: Ưu tiên sử dụng định dạng WOFF2 để có hiệu suất tốt nhất.
• Chỉ tải các glyph cần thiết: Sử dụng các công cụ như Font Squirrel để tạo các phiên bản font chữ chỉ chứa các ký tự cần thiết cho trang web của bạn.
• Sử dụng font-display : Thuộc tính font-display cho phép bạn kiểm soát cách trình duyệt hiển thị văn bản trong khi font chữ đang được tải. Các giá trị phổ biến bao gồm swap , fallback , optional .
• Tối ưu hóa kích thước tệp font chữ: Sử dụng các công cụ nén font chữ để giảm kích thước tệp.
• Sử dụng CDN: Sử dụng mạng phân phối nội dung (CDN) để phân phối các tệp font chữ từ các máy chủ gần người dùng hơn.