首页vue3设置全局字体

vue3设置全局字体

时间: 2025-02-14 18:03:47 浏览: 44

在Vue3中设置全局字体通常是在项目的根组件或者CSS预处理器文件（如Sass、Less或Stylus）中进行。这里是一个基本的例子：首先，在`main.js`或`App.vue`的`<head>`部分添加全局CSS样式，你可以创建一个变量来存储字体名称和大小，例如： ```html <style lang="scss"> $global-font-family: 'Roboto', sans-serif; // 可替换为你喜欢的字体 body { font-family: $global-font-family; } </style> ``` 在上面的示例中，我们定义了一个名为`$global-font-family`的全局变量，并将其应用到了`body`元素上，使其所有子元素都会继承这个字体。如果你使用的是Vue CLI的scss-loader，记得安装相应的依赖： ```bash npm install --save node-sass sass-loader ``` 然后在`vue.config.js`中配置css预处理器： ```javascript module.exports = { css: { loaderOptions: { scss: { additionalData: ` @import "@/styles/variables"; `, }, }, }, }; ``` 在这个配置中，我们在`additionalData`里导入了包含全局变量的`variables.scss`文件。接着，在`variables.scss`中定义你的字体变量： ```scss // variables.scss $global-font-family: 'Arial', sans-serif; ``` 现在，项目内的所有Vue组件都将使用你指定的全局字体。如果你想在某个特定组件内改变字体，可以覆盖全局样式，如： ```html  <style scoped> .some-class { font-family: 'Comic Sans MS', sans-serif; } </style> ```

阅读全文