Cách sử dụng API CSS của Google Fonts để phân phối phông chữ web một cách hiệu quả.
Công nghệ phông chữ web đã thay đổi rất nhiều trong những năm qua. Trước đây, việc sử dụng hình ảnh văn bản hoặc trình bổ trợ Flash (và việc này đã làm ảnh hưởng đến khả năng tối ưu hoá công cụ tìm kiếm của trang web) là một phương pháp đặc biệt, nhưng giờ đây, đây là phương pháp tiêu chuẩn trên web. Trước đây, bạn phải tải toàn bộ phông chữ trước khi trang tải — với các kiểu và ký tự mà bạn có thể chưa từng sử dụng — nhưng ngay cả điều đó cũng đã trở thành dĩ vãng.
Google Fonts CSS API cũng đã phát triển qua nhiều năm để bắt kịp những thay đổi trong công nghệ phông chữ web. API này đã đi một chặng đường dài từ giá trị ban đầu là giúp web chạy nhanh hơn bằng cách cho phép trình duyệt của bạn lưu các phông chữ thường dùng vào bộ nhớ đệm trên tất cả các trang web sử dụng API. Điều này không còn đúng nữa, nhưng API vẫn cung cấp các tính năng tối ưu hoá quan trọng và bổ sung để trang web tải nhanh và phông chữ hoạt động tốt.
Khi sử dụng CSS API của Google Fonts, trang web của bạn chỉ có thể yêu cầu dữ liệu phông chữ cần thiết để giảm thiểu thời gian tải CSS, đảm bảo khách truy cập trang web có thể tải nội dung của bạn nhanh nhất có thể. API sẽ phản hồi từng yêu cầu bằng phông chữ phù hợp nhất cho trình duyệt web đó.
Tất cả những việc này xảy ra bằng cách thêm một dòng HTML vào mã của bạn.
Cách sử dụng API CSS của Google Fonts
Tài liệu về CSS API của Google Fonts tóm tắt rất rõ ràng:
Bạn không cần phải lập trình gì; bạn chỉ cần thêm một liên kết biểu định kiểu đặc biệt vào tài liệu HTML của mình, sau đó tham chiếu đến phông chữ theo kiểu CSS.
Bạn chỉ cần đưa một dòng duy nhất vào HTML, như ví dụ dưới đây:
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
Khi yêu cầu phông chữ từ API, bạn chỉ định họ muốn phông chữ nào và tuỳ chọn độ đậm, kiểu, tập hợp con và nhiều lựa chọn khác. Sau đó, API sẽ xử lý yêu cầu của bạn theo một trong hai cách:
- Nếu yêu cầu của bạn sử dụng các tham số phổ biến mà API đã có tệp, thì yêu cầu đó sẽ ngay lập tức trả về CSS cho người dùng, hướng họ đến các tệp này.
- Nếu bạn yêu cầu phông chữ có các thông số mà API hiện không lưu vào bộ nhớ đệm, thì API sẽ tạo một tập hợp con phông chữ ngay lập tức, sử dụng HarfBuzz để thực hiện nhanh chóng và trả về CSS trỏ đến các phông chữ đó.
Tệp phông chữ có thể lớn nhưng không nhất thiết phải lớn
Phông chữ trên web có thể có kích thước lớn. Chỉ một trọng số của Noto Sans Japanese trong WOFF2 đã có kích thước gần 3,4 MB. Việc tải phông chữ này xuống cho từng người dùng sẽ làm chậm thời gian tải trang. Khi mỗi mili giây đều được tính và mỗi byte đều quý giá, bạn muốn chắc chắn rằng mình chỉ tải dữ liệu mà người dùng cần.
API CSS của Google Fonts có thể tạo các tệp phông chữ rất nhỏ (gọi là tập hợp con), được tạo theo thời gian thực để chỉ phân phát cho người dùng văn bản và kiểu mà trang web của bạn yêu cầu. Thay vì phân phát toàn bộ phông chữ, bạn có thể yêu cầu các ký tự cụ thể bằng cách sử dụng tham số text.
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap&text=RobtMn" rel="stylesheet" />
CSS API cũng tự động cung cấp các tính năng tối ưu hoá phông chữ bổ sung trên web cho người dùng mà không cần bất kỳ thông số API nào. API này sẽ phân phát cho người dùng các tệp CSS với unicode-range đã được bật (nếu được trình duyệt web của họ hỗ trợ). Nhờ đó, họ chỉ tải phông chữ cho các ký tự cụ thể mà trang web của bạn cần.
Giờ đây, bạn có thể dùng chỉ số mô tả CSS phạm vi unicode để chống lại việc tải phông chữ lớn xuống. Thuộc tính CSS này đặt một phạm vi ký tự Unicode mà nội dung khai báo @font-face chứa. Nếu một trong các ký tự này được hiển thị trên trang, phông chữ đó sẽ được tải xuống. Phương thức này hoạt động tốt với mọi loại ngôn ngữ, vì vậy, bạn có thể lấy một phông chữ có chứa các ký tự Latinh, Hy Lạp hoặc Cyrillic và tạo các tập hợp con nhỏ hơn. Trong biểu đồ trước, bạn có thể thấy rằng nếu phải tải cả ba bộ ký tự này, thì sẽ có hơn 600 ký tự.
Thao tác này cũng bật phông chữ tiếng Trung, tiếng Nhật và tiếng Hàn (CJK) cho web. Trong biểu đồ trước, bạn có thể thấy phông chữ CJK bao gồm số lượng ký tự gấp 15 đến 20 lần so với phông chữ ký tự Latinh. Những phông chữ này thường rất lớn và nhiều ký tự trong các ngôn ngữ đó không được sử dụng thường xuyên như các ký tự khác.
Việc sử dụng CSS API và unicode-range có thể giảm khoảng 90% lượng dữ liệu chuyển tệp. Khi sử dụng chỉ số mô tả unicode-range, bạn có thể xác định riêng từng phần và mỗi lát cắt chỉ được tải xuống khi nội dung của bạn chứa một trong các ký tự trong các dải ký tự này.
Ví dụ: Nếu chỉ muốn đặt từ "こんにちは" trong Noto Sans JP, bạn có thể:
- Tự lưu trữ tệp WOFF2 của riêng bạn.
- Sử dụng CSS API để truy xuất WOFF2.
- Sử dụng CSS API với tham số text= được đặt thành "こんにちは".
Trong ví dụ này, bạn có thể thấy rằng bằng cách sử dụng CSS API, bạn đã tiết kiệm được 97,5% so với việc tự lưu trữ phông chữ WOFF2, nhờ tính năng hỗ trợ tích hợp của API để tách các phông chữ lớn thành phạm vi unicode. Bằng cách tiến thêm một bước và chỉ định chính xác văn bản bạn muốn hiển thị, bạn có thể giảm kích thước phông chữ xuống còn 95,3% phông chữ API CSS – nhỏ hơn 99,9% so với phông chữ tự lưu trữ.
Google Fonts CSS API sẽ tự động phân phối phông chữ ở định dạng nhỏ nhất và tương thích nhất mà trình duyệt của người dùng hỗ trợ. Nếu người dùng đang sử dụng trình duyệt hỗ trợ WOFF2, API sẽ cung cấp phông chữ ở định dạng WOFF2, nhưng nếu họ đang sử dụng trình duyệt cũ, API sẽ phân phối phông chữ ở định dạng mà trình duyệt đó hỗ trợ. Để giảm kích thước tệp cho mỗi người dùng, API cũng sẽ xoá dữ liệu khỏi phông chữ khi không cần đến. Ví dụ: dữ liệu gợi ý sẽ bị xoá đối với những người dùng có trình duyệt không cần dữ liệu này.
Chuẩn bị sẵn sàng cho phông chữ web của bạn trong tương lai bằng CSS API của Google Fonts
Nhóm Google Fonts cũng đóng góp vào các tiêu chuẩn W3C mới để tiếp tục cải tiến các công nghệ phông chữ web, chẳng hạn như WOFF2. Một dự án hiện tại là Chuyển phông chữ gia tăng, cho phép người dùng tải các phần rất nhỏ của tệp phông chữ khi chúng được sử dụng trên màn hình và truyền phần còn lại theo yêu cầu, vượt qua hiệu suất của phạm vi unicode. Khi bạn sử dụng API phông chữ web của chúng tôi, người dùng sẽ nhận được những điểm cải tiến cơ bản về công nghệ chuyển phông chữ này khi các điểm cải tiến đó có sẵn trong trình duyệt của họ.
Đây là nét đẹp của API phông chữ: người dùng được hưởng lợi từ mỗi điểm cải tiến công nghệ mới mà không cần bất kỳ thay đổi nào đối với trang web của bạn. Định dạng phông chữ web mới? Không thành vấn đề. Hỗ trợ trình duyệt hoặc hệ điều hành mới? Chúng tôi đã xử lý vấn đề này. Vì vậy, thay vì phải loay hoay với việc bảo trì phông chữ web, bạn có thể tập trung vào người dùng và nội dung của mình.
Phông chữ biến đổi hỗ trợ tích hợp
Phông chữ biến thể là các tệp phông chữ có thể lưu trữ một loạt biến thể thiết kế giữa nhiều trục. Phiên bản mới của API CSS Phông chữ Google hỗ trợ các phông chữ này. Việc thêm một trục biến thể bổ sung giúp tăng tính linh hoạt mới với phông chữ, nhưng phông chữ có thể tăng gần gấp đôi kích thước của tệp.
Khi bạn đưa ra yêu cầu cụ thể hơn về API CSS, API CSS của Google Fonts chỉ có thể phân phát phần phông chữ biến thể mà trang web của bạn cần để giảm kích thước tải xuống cho người dùng. Điều này cho phép sử dụng phông chữ biến thể cho web mà không phải mất nhiều thời gian tải trang. Bạn có thể thực hiện việc này bằng cách chỉ định một giá trị trên một trục hoặc chỉ định một dải ô; thậm chí, bạn có thể chỉ định nhiều trục và nhiều bộ phông chữ trong một yêu cầu. API này linh hoạt để đáp ứng nhu cầu của bạn.
Dễ triển khai, được tối ưu hoá cho bạn
API CSS của Google Fonts giúp bạn phân phối các phông chữ:
- Khả năng tương thích cao hơn với trình duyệt web.
- Nhỏ nhất có thể.
- Gửi nhanh chóng.
- Dễ sử dụng hơn cho bạn.
Để biết thêm thông tin về Google Fonts, hãy truy cập vào fonts.google.com. Để tìm hiểu thêm về CSS API, hãy xem Tài liệu về API.
Lời cảm ơn
Hình ảnh chính của leesehee.