FontFace: phương thức load()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Note: This feature is available in Web Workers.

Phương thức load() của giao diện FontFace yêu cầu và tải font có source được chỉ định dưới dạng URL. Phương thức trả về Promise resolve với đối tượng FontFace hiện tại.

Nếu source của font face được chỉ định dưới dạng dữ liệu nhị phân, hoặc thuộc tính status không phải là unloaded, phương thức này không làm gì.

Cú pháp

load()

NetworkError DOMException: Cho biết việc tải font đã thất bại.

Ví dụ

Ví dụ đơn giản này tải font và dùng nó để hiển thị văn bản trong canvas (với id là js-canvas).

<canvas id="js-canvas"></canvas>

const canvas = document.getElementById("js-canvas");

// tải font "Bitter" từ Google Fonts
const fontFile = new FontFace(
  "FontFamily Style Bitter",
  'url("https://fonts.gstatic.com/s/bitter/v7/HEpP8tJXlWaYHimsnXgfCOvvDin1pK8aKteLpeZ5c0A.woff2")',
);
document.fonts.add(fontFile);

fontFile.load().then(
  () => {
    // font đã tải thành công!
    canvas.width = 650;
    canvas.height = 100;
    const ctx = canvas.getContext("2d");

    ctx.font = '36px "FontFamily Style Bitter"';
    ctx.fillText("Bitter font loaded", 20, 50);
  },
  (err) => {
    console.error(err);
  },
);