Local Font Access API

Khái niệm và cách dùng

Web fonts đã tạo ra một bước tiến lớn trong việc cho phép kiểu chữ trên web, bằng cách cho phép nhà thiết kế web cung cấp phông chữ tùy chỉnh để dùng trong tài liệu web. Được xác định qua at-rule @font-face, một web font có thể được tải từ URL được cung cấp trong hàm url().

@font-face còn có nhiều tính năng hữu ích khác. Đặc biệt, bạn cũng có thể chỉ định tên đầy đủ hoặc tên Postscript của phông trong hàm local() để báo cho trình duyệt dùng bản sao cục bộ nếu người dùng đã cài phông đó trên máy tính của họ. Tuy nhiên, điều này không phải không có vấn đề - local() đã trở nên nổi tiếng như một vector lấy dấu vân tay.

Ngoài ra, các công cụ thiết kế cao cấp từ trước đến nay thường khó triển khai trên web, do gặp khó khăn trong việc liệt kê phông chính xác và truy cập dữ liệu phông ở mức thấp hơn, chẳng hạn để áp dụng bộ lọc và biến đổi. Các ứng dụng hiện nay thường phải dùng các giải pháp thay thế như yêu cầu người dùng tải phông của họ lên một máy chủ để xử lý nhằm lấy dữ liệu byte thô, hoặc cài một chương trình cục bộ riêng để cung cấp thêm khả năng.

Local Font Access API được tạo ra để giải quyết những vấn đề này.

Phương thức Window.queryLocalFonts() cung cấp quyền truy cập vào một mảng các phông đã cài đặt cục bộ, mỗi phông được biểu diễn bởi một thể hiện FontData. FontData có một số thuộc tính cung cấp quyền truy cập vào tên, kiểu và họ phông, đồng thời cũng có phương thức blob() cung cấp quyền truy cập vào một Blob chứa các byte thô của tệp phông nền.

Về quyền riêng tư và bảo mật:

• Local Font Access API chỉ được thiết kế để cung cấp quyền truy cập vào dữ liệu cần thiết nhằm giải quyết các vấn đề nêu trên. Trình duyệt cũng không bắt buộc phải cung cấp toàn bộ danh sách phông cục bộ sẵn có, cũng như không bắt buộc phải cung cấp dữ liệu theo cùng thứ tự như trên đĩa.
• Khi gọi Window.queryLocalFonts(), người dùng sẽ được hỏi quyền truy cập vào các phông cục bộ của họ. Trạng thái của quyền này có thể được truy vấn qua Permissions API (quyền local-fonts).
• Bạn có thể kiểm soát quyền truy cập vào tính năng này bằng một chính sách Permissions Policy local-fonts.

Giao diện

FontData

Đại diện cho một mặt phông cục bộ duy nhất.

Mở rộng cho các giao diện khác

Window.queryLocalFonts()

Trả về một Promise được hoàn tất với một mảng các đối tượng FontData đại diện cho các mặt phông có sẵn cục bộ.

Ví dụ

Để xem bản demo trực tiếp hoạt động, hãy xem demo Local Font Access API.

Phát hiện tính năng

if ("queryLocalFonts" in window) {
  // Local Font Access API được hỗ trợ
}

Liệt kê phông

Đoạn mã sau sẽ truy vấn tất cả các phông có sẵn và ghi lại siêu dữ liệu. Ví dụ này có thể được dùng để điền dữ liệu cho một điều khiển chọn phông.

async function logFontData() {
  try {
    const availableFonts = await window.queryLocalFonts();
    for (const fontData of availableFonts) {
      console.log(fontData.postscriptName);
      console.log(fontData.fullName);
      console.log(fontData.family);
      console.log(fontData.style);
    }
  } catch (err) {
    console.error(err.name, err.message);
  }
}

Truy cập dữ liệu cấp thấp

Phương thức blob() cung cấp quyền truy cập vào dữ liệu SFNT cấp thấp - đây là một định dạng tệp phông có thể chứa các định dạng phông khác, như PostScript, TrueType, OpenType hoặc Web Open Font Format (WOFF).

async function computeOutlineFormat() {
  try {
    const availableFonts = await window.queryLocalFonts({
      postscriptNames: ["ComicSansMS"],
    });
    for (const fontData of availableFonts) {
      // `blob()` trả về một Blob chứa dữ liệu phông hợp lệ và đầy đủ
      // được bao bọc theo SFNT.
      const sfnt = await fontData.blob();
      // Chỉ lấy các byte cần thiết: 4 byte đầu tiên là thông tin
      // phiên bản SFNT.
      // Đặc tả: https://learn.microsoft.com/en-us/typography/opentype/spec/otff#organization-of-an-opentype-font
      const sfntVersion = await sfnt.slice(0, 4).text();

      let outlineFormat = "UNKNOWN";
      switch (sfntVersion) {
        case "\x00\x01\x00\x00":
        case "true":
        case "typ1":
          outlineFormat = "truetype";
          break;
        case "OTTO":
          outlineFormat = "cff";
          break;
      }
      console.log("Định dạng outline:", outlineFormat);
    }
  } catch (err) {
    console.error(err.name, err.message);
  }
}

Thông số kỹ thuật

Tương thích trình duyệt

Xem thêm

• Use advanced typography with local fonts
• @font-face
• Chỉ thị local-fonts Permissions Policy