EnglishCSS Web Fonts cho phép bạn tùy chỉnh kiểu chữ (font) trên trang web của mình, mang đến giao diện chuyên nghiệp và cuốn hút hơn. Thay vì chỉ sử dụng các font mặc định trên thiết bị người dùng, CSS Web Fonts giúp bạn dễ dàng tích hợp nhiều kiểu chữ từ các thư viện font hoặc font tự tùy chỉnh vào trang web. Trong bài viết này, chúng ta sẽ tìm hiểu cách sử dụng font từ các thư viện phổ biến, cách tự tải lên font riêng, và các thuộc tính quan trọng để quản lý font chữ.
Bài viết này là một phần trong chuỗi bài học trên "codetuthub.com" cùng với các chủ đề liên quan như CSS Font Styling và CSS Text Effects.
1. Tổng quan về CSS Web Fonts
CSS Web Fonts cung cấp hai cách chính để tích hợp font chữ vào trang web:
- Sử dụng font từ thư viện trực tuyến như Google Fonts.
- Tải font lên từ máy chủ của bạn và tích hợp bằng CSS.
Thuộc tính @font-face
Để sử dụng font không có sẵn trên thiết bị người dùng, bạn có thể sử dụng thuộc tính @font-face. Đây là cách khai báo font trong CSS để đảm bảo chúng hiển thị đúng cách trên các thiết bị và trình duyệt khác nhau.
Cú pháp cơ bản của @font-face
@font-face {
font-family: "CustomFont";
src: url("path-to-font-file.woff2") format("woff2"),
url("path-to-font-file.woff") format("woff");
}Trong ví dụ này:
font-family: Đặt tên cho font tùy chỉnh, sẽ được sử dụng trong mã CSS.src: Đường dẫn đến file font (bạn có thể cung cấp nhiều định dạng font để đảm bảo tính tương thích).
2. Sử dụng Google Fonts
Google Fonts là thư viện font miễn phí và dễ sử dụng, cung cấp nhiều lựa chọn font chữ phong phú. Bạn có thể chọn font trực tiếp trên trang web Google Fonts, sau đó tích hợp vào trang của mình.
Bước 1: Chọn font từ Google Fonts
Truy cập Google Fonts, tìm font mong muốn, sau đó chọn kiểu và kích thước.
Bước 2: Thêm font vào HTML
Sao chép đường dẫn <link> do Google Fonts cung cấp và dán vào phần <head> của tệp HTML.
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">Bước 3: Áp dụng font trong CSS
Khai báo font-family để áp dụng font vào phần tử mong muốn:
body {
font-family: 'Roboto', sans-serif;
}3. Tải lên và sử dụng font tùy chỉnh
Nếu bạn muốn sử dụng một font không có sẵn trên Google Fonts, bạn có thể tải file font lên máy chủ và sử dụng @font-face để khai báo.
Ví dụ sử dụng font tùy chỉnh
Giả sử bạn có file font tên CustomFont.woff2 và CustomFont.woff trong thư mục fonts/:
@font-face {
font-family: "CustomFont";
src: url("fonts/CustomFont.woff2") format("woff2"),
url("fonts/CustomFont.woff") format("woff");
font-weight: normal;
font-style: normal;
}
.custom-text {
font-family: "CustomFont", sans-serif;
}Trong ví dụ này:
@font-facekhai báo font tùy chỉnh với tênCustomFont.font-familytrong.custom-textsử dụngCustomFont, vớisans-seriflà font dự phòng nếu font tải không thành công.
4. Thuộc tính quan trọng khi sử dụng Web Fonts
Khi làm việc với font chữ, CSS cung cấp một số thuộc tính để điều chỉnh cách hiển thị font trên trang web.
4.1 Font-weight
font-weight điều chỉnh độ dày của chữ. Các giá trị phổ biến bao gồm normal, bold, và các số từ 100 đến 900.
.bold-text {
font-family: 'Roboto', sans-serif;
font-weight: 700; /* Độ dày font đậm */
}4.2 Font-style
font-style điều chỉnh kiểu chữ, như normal, italic, và oblique.
.italic-text {
font-family: 'Roboto', sans-serif;
font-style: italic;
}4.3 Font-display
font-display điều khiển cách font hiển thị khi font chưa tải xong, đặc biệt hữu ích khi sử dụng font từ thư viện hoặc font tùy chỉnh.
- swap: Hiển thị font dự phòng cho đến khi font chính sẵn sàng.
- fallback: Hiển thị font dự phòng trong một khoảng thời gian ngắn rồi đổi sang font chính khi có sẵn.
@font-face {
font-family: "CustomFont";
src: url("fonts/CustomFont.woff2") format("woff2");
font-display: swap;
}5. Các định dạng font phổ biến
Khi sử dụng web fonts, việc chọn định dạng phù hợp đảm bảo tính tương thích trên các trình duyệt và thiết bị khác nhau.
- WOFF (Web Open Font Format): Định dạng phổ biến nhất, hỗ trợ tốt trên hầu hết các trình duyệt.
- WOFF2: Phiên bản cải tiến của WOFF, hỗ trợ nén tốt hơn.
- TTF (TrueType Font): Định dạng phổ biến nhưng kích thước lớn hơn, thích hợp khi cần hỗ trợ trên các trình duyệt cũ.
- SVG Fonts: Chỉ dùng cho biểu tượng hoặc chữ nhỏ, không phổ biến cho văn bản dài.
6. Mẹo tối ưu hóa CSS Web Fonts
6.1 Chọn số lượng kiểu chữ hợp lý
Chỉ tải các kiểu chữ cần thiết để tránh làm chậm tốc độ tải trang. Ví dụ, nếu chỉ cần chữ bình thường và chữ đậm, chỉ tải các biến thể 400 và 700.
6.2 Sử dụng font-display: swap
Cài đặt font-display: swap giúp trang không bị trống trong khi chờ font tải, mang lại trải nghiệm tốt hơn cho người dùng.
6.3 Tải font từ CDN
Sử dụng CDN như Google Fonts để tăng tốc độ tải font từ các máy chủ toàn cầu, đồng thời giảm tải cho máy chủ của bạn.
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">7. Ứng dụng thực tế của CSS Web Fonts trong thiết kế
7.1 Tạo tiêu đề nổi bật
Sử dụng font chữ đặc biệt cho tiêu đề giúp tạo điểm nhấn và tăng độ chuyên nghiệp cho trang web.
h1, h2, h3 {
font-family: 'Playfair Display', serif;
font-weight: 700;
}7.2 Font chữ thân thiện cho nội dung văn bản
Font chữ dễ đọc như Roboto hoặc Open Sans là lựa chọn lý tưởng cho nội dung văn bản dài, giúp người đọc thoải mái hơn.
body {
font-family: 'Roboto', sans-serif;
font-size: 16px;
}7.3 Kết hợp font chữ cho phong cách thiết kế
Kết hợp các font chữ khác nhau cho tiêu đề và nội dung giúp tạo phong cách thiết kế độc đáo và rõ ràng hơn.
h1, h2, h3 {
font-family: 'Lora', serif;
}
p {
font-family: 'Montserrat', sans-serif;
}8. Kết luận
CSS Web Fonts là một công cụ mạnh mẽ giúp bạn tùy chỉnh giao diện trang web và tạo phong cách độc đáo cho nội dung của mình. Từ việc tích hợp font từ thư viện trực tuyến như Google Fonts đến tải font tùy chỉnh với @font-face, CSS cung cấp mọi công cụ bạn cần để quản lý font chữ hiệu quả. Để tìm hiểu thêm về các tùy chọn CSS khác, hãy xem thêm các bài học trên "codetuthub.com" như CSS Font Styling, CSS Text Effects, và CSS Responsive Typography.
