Web Fonts prednastavitev

Uporabite spletne pisave iz Google Fonts, FontShare z preprostim zagotavljanjem imen pisav.

Oglejte si vse podprte ponudnike.

Izvorna koda

Namestitev

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({ /* možnosti */ }),
  ],
})

TIP

Ta prednastavitev je vključena v paket unocss, lahko jo tudi uvozite od tam:

import { presetWebFonts } from 'unocss'

Ponudniki

Trenutno podprti ponudniki:

• none - ne naredi ničesar, obravnava pisavo kot sistemsko pisavo
• google - Google Fonts
• bunny - Privacy-Friendly Google Fonts
• fontshare - Quality Font Service by ITF

INFO

PR dobrodošli za dodajanje več ponudnikov. 🙌

Funkcija custom fetch

Uporabite svojo funkcijo za pridobivanje vira pisave.

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({
      // use axios with an 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'],
      },
    }),
  ],
})

Možnosti

provider

• Tip: WebFontsProviders
• Privzeto: google

Ponudnik storitve spletnih pisav.

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

fonts

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

Pisave. Za več podrobnosti glejte primer.

interface WebFontMeta {
  name: string
  weights?: (string | number)[]
  italic?: boolean
  /**
   * Override the provider
   * @default <matches root config>
   */
  provider?: WebFontsProviders
}

extendTheme

• Tip: boolean
• Privzeto: true

Razširi objekt teme.

themeKey

• Tip: string
• Privzeto: fontFamily

Ključ za objekt teme.

inlineImports

• Tip: boolean
• Privzeto: true

Vstavi CSS @import().

customFetch

• Tip: (url: string) => Promise<string>
• Privzeto: undefined

Uporabite svojo funkcijo za pridobivanje vira pisave. Glejte Funkcija custom fetch.

Primer

presetWebFonts({
  provider: 'google', // default provider
  fonts: {
    // these will extend the default theme
    sans: 'Roboto',
    mono: ['Fira Code', 'Fira Mono:400,700'],
    // custom ones
    lobster: 'Lobster',
    lato: [
      {
        name: 'Lato',
        weights: ['400', '700'],
        italic: true,
      },
      {
        name: 'sans-serif',
        provider: 'none',
      },
    ],
  },
})

Naslednji CSS bo samodejno generiran:

@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";
}

Lokalno streženje pisav

Privzeto bo prednastavitev prenesla pisave s CDN ponudnika. Če želite streči pisave lokalno, lahko prenesete pisave in jih strežete z lastnega strežnika z uporabo procesorja iz @unocss/preset-web-fonts/local.

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',
      },
      // This will download the fonts and serve them locally
      processors: createLocalFontProcessor({
        // Directory to cache the fonts
        cacheDir: 'node_modules/.cache/unocss/fonts',

        // Directory to save the fonts assets
        fontAssetsDir: 'public/assets/fonts',

        // Base URL to serve the fonts from the client
        fontServeBaseUrl: '/assets/fonts'
      })
    }),
  ],
})

To bo preneslo sredstva pisav v public/assets/fonts in jih strežilo iz /assets/fonts na odjemalcu. Pri tem se prepričajte, da licenca pisav omogoča ponovno distribucijo, orodje ne odgovarja za morebitne pravne težave.

INFO

Ta funkcija je specifična za Node.js in ne bo delovala v brskalniku.