API cho nhà phát triển

API Nhà phát triển cấp quyền truy cập vào siêu dữ liệu cho tất cả các gia đình do Google Fonts phân phát. API này cho phép các ứng dụng truy vấn Google Fonts cho các bộ phông chữ có sẵn. API REST cung cấp dữ liệu ở định dạng JSON bao gồm các kiểu và tập lệnh (được gọi là tập hợp con trong Google Fonts) trong mỗi nhóm. API có thể sắp xếp danh sách các họ theo thứ tự bảng chữ cái, theo ngày được thêm vào, theo số kiểu, theo xu hướng hoặc theo mức độ phổ biến.

Đối tượng người xem

Tài liệu này là dành cho các nhà phát triển web và ứng dụng. Để sử dụng API Nhà phát triển, bạn cần có kiến thức về JavaScript.

Một ví dụ nhanh

Để truy xuất danh sách động của các phông chữ 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 trước Google

Ứng dụng của bạn cần tự xác định mỗi khi gửi yêu cầu đến API Nhà phát triển Google Fonts, bằng cách thêm khoá API vào mỗi yêu cầu.

Nhận và sử dụng khoá API

Mua khoá

Hoặc tạo một mã trong trang Thông tin xác thực.

Sau khi bạn 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ả các URL yêu cầu.

Khoá API an toàn để nhúng trong URL; không cần phương thức mã hoá.

Thông tin chi tiết

Phản hồi JSON (tham khảo mẫu ở trên) bao gồm một mảng có tên là "items" chứa các đối tượng chứa thông tin về từng bộ phông chữ.

Đối tượng gia đình bao gồm các trường sau:

  • loại: Loại đối tượng, đối tượng phông chữ web
  • gia đình: Tên gia đình
  • tập hợp con: Danh sách các tập lệnh được nhóm hỗ trợ
  • trình đơn: URL tới tập hợp con gia đình chỉ bao gồm tên của gia đình.
  • biến thể: Các kiểu khác nhau dành cho gia đình
  • phiên bản: Phiên bản bộ phông chữ.
  • trục: Phạm vi trục, Chỉ trình bày theo yêu cầu(xem bên dưới) đối với nhiều phông chữ.
  • lastModified: Ngày (định dạng "yyyy-MM-dd") mà bộ phông chữ được sửa đổi lần cuối.
  • tệp: Các tệp bộ phông chữ (với tất cả tập lệnh được hỗ trợ) cho mỗi biến thể hiện có.

Bằng cách kết hợp thông tin cho từng nhóm, bạn có thể dễ dàng tạo yêu cầu API Fonts. Chẳng hạn, giả sử chúng ta có tham chiếu đến đối tượng gia đình cho Pro ẩn danh:

[...]

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ề không theo thứ tự cụ thể nào. 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ể có là:

  • alpha: Sắp xếp danh sách theo thứ tự bảng chữ cái
  • ngày: Sắp xếp danh sách theo ngày thêm (phông chữ gần đây nhất được thêm hoặc cập nhật trước)
  • mức độ phổ biến: Sắp xếp danh sách theo mức độ phổ biến (phổ biến nhất gia đình trước tiên)
  • style: Sắp xếp danh sách theo số kiểu có sẵn (ưu tiên gia đình có nhiều kiểu nhất)
  • thịnh hành: Sắp xếp danh sách theo gia đình thấy mức sử dụng tăng (gia đình có mức tăng trưởng cao nhất trước tiên)

Lọc

Truy vấn một nhóm gia đình cụ thể

https://www.googleapis.com/webfonts/v1/webfonts?family=family_name

Tất cả những gia đình có hỗ trợ tiếng Hy Lạp

https://www.googleapis.com/webfonts/v1/webfonts?subset=subset_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

Nhiều kiểu phông chữ biến đổi theo nhiều kiểu khác nhau. Theo mặc định, hệ thống sẽ trả về tổ hợp các tệp phông chữ tĩnh cho các phông chữ biến thể được tạo bản sao ở các vị trí chuẩn. Nếu bạn đặt capability=VF, thì tệp phông chữ biến sẽ được trả về thay vì tệp tĩnh cùng với siêu dữ liệu về phạm vi trục có sẵn. Ví dụ mẫu:

https://www.googleapis.com/webfonts/v1/webfonts?capability=VF

Câu trả lờ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
      }
    ]
  },
  [...]
 ]
}

Quy cách URL của API

webfonts?key=<your_key>[&family=<family>][&subset=<subset>][&capability=<capability>...][&sort=<sort>]

your_key: Khoá API dành cho nhà phát triển của bạn.

family: Tên bộ phông chữ.

subset: Tên của một tập hợp con phông chữ.

capability: VF | WOFF2.

sort: alpha | date | popularity | style | trending.