API доступа к локальным шрифтам

API доступа к локальным шрифтам предоставляет механизм для доступа к данным локально установленных шрифтов пользователя — это включает в себя подробности высокого уровня, такие как имена, стили и наборы, а также исходные байты файлов шрифтов.

Веб-шрифты произвели революцию в области типографики в сети, позволяя веб-дизайнерам предоставлять пользовательские шрифты для использования на веб-документе. Указанные с помощью правила @font-face, веб-шрифт может загружаться из URL, указанного в функции url().

@font-face имеет несколько других полезных функций. В частности, вы также можете указать полное или PostScript имя шрифта внутри функции local(), чтобы сообщить браузеру использовать локальную копию, если пользователь установил шрифт на своем компьютере. Это не лишено проблем — local() стало известным как вектор отпечатков пальцев.

Кроме того, инструменты высококачественного дизайна исторически сложно реализовать в веб-среде из-за трудностей с точным перечислением шрифтов и доступом к данным шрифтов низкого уровня (например, для применения фильтров и преобразований). Современные приложения часто полагаются на обходные пути, такие как просьба пользователям загрузить свои шрифты на сервер, где они обрабатываются для получения исходных данных в байтовом формате, или установку отдельной локальной программы для предоставления дополнительных возможностей.

API доступа к локальным шрифтам был создан для решения этих проблем.

Метод Window.queryLocalFonts() предоставляет доступ к массиву локально установленных шрифтов, каждый из которых представлен объектом FontData. Объект FontData имеет несколько свойств, предоставляющих доступ к именам, стилям и наборам, а также метод blob(), предоставляющий доступ к Blob, содержащему исходные байты файла шрифта.

С точки зрения конфиденциальности и безопасности:

• API доступа к локальным шрифтам предназначен для предоставления только доступа к данным, необходимым для решения вышеперечисленных проблем. Также нет требования, чтобы браузеры предоставляли полный список доступных локальных шрифтов или предоставляли данные в том же порядке, в котором они появляются на диске.
• При вызове Window.queryLocalFonts() пользователя просят предоставить разрешение на доступ к локальным шрифтам. Статус этого разрешения можно запросить с помощью API разрешений (разрешение local-fonts).
• Вы можете контролировать доступ к этой функции, используя local-fonts Политику разрешений.

FontData

Представляет отдельный локальный шрифт.

Window.queryLocalFonts()

Возвращает Promise, который завершается массивом объектов FontData, представляющих доступные локально шрифты.

Для демонстрации работы в реальном времени см. Демонстрацию выбора шрифтов.

Следующий фрагмент кода запросит все доступные шрифты и выведет метаданные. Это может использоваться, например, для заполнения элемента выбора шрифтов.

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);
  }
}

Метод blob() предоставляет доступ к данным низкого уровня SFNT — это формат файла шрифта, который может содержать другие форматы шрифтов, такие как PostScript, TrueType, OpenType или Web Open Font Format (WOFF).

async function computeOutlineFormat() {
  try {
    const availableFonts = await window.queryLocalFonts({
      postscriptNames: ["ComicSansMS"],
    });
    for (const fontData of availableFonts) {
      // `blob()` returns a Blob containing valid and complete
      // SFNT-wrapped font data.
      const sfnt = await fontData.blob();
      // Slice out only the bytes we need: the first 4 bytes are the SFNT
      // version info.
      // Spec: 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("Outline format:", outlineFormat);
    }
  } catch (err) {
    console.error(err.name, err.message);
  }
}

• Используйте расширенную типографику с локальными шрифтами
• @font-face
• Директива local-fonts Политики разрешений