今天介紹的是 UnoCSS 管理字型的工具 - [Preset-web-fonts]

目前這個套件還不是很完善，主要支援 Google Fonts 和 bunny，如果不是使用這兩個來源的字體，就不需特地使用這個 preset。

安裝套件

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

使用方式

參考官方文件的範例，文字的設定會直接撰寫在 UnoCSS 的 config 檔裡面，不需要再其他地方多做設定，官方範例如下：

import presetWebFonts from '@unocss/preset-web-fonts'
import presetUno from '@unocss/preset-uno'

Unocss({
  presets: [
    presetUno(),
    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',
          },
        ],
      },
    }),
  ],
})

完成上面的設定之後，經過 UnoCSS 編譯出來的 css 會像下面的程式碼，這時只要使用前綴 font- 加上設定的字型名稱就可以套用字型設定了。

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