在 vite 中使用字体

为什么要使用 vite-plugin-font

实现智能分包
可以自动压缩
拥有构建缓存
达到首屏优化

在基于 vite 的项目中使用

示例基于 Astro

安装 vite-plugin-font，npm i -D vite-plugin-font

在配置文件中引入

// astro.config.mjs
import { defineConfig } from 'astro/config'
import Font from 'vite-plugin-font'

export default defineConfig({
  vite: {
    plugins: [Font.vite()]
  }
})

去下载对应的字体，并将字体存放到 src/assets/fonts 文件夹中

导入字体样式

---
// Layout.astro
// ~ 为定义的路径别名，请使用你自己的路径
import { css as OPPOSans } from '~/assets/fonts/OPPOSans.ttf'
---

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="description" content="Astro description" />
		<meta name="viewport" content="width=device-width" />
		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
		<meta name="generator" content={Astro.generator} />
	</head>
	<body style={{ fontFamily: OPPOSans.family}}>
		<slot />
	</body>
</html>