إعداد خطوط الويب المسبق

استخدم خطوط الويب من Google Fonts و FontShare ببساطة عن طريق توفير أسماء الخطوط.

راجع جميع المزودين المدعومين.

الكود المصدري

التثبيت

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

TIP

يتم تضمين هذا الإعداد المسبق في حزمة unocss، يمكنك أيضاً استيراده من هناك:

import { presetWebFonts } from 'unocss'

المزودون

المزودون المدعومون حالياً:

• none - لا تفعل شيئاً، عالج الخط كخط نظام
• google - Google Fonts
• bunny - Google Fonts الصديق للخصوصية
• fontshare - خدمة الخطوط عالية الجودة من ITF

INFO

مرحب بـ PR لإضافة المزيد من المزودين. 🙌

دالة الجلب المخصصة

استخدم دالتك الخاصة لجلب مصدر الخط.

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'],
      },
    }),
  ],
})

الخيارات

provider

• النوع: WebFontsProviders
• افتراضي: google

خدمة مزود خطوط الويب.

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

fonts

• النوع: Record<string, WebFontMeta | string | (WebFontMeta | string)[]>

الخطوط. راجع المثال لمزيد من التفاصيل.

interface WebFontMeta {
  name: string
  weights?: (string | number)[]
  italic?: boolean
  /**
   * تجاوز المزود
   * @default <يطابق التكوين الجذري>
   */
  provider?: WebFontsProviders
}

extendTheme

• النوع: boolean
• افتراضي: true

توسيع كائن السمة.

themeKey

• النوع: string
• افتراضي: fontFamily

مفتاح كائن السمة.

inlineImports

• النوع: boolean
• افتراضي: true

تضمين CSS @import().

customFetch

• النوع: (url: string) => Promise<string>
• افتراضي: undefined

استخدم دالتك الخاصة لجلب مصدر الخط. راجع دالة الجلب المخصصة.

مثال

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',
      },
    ],
  },
})

سيتم إنشاء CSS التالي تلقائياً:

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

تقديم الخطوط محلياً

افتراضياً سيجلب الإعداد المسبق الخطوط من CDN الخاص بالمزود. إذا كنت تريد تقديم الخطوط محلياً، يمكنك تنزيل الخطوط وتقديمها من خادمك الخاص باستخدام المعالج من @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'
      })
    }),
  ],
})

سيؤدي هذا إلى تنزيل أصول الخطوط إلى public/assets/fonts وتقديمها من /assets/fonts على العميل. عند القيام بذلك، يرجى التأكد من أن ترخيص الخطوط يسمح لك بإعادة التوزيع، الأداة ليست مسؤولة عن أي مشاكل قانونية.

INFO

هذه الميزة خاصة بـ Node.js ولن تعمل في المتصفح.