Developer API cung cấp quyền truy cập vào siêu dữ liệu cho tất cả các họ phông chữ do Google Fonts cung cấp. Thư viện này cho phép các ứng dụng truy vấn Google Fonts để biết các họ phông chữ có sẵn. REST API cung cấp dữ liệu ở định dạng JSON, bao gồm các kiểu chữ và tập lệnh (được gọi là tập hợp con trong Google Fonts) trong mỗi họ phông chữ. API này có thể sắp xếp danh sách các họ theo thứ tự bảng chữ cái, theo ngày thêm, theo số lượng kiểu, theo xu hướng hoặc theo mức độ phổ biến.
Đối tượng
Tài liệu này dành cho nhà phát triển web và ứng dụng. Để sử dụng Developer API, bạn cần có kiến thức về JavaScript.
Ví dụ nhanh
Để truy xuất danh sách phông chữ động do dịch vụ Google Fonts cung cấp, hãy gửi yêu cầu sau:
https://www.googleapis.com/webfonts/v1/webfonts?key=YOUR-API-KEY
Kết quả mẫu sẽ có dạng như sau:
{
"kind": "webfonts#webfontList",
"items": [
[...]
{
"family": "Anonymous Pro",
"variants": [
"regular",
"italic",
"700",
"700italic"
],
"subsets": [
"cyrillic",
"greek",
"latin",
"latin-ext"
],
"version": "v21",
"lastModified": "2022-09-22",
"files": {
"regular": "http://fonts.gstatic.com/s/anonymouspro/v21/rP2Bp2a15UIB7Un-bOeISG3pLlw89CH98Ko.ttf",
"italic": "http://fonts.gstatic.com/s/anonymouspro/v21/rP2fp2a15UIB7Un-bOeISG3pHl428AP44Kqr2Q.ttf",
"700": "http://fonts.gstatic.com/s/anonymouspro/v21/rP2cp2a15UIB7Un-bOeISG3pFuAT0CnW7KOywKo.ttf",
"700italic": "http://fonts.gstatic.com/s/anonymouspro/v21/rP2ap2a15UIB7Un-bOeISG3pHl4OTCzc6IG30KqB9Q.ttf"
},
"category": "monospace",
"kind": "webfonts#webfont",
"menu": "http://fonts.gstatic.com/s/anonymouspro/v21/rP2Bp2a15UIB7Un-bOeISG3pHl028A.ttf"
},
{
"family": "Antic",
"variants": [
"regular"
],
"subsets": [
"latin"
],
"version": "v19",
"lastModified": "2022-09-22",
"files": {
"regular": "http://fonts.gstatic.com/s/antic/v19/TuGfUVB8XY5DRaZLodgzydtk.ttf"
},
"category": "sans-serif",
"kind": "webfonts#webfont",
"menu": "http://fonts.gstatic.com/s/antic/v19/TuGfUVB8XY5DRZZKq9w.ttf"
},
[...]
]
}
Xác định ứng dụng của bạn với Google
Ứng dụng của bạn cần xác định danh tính mỗi khi gửi yêu cầu đến Google Fonts Developer API bằng cách thêm khoá API vào mỗi yêu cầu.
Lấy và sử dụng khoá API
Mua khoáHoặc tạo một mã trong trang Thông tin đăng nhập.
Sau khi có khoá API, ứng dụng của bạn có thể thêm tham số truy vấn key=yourAPIKey vào tất cả URL yêu cầu.
Khoá API an toàn khi được nhúng vào URL; khoá này không cần mã hoá.
Thông tin chi tiết
Phản hồi JSON (xem mẫu ở trên) bao gồm một mảng có tên là "items" (mặt hàng) chứa các đối tượng có thông tin về từng họ phông chữ.
Đối tượng gia đình bao gồm các trường sau:
- kind: Loại đối tượng, một đối tượng phông chữ trên web
- family: Tên của gia đình
- tập hợp con: Danh sách các tập lệnh được họ phông chữ hỗ trợ
- menu: URL đến tập hợp con của gia đình, chỉ bao gồm tên của gia đình.
- biến thể: Các kiểu khác nhau có sẵn cho họ
- version: Phiên bản bộ phông chữ.
- axes: Phạm vi trục, Chỉ xuất hiện theo yêu cầu (xem bên dưới) đối với phông chữ có thể thay đổi.
- lastModified: Ngày (định dạng "yyyy-MM-dd") sửa đổi bộ phông chữ lần gần đây nhất.
- files: Các tệp bộ phông chữ (có tất cả các tập lệnh được hỗ trợ) cho từng biến thể có sẵn.
- color_capabilities: Các định dạng màu (nếu có) mà dòng thiết bị này hỗ trợ
- tags: Các thẻ áp dụng cho toàn bộ không gian thiết kế của họ. Chỉ xuất trình khi được yêu cầu (xem bên dưới).
Bằng cách kết hợp thông tin cho từng họ, bạn có thể dễ dàng tạo một yêu cầu Fonts API. Ví dụ: giả sử chúng ta có một tham chiếu đến đối tượng họ cho Anonymous Pro:
[...]
var apiUrl = [];
apiUrl.push('https://fonts.googleapis.com/css?family=');
apiUrl.push(anonymousPro.family.replace(/ /g, '+'));
if (contains('italic', anonymousPro.variants)) {
apiUrl.push(':');
apiUrl.push('italic');
}
if (contains('greek', anonymousPro.subsets)) {
apiUrl.push('&subset=');
apiUrl.push('greek');
}
// url: 'https://fonts.googleapis.com/css?family=Anonymous+Pro:italic&subset=greek'
var url = apiUrl.join('');
[...]
Sắp xếp
Theo mặc định, danh sách gia đình được trả về mà không theo thứ tự cụ thể. Tuy nhiên, bạn có thể sắp xếp danh sách bằng cách sử dụng tham số sắp xếp:
https://www.googleapis.com/webfonts/v1/webfonts?sort=popularity
Các giá trị sắp xếp có thể là:
- alpha: Sắp xếp danh sách theo thứ tự bảng chữ cái
- date: Sắp xếp danh sách theo ngày thêm (phông chữ được thêm hoặc cập nhật gần đây nhất sẽ xuất hiện trước)
- mức độ phổ biến: Sắp xếp danh sách theo mức độ phổ biến (gia đình phổ biến nhất xếp trước)
- style: Sắp xếp danh sách theo số lượng kiểu chữ có sẵn (họ phông chữ có nhiều kiểu chữ nhất sẽ xuất hiện đầu tiên)
- xu hướng: Sắp xếp danh sách theo những gia đình có mức sử dụng tăng lên (gia đình có mức tăng cao nhất sẽ xuất hiện đầu tiên)
Lọc
Truy vấn một nhóm cụ thể
https://www.googleapis.com/webfonts/v1/webfonts?family=family_name
Tất cả các họ hỗ trợ tập hợp con Hy Lạp
https://www.googleapis.com/webfonts/v1/webfonts?subset=subset_name
Lọc theo danh mục phông chữ
https://www.googleapis.com/webfonts/v1/webfonts?category=category_name
Tối ưu hoá
Để truy xuất các tệp phông chữ được nén ở định dạng woff2
https://www.googleapis.com/webfonts/v1/webfonts?capability=WOFF2
Phông chữ biến đổi
Phông chữ biến đổi cung cấp các dải kiểu liên tục. Theo mặc định, một tổ hợp các tệp phông chữ tĩnh sẽ được trả về cho các phông chữ có thể thay đổi được khởi tạo ở các vị trí tiêu chuẩn.
Nếu bạn đặt capability=VF, tệp phông chữ có thể thay đổi sẽ được trả về thay vì tệp phông chữ tĩnh cùng với siêu dữ liệu phạm vi trục có sẵn. Ví dụ:
https://www.googleapis.com/webfonts/v1/webfonts?capability=VF
Phản hồi mẫu:
{
"kind": "webfonts#webfontList",
"items": [
[...]
{
"family": "Noto Sans Display",
"variants": [
"regular",
"italic"
],
"subsets": [
"cyrillic",
"cyrillic-ext",
"greek",
"greek-ext",
"latin",
"latin-ext",
"vietnamese"
],
"version": "v20",
"lastModified": "2022-09-22",
"files": {
"regular": "http://fonts.gstatic.com/s/notosansdisplay/v20/RLplK4fy6r6tOBEJg0IAKzqdFZVZxokvfn_BDLxR.ttf",
"italic": "http://fonts.gstatic.com/s/notosansdisplay/v20/RLpjK4fy6r6tOBEJg0IAKzqdFZVZxrktdHvjCaxRgew.ttf"
},
"category": "sans-serif",
"kind": "webfonts#webfont",
"menu": "http://fonts.gstatic.com/s/notosansdisplay/v20/RLpbK4fy6r6tOBEJg0IAKzqdFZVZxpMkXJMhnB9XjO1o90LuV-PT4Doq_AKp_3cKZTCa3g.ttf",
"axes": [
{
"tag": "wdth",
"start": 62.5,
"end": 100
},
{
"tag": "wght",
"start": 100,
"end": 900
}
]
},
[...]
]
}
Thẻ
Nếu bạn đặt capability=FAMILY_TAGS, thì trường thẻ sẽ được điền sẵn tất cả thẻ liên quan đến toàn bộ designspace của họ.
ví dụ mẫu:
{
"kind": "webfonts#webfontList",
"items": [
[...]
{
"family": "Noto Sans Display",
"variants": [
"regular",
"italic"
],
"subsets": [
"cyrillic",
"cyrillic-ext",
"greek",
"greek-ext",
"latin",
"latin-ext",
"vietnamese"
],
"version": "v20",
"lastModified": "2022-09-22",
"files": {
"regular": "http://fonts.gstatic.com/s/notosansdisplay/v20/RLplK4fy6r6tOBEJg0IAKzqdFZVZxokvfn_BDLxR.ttf",
"italic": "http://fonts.gstatic.com/s/notosansdisplay/v20/RLpjK4fy6r6tOBEJg0IAKzqdFZVZxrktdHvjCaxRgew.ttf"
},
"category": "sans-serif",
"kind": "webfonts#webfont",
"menu": "http://fonts.gstatic.com/s/notosansdisplay/v20/RLpbK4fy6r6tOBEJg0IAKzqdFZVZxpMkXJMhnB9XjO1o90LuV-PT4Doq_AKp_3cKZTCa3g.ttf",
"tags": [
{
"name": "/Expressive/Business",
"weight": 58
},
{
"tag": "/Sans/Humanist",
"weight": 100,
}
]
},
[...]
]
}
Quy cách URL API
webfonts?key=<your_key>[&family=<family>][&subset=<subset>][&capability=<capability>...][&sort=<sort>]
your_key: Khoá API của nhà phát triển.
family: Tên của một bộ phông chữ.
subset: Tên của một tập hợp con phông chữ.
category: serif | sans-serif | monospace | display | handwriting
capability: VF | WOFF2.
sort: alpha | date | popularity | style | trending.