Экспериментальный API шрифтов

Тип: FontFamily[]

Добавлено в: astro@5.7.0

Эта экспериментальная функция позволяет использовать шрифты из вашей файловой системы и различных провайдеров шрифтов (например, Google, Fontsource, Bunny) через унифицированный, полностью настраиваемый и типобезопасный API.

Веб-шрифты могут влиять на производительность страницы как при загрузке, так и при рендеринге. Этот API помогает поддерживать высокую производительность вашего сайта с помощью автоматической оптимизации веб-шрифтов, включая ссылки preload, оптимизированные резервные варианты (fallbacks) и продуманные настройки по умолчанию. Смотрите примеры общего использования.

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

Чтобы включить эту функцию, настройте объект experimental.fonts с как минимум одним шрифтом:

import { defineConfig, fontProviders } from "astro/config";

export default defineConfig({
    experimental: {
        fonts: [{
            provider: fontProviders.google(),
            name: "Roboto",
            cssVariable: "--font-roboto"
        }]
    }
});

Затем добавьте компонент <Font /> и стили для всего сайта в ваш <head>:

---
import { Font } from "astro:assets";
---

<Font cssVariable="--font-roboto" preload />

<style>
body {
    font-family: var(--font-roboto);
}
</style>

Использование

experimental.fonts принимает массив объектов шрифтов. Для каждого шрифта вы должны указать provider (провайдера), name (имя семейства) и определить cssVariable (CSS-переменную), чтобы ссылаться на ваш шрифт.
- provider: Вы можете выбрать из списка встроенных провайдеров или создать своего собственного пользовательского провайдера шрифтов.
- name: Выберите семейство шрифтов, поддерживаемое вашим провайдером.
- cssVariable: Должна быть валидным идентификатором (ident) в форме CSS-переменной.
Следующий пример настраивает семейство “Roboto” из Google Fonts:
astro.config.mjs
```
import { defineConfig, fontProviders } from "astro/config";

export default defineConfig({
  experimental: {
    fonts: [{
      provider: fontProviders.google(),
      name: "Roboto",
      cssVariable: "--font-roboto"
    }]
  }
});
```
Доступны дополнительные параметры конфигурации, такие как определение семейств резервных шрифтов и того, какие weights (начертания), styles (стили), subsets (подмножества) и formats (форматы) загружать, и некоторые из них будут зависеть от выбранного вами провайдера.

Смотрите полный справочник по конфигурации, чтобы узнать больше.
Примените стили с помощью компонента <Font />. Его необходимо импортировать и добавить в <head> вашей страницы. Указание cssVariable шрифта обязательно, и вы можете опционально вывести ссылки preload:
src/components/Head.astro
```
---
import { Font } from "astro:assets";
---

<Font cssVariable="--font-roboto" preload />
```
Обычно это делается в таком компоненте, как Head.astro, который используется в общем макете сайта.

Смотрите полный справочник по компоненту <Font> для получения дополнительной информации.

Поскольку компонент <Font /> генерирует CSS с объявлениями шрифтов, вы можете ссылаться на семейство шрифтов, используя cssVariable:
<style> body { font-family: var(--font-roboto); } </style>
src/styles/global.css
@import "tailwindcss"; @theme inline { --font-sans: var(--font-roboto); }
tailwind.config.mjs
/** @type {import("tailwindcss").Config} */ export default { content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"], theme: { extend: {}, fontFamily: { sans: ["var(--font-roboto)"] } }, plugins: [] };

Доступные провайдеры шрифтов

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

Чтобы использовать встроенный провайдер шрифтов, импортируйте fontProviders и настройте provider с соответствующим значением для выбранного вами провайдера шрифтов:

import { fontProviders } from "astro/config";

Adobe
Bunny
Fontshare
Fontsource
Google
Google Icons
Local

Adobe

Извлекает шрифты из Adobe:

provider: fontProviders.adobe({ id: "your-id" })

Передайте провайдеру шрифтов Adobe ID, загруженный как переменная окружения в вашем конфигурационном файле Astro.

Bunny

Извлекает шрифты из Bunny:

provider: fontProviders.bunny()

Fontshare

Извлекает шрифты из Fontshare:

provider: fontProviders.fontshare()

Fontsource

Извлекает шрифты из Fontsource:

provider: fontProviders.fontsource()

Google

Извлекает шрифты из Google:

provider: fontProviders.google()

Провайдер поставляется с опциями, специфичными для семейства.

experimental.glyphs

Тип: string[]

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

{
  // ...
  provider: fontProviders.google(),
  options: {
    experimental: {
      glyphs: ["a"]
    }
  }
}

experimental.variableAxis

Тип: Partial<Record<VariableAxis, ([string, string] | string)[]>>

Позволяет установить конфигурацию вариативной оси:

{
  // ...
  provider: fontProviders.google(),
  options: {
    experimental: {
      variableAxis: {
        slnt: [["-15", "0"]],
        CASL: [["0", "1"]],
        CRSV: ["1"],
        MONO: [["0", "1"]],
      }
    }
  }
}

Google Icons

Добавлено в: astro@5.16.9

Извлекает шрифты из Google Icons:

provider: fontProviders.googleicons()

Провайдер поставляется с опциями, специфичными для семейства.

experimental.glyphs

Тип: string[]

При разрешении новых иконок Material Symbols позволяет указать список глифов, которые будут включены в шрифт для каждого семейства шрифтов. Это может уменьшить размер файла шрифта:

{
  // ...
  provider: fontProviders.googleicons(),
  options: {
    experimental: {
      glyphs: ["a"]
    }
  }
}

Local

Добавлено в: astro@5.16.13

Извлекает шрифты с диска:

provider: fontProviders.local()

Провайдер поставляется с обязательными опциями, специфичными для семейства.

variants

Тип: LocalFontFamily["variants"]

Свойство options.variants является обязательным. Каждый вариант представляет собой объявление @font-face и требует src.

Кроме того, некоторые другие свойства могут быть указаны внутри каждого варианта.

import { defineConfig, fontProviders } from "astro/config";

export default defineConfig({
    experimental: {
        fonts: [{
            provider: fontProviders.local(),
            name: "Custom",
            cssVariable: "--font-custom",
            options: {
                variants: [
                    {
                        weight: 400,
                        style: "normal",
                        src: ["./src/assets/fonts/custom-400.woff2"]
                    },
                    {
                        weight: 700,
                        style: "normal",
                        src: ["./src/assets/fonts/custom-700.woff2"]
                    }
                    // ...
                ]
            }
        }]
    }
});

weight

Тип: number | string
По умолчанию: undefined

Вес шрифта:

weight: 200

Если связанный шрифт является вариативным шрифтом, вы можете указать диапазон весов:

weight: "100 900"

Если значение не установлено, по умолчанию Astro попытается вывести значение на основе первого source.

style

Тип: "normal" | "italic" | "oblique"
По умолчанию: undefined

Стиль шрифта:

style: "normal"

Если значение не установлено, по умолчанию Astro попытается вывести значение на основе первого source.

src

Тип: (string | URL | { url: string | URL; tech?: string })[]

Источники шрифта. Это может быть путь относительно корня, импорт пакета или URL. URL-адреса особенно полезны, если вы внедряете локальные шрифты через интеграцию:

src: ["./src/assets/fonts/MyFont.woff2", "./src/assets/fonts/MyFont.woff"]

src: [new URL("./custom.ttf", import.meta.url)]

src: ["my-package/SomeFont.ttf"]

Вы также можете указать tech, предоставив объекты:

src: [{ url:"./src/assets/fonts/MyFont.woff2", tech: "color-COLRv1" }]

Другие свойства

Следующие опции из семейств шрифтов также доступны для локальных семейств шрифтов внутри вариантов:

display
unicodeRange
stretch
featureSettings
variationSettings

import { defineConfig, fontProviders } from "astro/config";

export default defineConfig({
    experimental: {
        fonts: [{
            provider: fontProviders.local(),
            name: "Custom",
            cssVariable: "--font-custom",
            options: {
                variants: [
                    {
                        weight: 400,
                        style: "normal",
                        src: ["./src/assets/fonts/custom-400.woff2"],
                        display: "block"
                    }
                ]
            }
        }]
    }
});

Примеры использования

import { defineConfig, fontProviders } from "astro/config";

export default defineConfig({
  experimental: {
    fonts: [
      {
        name: "Roboto",
        cssVariable: "--font-roboto",
        provider: fontProviders.google(),
        // По умолчанию включено:
        // weights: [400] ,
        // styles: ["normal", "italics"],
        // subsets: ["latin"],
        // fallbacks: ["sans-serif"],
        // formats: ["woff2"],
      },
      {
        name: "Inter",
        cssVariable: "--font-inter",
        provider: fontProviders.fontsource(),
        // Укажите веса, которые действительно используются
        weights: [400, 500, 600, 700],
        // Укажите стили, которые действительно используются
        styles: ["normal"],
        // Загружайте только файлы шрифтов для символов, используемых на странице
        subsets: ["latin", "cyrillic"],
        // Загружайте больше форматов шрифтов
        formats: ["woff2", "woff"],
      },
      {
        name: "JetBrains Mono",
        cssVariable: "--font-jetbrains-mono",
        provider: fontProviders.fontsource(),
        // Загружайте только файлы шрифтов для символов, используемых на странице
        subsets: ["latin", "latin-ext"],
        // Используйте резервное семейство шрифтов, соответствующее предполагаемому внешнему виду
        fallbacks: ["monospace"],
      },
      {
        name: "Poppins",
        cssVariable: "--font-poppins",
        provider: fontProviders.local(),
        options: {
          // Вес и стиль не указаны, поэтому Astro
          // попытается вывести их для каждого варианта
          variants: [
            {
              src: [
                "./src/assets/fonts/Poppins-regular.woff2",
                "./src/assets/fonts/Poppins-regular.woff",
              ]
            },
            {
              src: [
                "./src/assets/fonts/Poppins-bold.woff2",
                "./src/assets/fonts/Poppins-bold.woff",
              ]
            },
          ]
        }
      }
    ],
  }
});

Справочник компонента `<Font />`

Этот компонент выводит теги стилей и может опционально выводить ссылки preload для заданного семейства шрифтов.

Его необходимо импортировать и добавить в <head> вашей страницы. Обычно это делается в компоненте, таком как Head.astro, который используется в общем макете сайта для глобального использования, но может быть добавлен на отдельные страницы по мере необходимости.

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

cssVariable

Пример типа: "--font-roboto" | "--font-comic-sans" | ...

cssVariable, зарегистрированная в вашей конфигурации Astro:

---
import { Font } from "astro:assets";
---

<Font cssVariable="--font-roboto" />

preload

Тип: boolean | { weight?: string | number; style?: string; subset?: string }[]
По умолчанию: false

Выводить ли ссылки preload или нет:

---
import { Font } from "astro:assets";
---

<Font cssVariable="--font-roboto" preload />

С директивой preload браузер немедленно начнет загрузку всех возможных ссылок на шрифты во время загрузки страницы.

Гранулированная предварительная загрузка

Добавлено в: astro@5.15.0

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

Чтобы выборочно управлять тем, какие файлы шрифтов предварительно загружаются, вы можете предоставить массив объектов, описывающих любую комбинацию weight (веса), style (стиля) или subset (подмножества) шрифта для предварительной загрузки.

Следующий пример будет предварительно загружать только файлы шрифтов с весом 400 или стилем normal в подмножестве latin:

---
import { Font } from "astro:assets";
---

<Font
  cssVariable="--font-roboto"
  preload={[
    { subset: "latin", style: "normal" },
    { weight: "400" },
  ]}
/>

Файлы шрифтов с переменным весом будут предварительно загружены, если запрашивается любой вес в пределах его диапазона. Например, файл шрифта для веса шрифта 100 900 будет включен, когда 400 указано в объекте preload.

Программный доступ к данным шрифтов

Объект fontData позволяет программно извлекать данные о семействе шрифтов более низкого уровня. Например, вы можете использовать его в маршруте API для создания изображений OpenGraph с помощью satori в сочетании с правильной конфигурацией форматов:

import type{ APIRoute } from "astro"
import { fontData } from "astro:assets"
import satori from "satori"

export const GET: APIRoute = (context) => {
  const data = fontData["--font-roboto"]

  const svg = await satori(
    <div style={{ color: "black" }}>hello, world</div>,
    {
      width: 600,
      height: 400,
      fonts: [
        {
          name: "Roboto",
          data: await fetch(new URL(data[0].src[0].url, context.url.origin)).then(res => res.arrayBuffer()),
          weight: 400,
          style: "normal",
        },
      ],
    },
  )

  // ...
}

`fontData`

Тип: Record<CssVariable, Array<FontData>>

Добавлено в: astro@5.16.12

Объект, в котором каждый ключ является cssVariable, а значение — массивом, описывающим связанные шрифты. Каждый шрифт представляет собой объект, содержащий массив src, доступных для этого шрифта, и следующие необязательные свойства: weight и style.

Справочник по конфигурации шрифтов

Все свойства ваших шрифтов должны быть настроены в конфигурации Astro. Установите их, чтобы настроить данные, загружаемые от вашего провайдера шрифтов, например, чтобы загружать только определенные веса или стили шрифтов. Для большего контроля доступна более гранулированная конфигурация.

Каждый провайдер отвечает за обработку этих опций, поэтому доступность и поддержка следующих свойств может различаться.

provider, name и cssVariable являются обязательными.

provider

Тип: FontProvider

Источник ваших файлов шрифтов. Вы можете использовать встроенного провайдера или написать своего собственного пользовательского провайдера:

import { defineConfig, fontProviders } from "astro/config";

export default defineConfig({
  experimental: {
    fonts: [{
      provider: fontProviders.google(),
      name: "Roboto",
      cssVariable: "--font-roboto"
    }]
  }
});

name

Тип: string

Имя семейства шрифтов, идентифицируемое вашим провайдером шрифтов:

name: "Roboto"

cssVariable

Тип: string

Валидный идентификатор (ident) по вашему выбору в форме переменной CSS (т.е. начинающийся с --):

cssVariable: "--font-roboto"

fallbacks

Тип: string[]
По умолчанию: ["sans-serif"]

Массив шрифтов, которые будут использоваться, когда выбранный вами шрифт недоступен или загружается. Резервные шрифты будут выбираться в указанном порядке. Будет использован первый доступный шрифт:

fallbacks: ["CustomFont", "serif"]

Чтобы полностью отключить резервные шрифты, настройте пустой массив:

fallbacks: []

Укажите по крайней мере общее имя семейства, соответствующее предполагаемому внешнему виду вашего шрифта. Затем Astro попытается сгенерировать оптимизированные резервные варианты, используя метрики шрифта. Чтобы отключить эту оптимизацию, установите optimizedFallbacks в false.

optimizedFallbacks

Тип: boolean
По умолчанию: true

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

optimizedFallbacks: false

weights

Тип: (number | string)[]
По умолчанию: [400]

Массив весов шрифтов. Если в вашей конфигурации не указано значение, по умолчанию включается только вес 400, чтобы предотвратить ненужные загрузки. Вам нужно будет включить это свойство, чтобы получить доступ к любым другим весам шрифтов:

weights: [200, "400", "bold"]

Если связанный шрифт является вариативным шрифтом, вы можете указать диапазон весов:

weights: ["100 900"]

styles

Тип: ("normal" | "italic" | "oblique")[]
По умолчанию: ["normal", "italic"]

Массив стилей шрифтов:

styles: ["normal", "oblique"]

subsets

Тип: string[]
По умолчанию: ["latin"]

Определяет список подмножеств шрифтов для предварительной загрузки.

subsets: ["latin"]

formats

Тип: ("woff2" | "woff" | "otf" | "ttf" | "eot")[]
По умолчанию: ["woff2"]

Добавлено в: astro@5.16.7

Массив форматов шрифтов:

formats: ["woff2", "woff"]

options

Тип: Record<string, any>

Добавлено в: astro@5.16.12

Объект для передачи опций, специфичных для провайдера. Он типизируется автоматически на основе провайдера семейства шрифтов:

options: {
  experimental: {
    glyphs: ["a"]
  }
}

display

Тип: "auto" | "block" | "swap" | "fallback" | "optional"
По умолчанию: "swap"

Определяет, как отображается шрифт, в зависимости от того, когда он загружен и готов к использованию:

display: "block"

unicodeRange

Тип: string[]
По умолчанию: undefined

Определяет, когда шрифт должен быть загружен и использован, на основе определенного диапазона символов unicode. Если символ на странице соответствует настроенному диапазону, браузер загрузит шрифт, и все символы будут доступны для использования на странице. Чтобы настроить подмножество символов, предварительно загружаемых для одного шрифта, смотрите свойство subsets.

Это может быть полезно для локализации, чтобы избежать ненужных загрузок шрифтов, когда определенная часть вашего веб-сайта использует другой алфавит и будет отображаться с отдельным шрифтом. Например, веб-сайт, который предлагает английскую и японскую версии, может предотвратить загрузку браузером японского шрифта на английских версиях страницы, которые не содержат никаких японских символов, указанных в unicodeRange.

unicodeRange: ["U+26"]

stretch

Тип: string
По умолчанию: undefined

Растяжение шрифта:

stretch: "condensed"

featureSettings

Тип: string
По умолчанию: undefined

Управляет типографскими возможностями шрифта (например, лигатуры, малые заглавные (small caps) или росчерки (swashes)):

featureSettings: "'smcp' 2"

variationSettings

Тип: string
По умолчанию: undefined

Настройки вариации шрифта:

variationSettings: "'xhgt' 0.7"

Гранулированная конфигурация шрифтов

Добавлено в: astro@5.15.6

Семейство шрифтов определяется комбинацией свойств, таких как веса и стили (например, weights: [500, 600] и styles: ["normal", "bold"]), но вы можете захотеть загрузить только определенные комбинации этих свойств.

Для большего контроля над тем, какие файлы шрифтов загружаются, вы можете указать один и тот же шрифт (т.е. с теми же свойствами cssVariable, name и provider) несколько раз с разными комбинациями. Astro объединит результаты и загрузит только необходимые файлы. Например, можно загрузить нормальный 500 и 600, загружая только курсив 500:

import { defineConfig, fontProviders } from "astro/config"

export default defineConfig({
  experimental: {
    fonts: [
      {
        name: "Roboto",
        cssVariable: "--roboto",
        provider: fontProviders.google(),
        weights: [500, 600],
        styles: ["normal"]
      },
      {
        name: "Roboto",
        cssVariable: "--roboto",
        provider: fontProviders.google(),
        weights: [500],
        styles: ["italic"]
      }
    ]
  }
})

Создание собственного провайдера шрифтов

Если вы не хотите использовать один из встроенных провайдеров (например, вы хотите использовать стороннего провайдера unifont или создать что-то для частного реестра), вы можете создать своего собственного.

Предпочтительный метод реализации пользовательского провайдера шрифтов — экспортировать функцию, которая возвращает объект FontProvider и принимает конфигурацию в качестве параметра.

Объект провайдера шрифтов

Экспериментальный API шрифтов позволяет вам получать доступ к шрифтам унифицированным способом. Каждое семейство требует использования провайдера шрифтов Astro для извлечения начертаний шрифтов.

FontProvider — это объект, содержащий обязательные свойства name и resolveFont(). Он также имеет необязательные доступные свойства config, init() и listFonts().

Тип FontProvider принимает дженерик для опций семейства.

`name`

Тип: string

Уникальное имя для провайдера, используемое в логах и для идентификации.

`resolveFont()`

Тип: (options: ResolveFontOptions) => Awaitable<{ fonts: FontFaceData[] } | undefined>

Используется для извлечения и возврата данных о начертании шрифта на основе заданных опций.

`config`

Тип: Record<string, any>
По умолчанию: undefined

Сериализуемый объект, используемый для идентификации.

`init()`

Тип: (context: FontProviderInitContext) => Awaitable<void>
По умолчанию: undefined

Необязательный колбэк, используемый для выполнения любой логики инициализации.

`context.storage`

Тип: Storage

Полезно для кэширования

`context.root`

Тип: URL

Корень проекта, полезен для разрешения путей локальных файлов.

`listFonts()`

Тип: () => Awaitable<string[] | undefined>
По умолчанию: undefined

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

Поддержка частного реестра

Следующий пример определяет провайдера шрифтов для частного реестра:

import type { FontProvider } from "astro";
import { retrieveFonts, type Fonts } from "./utils.js",

export function registryFontProvider(): FontProvider {
  let data: Fonts = {}

  return {
    name: "registry",
    init: async () => {
      data = await retrieveFonts(token);
    },
    listFonts: () => {
      return Object.keys(data);
    },
    resolveFont: ({ familyName, ...rest }) => {
      const fonts = data[familyName];
      if (fonts) {
        return { fonts };
      }
      return undefined;
    },
  };
}

import type { FontProvider } from "astro";
import { retrieveFonts, type Fonts } from "./utils.js",

interface Config {
  token: string;
}

export function registryFontProvider(config: Config): FontProvider {
  let data: Fonts = {}

  return {
    name: "registry",
    config,
    init: async () => {
      data = await retrieveFonts(token);
    },
    listFonts: () => {
      return Object.keys(data);
    },
    resolveFont: ({ familyName, ...rest }) => {
      const fonts = data[familyName];
      if (fonts) {
        return { fonts };
      }
      return undefined;
    },
  };
}

import type { FontProvider } from "astro";
import { retrieveFonts, type Fonts } from "./utils.js",

interface FamilyOptions {
  minimal?: boolean;
}

export function registryFontProvider(): FontProvider<FamilyOptions | undefined> {
  let data: Fonts = {}

  return {
    name: "registry",
    init: async () => {
      data = await retrieveFonts(token);
    },
    listFonts: () => {
      return Object.keys(data);
    },
    // options типизировано как FamilyOptions | undefined
    resolveFont: ({ familyName, options, ...rest }) => {
      const fonts = data[familyName];
      if (fonts) {
        return { fonts };
      }
      return undefined;
    },
  };
}

Затем вы можете зарегистрировать этого провайдера шрифтов в конфигурации Astro:

import { defineConfig } from "astro/config";
import { registryFontProvider } from "./font-provider";

export default defineConfig({
    experimental: {
        fonts: [{
            provider: registryFontProvider(),
            name: "Custom",
            cssVariable: "--font-custom"
        }]
    }
});

import { defineConfig } from "astro/config";
import { registryFontProvider } from "./font-provider";

export default defineConfig({
    experimental: {
        fonts: [{
            provider: registryFontProvider({
              token: "..."
            }),
            name: "Custom",
            cssVariable: "--font-custom"
        }]
    }
});

import { defineConfig } from "astro/config";
import { registryFontProvider } from "./font-provider";

export default defineConfig({
    experimental: {
        fonts: [{
            provider: registryFontProvider(),
            options: {
              minimal: true
            },
            name: "Custom",
            cssVariable: "--font-custom"
        }]
    }
});

Поддержка стороннего провайдера unifont

Вы можете определить провайдера шрифтов Astro, используя провайдера unifont «под капотом»:

import type { FontProvider } from "astro";
import type { InitializedProvider } from "unifont";
import { acmeProvider } from "@acme/unifont-provider"

export function acmeFontProvider(): FontProvider {
  const provider = acmeProvider();
  let initializedProvider: InitializedProvider | undefined;
  return {
    name: provider._name,
    async init(context) {
      initializedProvider = await provider(context);
    },
    async resolveFont({ familyName, ...rest }) {
      return await initializedProvider?.resolveFont(familyName, rest);
    },
    async listFonts() {
      return await initializedProvider?.listFonts?.();
    },
  };
}

import type { FontProvider } from "astro";
import type { InitializedProvider } from "unifont";
import { acmeProvider, type AcmeOptions } from "@acme/unifont-provider"

export function acmeFontProvider(config?: AcmeOptions): FontProvider {
  const provider = acmeProvider(config);
  let initializedProvider: InitializedProvider | undefined;
  return {
    name: provider._name,
    config,
    async init(context) {
      initializedProvider = await provider(context);
    },
    async resolveFont({ familyName, ...rest }) {
      return await initializedProvider?.resolveFont(familyName, rest);
    },
    async listFonts() {
      return await initializedProvider?.listFonts?.();
    },
  };
}

import type { FontProvider } from "astro";
import type { InitializedProvider } from "unifont";
import { acmeProvider, type AcmeFamilyOptions } from "@acme/unifont-provider"

export function acmeFontProvider(): FontProvider<AcmeFamilyOptions | undefined> {
  const provider = acmeProvider();
  let initializedProvider: InitializedProvider<AcmeFamilyOptions> | undefined;
  return {
    name: provider._name,
    async init(context) {
      initializedProvider = await provider(context);
    },
    async resolveFont({ familyName, ...rest }) {
      return await initializedProvider?.resolveFont(familyName, rest);
    },
    async listFonts() {
      return await initializedProvider?.listFonts?.();
    },
  };
}

Затем вы можете зарегистрировать этого провайдера шрифтов в конфигурации Astro:

import { defineConfig } from "astro/config";
import { acmeFontProvider } from "./font-provider";

export default defineConfig({
    experimental: {
        fonts: [{
            provider: acmeFontProvider(),
            name: "Custom",
            cssVariable: "--font-custom"
        }]
    }
});

import { defineConfig } from "astro/config";
import { acmeFontProvider } from "./font-provider";

export default defineConfig({
    experimental: {
        fonts: [{
            provider: acmeFontProvider({
              token: "..."
            }),
            name: "Custom",
            cssVariable: "--font-custom"
        }]
    }
});

import { defineConfig } from "astro/config";
import { acmeFontProvider } from "./font-provider";

export default defineConfig({
    experimental: {
        fonts: [{
            provider: acmeFontProvider(),
            options: {
              minimal: true
            },
            name: "Custom",
            cssVariable: "--font-custom"
        }]
    }
});

Кэширование

Реализация кэширования API шрифтов была разработана так, чтобы быть практичной в разработке и эффективной в продакшене. Во время сборок файлы шрифтов копируются в выходную директорию _astro/fonts, поэтому они могут извлечь выгоду из HTTP-кэширования статических ресурсов (обычно год).

Чтобы очистить кэш в разработке, удалите директорию .astro/fonts. Чтобы очистить кэш сборки, удалите директорию node_modules/.astro/fonts.

Дополнительное чтение

Для получения полной информации и обратной связи по этому экспериментальному API смотрите RFC по шрифтам.

Экспериментальный API шрифтов

Использование

Доступные провайдеры шрифтов

Adobe

Bunny

Fontshare

Fontsource

Google

experimental.glyphs

experimental.variableAxis

Google Icons

experimental.glyphs

Local

variants

weight

style

src

Другие свойства

Примеры использования

Справочник компонента <Font />

cssVariable

preload

Гранулированная предварительная загрузка

Программный доступ к данным шрифтов

fontData

Справочник по конфигурации шрифтов

provider

name

cssVariable

fallbacks

optimizedFallbacks

weights

styles

subsets

formats

options

display

unicodeRange

stretch

featureSettings

variationSettings

Гранулированная конфигурация шрифтов

Создание собственного провайдера шрифтов

Объект провайдера шрифтов

name

resolveFont()

config

init()

context.storage

context.root

listFonts()

Поддержка частного реестра

Поддержка стороннего провайдера unifont

Кэширование

Дополнительное чтение

Справочник компонента `<Font />`

`fontData`

`name`

`resolveFont()`

`config`

`init()`

`context.storage`

`context.root`

`listFonts()`