FontFace

Hàm khởi tạo

FontFace()

Tạo và trả về đối tượng FontFace mới, được xây dựng từ tài nguyên bên ngoài qua URL hoặc từ ArrayBuffer.

Thuộc tính phiên bản

FontFace.ascentOverride

Chuỗi dùng để lấy hoặc đặt chỉ số ascent của font. Tương đương với descriptor ascent-override.

FontFace.descentOverride

Chuỗi dùng để lấy hoặc đặt chỉ số descent của font. Tương đương với descriptor descent-override.

FontFace.display

Chuỗi xác định cách hiển thị font face dựa trên việc nó đã được tải về và sẵn sàng dùng chưa.

FontFace.family

Chuỗi dùng để lấy hoặc đặt họ của font. Tương đương với descriptor font-family.

FontFace.featureSettings

Chuỗi dùng để lấy hoặc đặt các tính năng font ít dùng không có sẵn từ các thuộc tính variant của font. Tương đương với thuộc tính CSS font-feature-settings.

FontFace.lineGapOverride

Chuỗi dùng để lấy hoặc đặt chỉ số line-gap của font. Tương đương với descriptor line-gap-override.

FontFace.loaded Read only

Trả về Promise resolve với đối tượng FontFace hiện tại khi font được chỉ định trong constructor xong tải, hoặc reject với SyntaxError DOMException.

FontFace.status Read only

Trả về giá trị liệt kê cho biết trạng thái của font, một trong: "unloaded", "loading", "loaded", hoặc "error".

FontFace.stretch

Chuỗi dùng để lấy hoặc đặt cách font co giãn. Tương đương với descriptor font-stretch.

FontFace.style

Chuỗi dùng để lấy hoặc đặt kiểu của font. Tương đương với descriptor font-style.

FontFace.unicodeRange

Chuỗi dùng để lấy hoặc đặt phạm vi code point unicode của font. Tương đương với descriptor unicode-range.

FontFace.variant Non-standard

Chuỗi dùng để lấy hoặc đặt biến thể của font.

FontFace.variationSettings

Chuỗi dùng để lấy hoặc đặt cài đặt biến thể của font. Tương đương với descriptor font-variation-settings.

FontFace.weight

Chuỗi chứa độ đậm của font. Tương đương với descriptor font-weight.

FontFace.load()

Tải font dựa trên yêu cầu được truyền vào constructor, bao gồm vị trí hoặc source buffer, và trả về Promise resolve với đối tượng FontFace hiện tại.

Ví dụ

Đoạn mã dưới đây định nghĩa font face dùng dữ liệu tại URL "my-font.woff" với một vài descriptor. Để minh họa, ta đặt descriptor stretch bằng thuộc tính.

// Định nghĩa FontFace
const font = new FontFace("my-font", 'url("my-font.woff")', {
  style: "italic",
  weight: "400",
});

font.stretch = "condensed";

Tiếp theo, tải font bằng FontFace.load() và dùng promise trả về để theo dõi kết quả hoặc báo lỗi.

// Tải font
font.load().then(
  () => {
    // Đã hoàn thành - thêm font vào document.fonts
  },
  (err) => {
    console.error(err);
  },
);

Để thực sự dùng font, cần thêm nó vào FontFaceSet. Có thể làm trước hoặc sau khi tải font.

Xem thêm ví dụ tại CSS Font Loading API > Ví dụ.

Thông số kỹ thuật

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

Xem thêm

• @font-face