Cách sử dụng Google Fonts CSS API để phân phối phông chữ trên web một cách hiệu quả.
Trong những năm qua, đã có nhiều thay đổi với công nghệ phông chữ trên web. Trước đây, một hoạt động đặc thù đòi hỏi hình ảnh văn bản hoặc trình bổ trợ Flash (và là thứ ảnh hưởng tới khả năng tối ưu hoá công cụ tìm kiếm của trang web) giờ đây đã trở thành một phương pháp chuẩn trên web. Ngày xửa ngày xưa, bạn phải tải toàn bộ phông chữ trước khi trang tải — với những kiểu và ký tự mà có thể bạn thậm chí chưa từng sử dụng — nhưng thậm chí việc đó đã 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 về công nghệ phông chữ trên web. Trải nghiệm này đã trải qua một chặng đường dài so với tuyên bố giá trị ban đầu – giúp cho web hoạt động nhanh hơn bằng cách cho phép trình duyệt lưu vào bộ nhớ đệm các phông chữ thường dùng trên tất cả những 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 chế độ tối ưu hoá bổ sung và quan trọng để trang web tải nhanh và phông chữ hoạt động tốt.
Khi sử dụng Google Fonts CSS API, trang web của bạn chỉ có thể yêu cầu dữ liệu phông chữ cần để duy trì thời gian tải CSS ở mức tối thiểu, đả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ả điều này xảy ra bằng cách đưa một dòng HTML đơn vào mã của bạn.
Cách sử dụng Google Fonts CSS API
Tài liệu về API CSS của Google Fonts tóm tắt toàn bộ những nội dung này:
Bạn không cần thực hiện bất kỳ lập trình nào; bạn chỉ cần thêm một đường 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ữ trong kiểu CSS.
Bạn chỉ cần bao gồm một dòng duy nhất trong HTML của mình, như sau:
<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 sẽ chỉ định họ hoặc họ muốn và tuỳ ý, trọng số, kiểu, tập hợp con của chúng 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 2 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ì API sẽ ngay lập tức trả về CSS cho người dùng và chuyển họ đến các tệp này.
- Nếu bạn đã yêu cầu một phông chữ có các tham số mà API hiện chưa lưu vào bộ nhớ đệm, thì API này sẽ tập hợp các phông chữ của bạn một cách nhanh chóng bằng cách sử dụng HarfBuzz để thực hiện việc này một cách nhanh chóng và trả về CSS trỏ tới 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
Thật vậy! Phông chữ trên web có thể lớn. Chỉ một trọng lượng của Noto Sans kiểu Nhật trong WOFF2 là gần 3,4MB — và việc tải tệp này xuống cho từng người dùng sẽ chỉ tốn thời gian tải trang. Khi mỗi mili giây đều có giá trị và mỗi byte đều quý giá, thì bạn nên đảm bảo rằng mình chỉ tải dữ liệu mà người dùng cần.
Google Fonts CSS API có thể tạo các tệp phông chữ rất nhỏ (được gọi là tập hợp con), được tạo trong thời gian thực, để chỉ phân phối cho người dùng của bạn 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 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ỳ tham số API nào. API này sẽ phân phát các tệp CSS của người dùng khi unicode-range đã được bật (nếu được trình duyệt web hỗ trợ). Nhờ vậy, họ chỉ tải phông chữ cho những ký tự cụ thể mà trang web của bạn cần.
Bộ mô tả CSS dải unicode là một công cụ hiện có thể được dùng để chống tải xuống phông chữ lớn. Thuộc tính CSS này đặt một dải ký tự unicode trong phần khai báo @font-face. Nếu một trong các ký tự này được hiển thị trên trang, thì phông chữ đó sẽ được tải xuống. Tính năng này hoạt động tốt cho tất cả các loại ngôn ngữ, vì vậy, bạn có thể lấy phông chữ bao gồm các ký tự Latinh, Hy Lạp hoặc Chữ Kirin 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 bạn phải tải cả ba bộ ký tự này thì sẽ 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 rằng phông chữ CJK bao gồm 15-20 lần số lượng ký tự mà phông chữ ký tự Latinh có. 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 ngôn ngữ khác.
Việc sử dụng CSS API và dải ô Unicode có thể giảm khoảng 90% quá trình chuyển tệp. Khi sử dụng phần 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ự thuộc các phạm vi ký tự đó.
Ví dụ: Nếu bạn chỉ muốn đặt từ "こんFILENAMEちは" trong Noto Sans JP, bạn có thể:
- Tự lưu trữ các 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 "こん sắc bìa tất cả".
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ờ vào sự hỗ trợ tích hợp của API để phân tách các phông chữ lớn thành dải unicode. Bằng cách thực hiệ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 thêm kích thước phông chữ xuống chỉ còn 95,3% phông chữ CSS API – 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 của bạn đang sử dụng trình duyệt có hỗ trợ WOFF2, API sẽ cung cấp phông chữ trong WOFF2 nhưng nếu họ đang sử dụng trình duyệt cũ hơn, API sẽ cung cấp phông chữ ở định dạng được trình duyệt đó hỗ trợ. Để giảm kích thước tệp cho mỗi người dùng, API cũng xoá dữ liệu khỏi phông chữ khi không cần thiết. 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 đó.
Chuẩn bị cho phông chữ trên web của bạn trong tương lai bằng API CSS 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 đổi mới các công nghệ phông chữ web, chẳng hạn như WOFF2. Một dự án hiện tại là Incremental Font Transfer (Chuyển phông chữ tăng dần), cho phép người dùng tải những phần rất nhỏ của tệp phông chữ như được dùng trên màn hình và phát trực tuyến trong phần còn lại theo yêu cầu, vượt trội so với hiệu suất của dải unicode. Khi bạn sử dụng API phông chữ trên web của chúng tôi, người dùng của bạn sẽ nhận được những cải tiến cơ bản này của công nghệ chuyển phông chữ khi chúng được cung cấp trong trình duyệt của họ.
Đây là ưu điểm của API phông chữ: người dùng được hưởng lợi từ mỗi 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ữ mới dành cho web? Không thành vấn đề. Hỗ trợ trình duyệt hoặc hệ điều hành mới? Vấn đề này đã được xử lý xong. Vì vậy, thay vì bị bó tay với việc duy trì phông chữ trên web, bạn có thể thoải mái tập trung vào người dùng và nội dung của mình.
Tích hợp sẵn khả năng hỗ trợ nhiều phông chữ
Phông chữ thay đổi là các tệp phông chữ có thể lưu trữ nhiều biến thể thiết kế trong nhiều trụ và phiên bản mới của Google Fonts CSS API có hỗ trợ các phông chữ này. Thêm trục biến đổi bổ sung cho phép 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 phông chữ.
Khi bạn yêu cầu CSS API cụ thể hơn, Google Fonts CSS API chỉ có thể phân phát phần phông chữ biến mà trang web của bạn cần, để giảm kích thước tải xuống cho người dùng. Tính năng này cho phép sử dụng nhiều phông chữ khác nhau cho web mà không làm phát sinh thời gian tải trang lâu. 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 họ phông chữ trong một yêu cầu. API này rất linh hoạt để đáp ứng nhu cầu của bạn.
Dễ triển khai, được tối ưu hóa cho bạn
API CSS của Google Fonts giúp bạn cung cấp những phông chữ:
- Tương thích hơn với trình duyệt web.
- Nhỏ nhất có thể.
- Được gửi nhanh chóng.
- Dễ sử dụng hơn.
Để biết thêm thông tin về Google Fonts, hãy truy cập fonts.google.com. Để tìm hiểu thêm về CSS API, hãy xem Tài liệu về API.
Xác nhận
Hình ảnh chính của leesehee.