Web Fonts Preset

Verwenden Sie Web-Fonts von Google Fonts, FontShare, indem Sie einfach die Schriftnamen angeben.

Siehe alle unterstützten Anbieter.

Quellcode

Installation

pnpm

pnpm add -D @unocss/preset-web-fonts

yarn

yarn add -D @unocss/preset-web-fonts

npm

npm install -D @unocss/preset-web-fonts

bun

bun add -D @unocss/preset-web-fonts

import presetWebFonts from '@unocss/preset-web-fonts'
import presetWind3 from '@unocss/preset-wind3'
import { defineConfig } from 'unocss'

export default defineConfig({
  presets: [
    presetWind3(),
    presetWebFonts({ /* Optionen */ }),
  ],
})

TIP

Dieses Preset ist im unocss Paket enthalten, Sie können es auch von dort importieren:

import { presetWebFonts } from 'unocss'

Anbieter

Derzeit unterstützte Anbieter:

• none - nichts tun, behandeln Sie die Schrift als Systemschrift
• google - Google Fonts
• bunny - Datenschutzfreundliche Google Fonts
• fontshare - Qualitätsschriftdienst von ITF

INFO

PR willkommen, um weitere Anbieter hinzuzufügen. 🙌

Benutzerdefinierte Fetch-Funktion

Verwenden Sie Ihre eigene Funktion, um die Schriftquelle abzurufen.

import presetWebFonts from '@unocss/preset-web-fonts'
import presetWind3 from '@unocss/preset-wind3'
import axios from 'axios'
import ProxyAgent from 'proxy-agent'
import { defineConfig } from 'unocss'

export default defineConfig({
  presets: [
    presetWind3(),
    presetWebFonts({
      // verwenden Sie axios mit einem https-Proxy
      customFetch: (url: string) => axios.get(url, { httpsAgent: new ProxyAgent('https://localhost:7890') }).then(it => it.data),
      provider: 'google',
      fonts: {
        sans: 'Roboto',
        mono: ['Fira Code', 'Fira Mono:400,700'],
      },
    }),
  ],
})

Optionen

provider

• Typ: WebFontsProviders
• Standard: google

Anbieterdienst der Web-Fonts.

type WebFontsProviders = 'google' | 'bunny' | 'fontshare' | 'none'

fonts

• Typ: Record<string, WebFontMeta | string | (WebFontMeta | string)[]>

Die Schriften. Siehe Beispiel für weitere Details.

interface WebFontMeta {
  name: string
  weights?: (string | number)[]
  italic?: boolean
  /**
   * Überschreibt den Anbieter
   * @default <entspricht Root-Konfiguration>
   */
  provider?: WebFontsProviders
}

extendTheme

• Typ: boolean
• Standard: true

Erweitert das Theme-Objekt.

themeKey

• Typ: string
• Standard: fontFamily

Schlüssel für das Theme-Objekt.

inlineImports

• Typ: boolean
• Standard: true

CSS @import() inline einfügen.

customFetch

• Typ: (url: string) => Promise<string>
• Standard: undefined

Verwenden Sie Ihre eigene Funktion, um die Schriftquelle abzurufen. Siehe Benutzerdefinierte Fetch-Funktion.

Beispiel

presetWebFonts({
  provider: 'google', // Standard-Anbieter
  fonts: {
    // diese erweitern das Standard-Theme
    sans: 'Roboto',
    mono: ['Fira Code', 'Fira Mono:400,700'],
    // benutzerdefinierte
    lobster: 'Lobster',
    lato: [
      {
        name: 'Lato',
        weights: ['400', '700'],
        italic: true,
      },
      {
        name: 'sans-serif',
        provider: 'none',
      },
    ],
  },
})

Das folgende CSS wird automatisch generiert:

@import url('https://fonts.googleapis.com/css2?family=Roboto&family=Fira+Code&family=Fira+Mono:wght@400;700&family=Lobster&family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/* layer: default */
.font-lato {
  font-family: "Lato", sans-serif;
}
.font-lobster {
  font-family: "Lobster";
}
.font-mono {
  font-family: "Fira Code", "Fira Mono", ui-monospace, SFMono-Regular, Menlo,
    Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.font-sans {
  font-family: "Roboto", ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
    "Noto Color Emoji";
}

Schriften lokal bereitstellen

Standardmäßig ruft das Preset die Schriften vom CDN des Anbieters ab. Wenn Sie die Schriften lokal bereitstellen möchten, können Sie die Schriften herunterladen und von Ihrem eigenen Server bereitstellen, indem Sie den Prozessor von @unocss/preset-web-fonts/local verwenden.

import presetWebFonts from '@unocss/preset-web-fonts'
import { createLocalFontProcessor } from '@unocss/preset-web-fonts/local'
import { defineConfig } from 'unocss'

export default defineConfig({
  presets: [
    presetWebFonts({
      provider: 'none',
      fonts: {
        sans: 'Roboto',
        mono: 'Fira Code',
      },
      // Dies lädt die Schriften herunter und stellt sie lokal bereit
      processors: createLocalFontProcessor({
        // Verzeichnis zum Zwischenspeichern der Schriften
        cacheDir: 'node_modules/.cache/unocss/fonts',

        // Verzeichnis zum Speichern der Schrift-Assets
        fontAssetsDir: 'public/assets/fonts',

        // Basis-URL zum Bereitstellen der Schriften vom Client
        fontServeBaseUrl: '/assets/fonts'
      })
    }),
  ],
})

Dies lädt die Schrift-Assets nach public/assets/fonts herunter und stellt sie von /assets/fonts auf dem Client bereit. Wenn Sie dies tun, stellen Sie bitte sicher, dass die Lizenz der Schriften es Ihnen erlaubt, sie weiterzuverteilen. Das Tool ist nicht für rechtliche Probleme verantwortlich.

INFO

Diese Funktion ist Node.js-spezifisch und funktioniert nicht im Browser.