Vite scss 如何引入本地 字体
在Vite项目中引入本地字体，你需要做以下几步：
- 将字体文件放置在项目的
public文件夹或者assets文件夹中（根据项目结构决定）。 - 在你的
scss文件中使用@font-face规则来引入字体。 - 使用相对路径指向字体文件。
示例代码：
// styles.scss
@font-face {
font-family: 'MyCustomFont';
src: url('./assets/fonts/MyCustomFont.woff2') format('woff2'),
url('./assets/fonts/MyCustomFont.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
body {
font-family: 'MyCustomFont', sans-serif;
}确保你的Vite配置文件（例如vite.config.js）包含了对字体文件的处理，通常Vite已经内置了对字体文件的支持，不需要额外配置。
如果你的Vite项目中使用了scss预处理器，那么你可以像上面展示的那样在你的scss文件中直接引入本地字体。记得调整url路径以指向你的字体文件实际位置。
评论已关闭