3.1 Web Fonts
Kết nối fonts trên trang web đóng vai trò then chốt trong việc tạo ra thiết kế độc đáo và hấp dẫn. Web fonts cho phép sử dụng các fonts không được cài đặt trên máy tính người dùng nhờ việc tải xuống từ máy chủ. Google Fonts là một trong những dịch vụ phổ biến nhất để sử dụng web fonts. Hãy cùng tìm hiểu chi tiết cách kết nối web fonts và Google Fonts trên các trang web.
Web fonts là các fonts được tải xuống từ máy chủ từ xa và hiển thị trên trang web, ngay cả khi chúng không được cài đặt trên thiết bị của người dùng. Điều này mang lại sự linh hoạt lớn hơn trong việc chọn fonts và cho phép tạo ra thiết kế hấp dẫn hơn.
Kết nối web fonts
Ví dụ kết nối web fonts bằng cách sử dụng @font-face:
Đầu tiên, cần tải các tệp font lên máy chủ của bạn. Thông thường, đây là các tệp định dạng .woff, .woff2,
.ttf, .eot và .svg.
Bước 2. Sử dụng @font-face trong CSS:
@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;
}
Ưu điểm của việc sử dụng @font-face:
- Kiểm soát: kiểm soát hoàn toàn việc chọn và sử dụng fonts
- Tương thích: hỗ trợ các định dạng fonts khác nhau để đảm bảo tương thích với các trình duyệt khác nhau
- WOFF (Web Open Font Format): định dạng được hỗ trợ rộng rãi cho web fonts
- WOFF2: phiên bản cải tiến của WOFF với khả năng nén tốt hơn
- TTF (TrueType Font): định dạng chuẩn cho fonts, được hầu hết các trình duyệt hỗ trợ
- EOT (Embedded OpenType): định dạng được Internet Explorer hỗ trợ
- SVG: định dạng cho việc sử dụng fonts trong đồ họa SVG
3.2 Google Fonts
Google Fonts cung cấp một bộ sưu tập các fonts miễn phí, dễ dàng tích hợp vào trang web của bạn. Ưu điểm của việc sử dụng Google Fonts là sự đơn giản trong kết nối và sự đa dạng của các fonts có sẵn.
Kết nối fonts bằng Google Fonts:
1. Lựa chọn font trên trang Google Fonts:
Truy cập Google Fonts và chọn font bạn muốn sử dụng.
2. Lấy liên kết để kết nối:
Trên trang của font đã chọn, chọn các kiểu chữ và phong cách bạn cần. Sau đó, Google Fonts sẽ tạo ra liên kết để kết nối font.
3. Thêm liên kết vào tài liệu HTML:
Sao chép liên kết được tạo và dán vào phần <head> của tài liệu HTML của bạn.
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
1. Áp dụng font trong CSS:
Sử dụng thuộc tính font-family để áp dụng font cho các phần tử trên trang.
body {
font-family: 'Roboto', sans-serif;
}
h1 {
font-family: 'Roboto', sans-serif;
font-weight: 700;
}
Ví dụ sử dụng Google Fonts qua HTML:
<html lang="vi-VN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Fonts</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Roboto', sans-serif;
}
</style>
</head>
<body>
<p>Văn bản này được hiển thị bằng cách sử dụng font Roboto.</p>
</body>
</html>
3.3 Sử dụng CSS @import
Cũng có thể kết nối fonts Google bằng cách sử dụng quy tắc @import trong CSS.
Ví dụ sử dụng Google Fonts qua @import:
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
body {
font-family: 'Roboto', sans-serif;
}
Ưu điểm của việc sử dụng Google Fonts:
- Đơn giản trong sử dụng: dễ dàng tích hợp fonts chỉ với một dòng mã
- Lựa chọn phong phú: truy cập vào lượng lớn các fonts với nhiều kiểu dáng và thể loại
- Tối ưu hóa hiệu suất: fonts được tải từ các máy chủ hiệu năng cao của Google
Thuộc tính display="swap" trong mã kết nối web fonts của Google Fonts giúp cải thiện hiệu suất và trải nghiệm người dùng. Khi bạn kết nối web fonts, trình duyệt phải tải xuống và hiển thị font trước khi có thể hiển thị văn bản. Điều này có thể gây ra độ trễ, đặc biệt khi mạng chậm. display="swap" giải quyết vấn đề này bằng cách chỉ định trình duyệt sử dụng font hệ thống mặc định trong khi web font đang tải. Khi web font tải xong, trình duyệt sẽ thay thế nó vào chỗ font hệ thống.
Ảnh hưởng đến hiệu suất:
Khi sử dụng web fonts, quan trọng là cân nhắc ảnh hưởng đến hiệu suất của trang web. Tải xuống nhiều fonts hoặc kiểu chữ có thể tăng thời gian tải trang. Để giảm thiểu ảnh hưởng này, hãy làm theo các khuyến nghị sau:
- Sử dụng số lượng kiểu chữ tối thiểu cần thiết: chọn chỉ những kiểu chữ bạn thực sự cần
- Sử dụng thuộc tính
display="swap": điều này đảm bảo hiển thị văn bản bằng font hệ thống trong khi tải web font, cải thiện cảm nhận về hiệu suất của người dùng - Tối ưu hóa việc phân phối fonts: sử dụng caching và preload để cải thiện hiệu suất
GO TO FULL VERSION