vue打包字体该怎么打包?
时间: 2024-09-18 08:08:14 浏览: 10
Vue项目打包字体通常会涉及到CSS预处理器(如Sass、Less)或者直接在HTML模板中使用`<link>`标签引用。以下是一个基本步骤:
1. **使用CSS预处理器**:
- 在CSS文件中,使用@font-face规则引入自定义字体,例如:
```css
@font-face {
font-family: 'MyCustomFont';
src: url('./fonts/my-font.ttf') format('truetype');
}
```
- 然后在需要的地方通过`:local()`选择器引用这个字体,比如 `.custom-class { font-family: local('MyCustomFont'); }`
2. **Webpack配置**:
- 使用Webpack的File-loader或url-loader处理字体文件。在`.vue`组件的`webpack.base.conf.js`或者其他适当的配置文件里添加:
```javascript
module.exports = {
//...
module: {
rules: [
{
test: /\.(ttf|eot|woff|woff2)\?*$/,
use: ['file-loader']
}
]
}
};
```
这样字体会被转换成Base64编码并在CSS内嵌入,或者作为单独的文件输出。
3. **使用字体图标库**:
如果不是特殊字符的字体,可以考虑使用字体图标库(如Font Awesome),这样就无需单独打包字体文件了。