vue font-family
时间: 2025-01-09 22:56:42 浏览: 43
### 如何在 Vue 项目中设置或更改 `font-family` 样式
#### 方法一:通过局部样式设置特定组件的字体家族
对于单个组件中的字体风格调整,可以在该组件对应的 `<style>` 或者 `<style scoped>` 中定义所需的 `@font-face` 和 `font-family` 属性。
```html
<template>
<div class="custom-font">这里是应用了自定义字体的内容</div>
</template>
<script setup lang="ts">
// 组件逻辑...
</script>
<style scoped>
@import './assets/font/customFont.css';
.custom-font {
font-family: 'CustomFont', sans-serif;
}
</style>
```
此方法适用于仅需改变部分页面元素的情况[^1]。
#### 方法二:全局配置字体家族
为了使整个应用程序都采用统一的字体设计,在项目的入口文件(如 `App.vue`)内添加相应的 CSS 规则可以实现这一点。这不仅简化了维护工作量,还提高了代码的一致性和可读性。
```html
<template>
<!-- 应用程序结构 -->
</template>
<script setup lang="ts">
/* ... */
</script>
<style lang="scss">
body,
#app {
margin: 0;
padding: 0;
height: 100%;
/* 定义多个备选字体族,按照优先级顺序排列 */
font-family: "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", STHeiti, "Microsoft YaHei", SimSun, sans-serif;
}
.home {
/* 如果希望某些区域使用不同的字体,则在此处指定 */
font-family: inherit; // 默认继承父节点的字体属性
}
</style>
```
上述例子展示了如何利用 `App.vue` 文件来设定全局范围内的默认字体系列,并允许子组件根据需求覆盖这些预设值[^2]。
另外一种方式是在 `main.js` 中导入包含 `@font-face` 声明和其他通用样式的外部 LESS/SASS 文件:
```javascript
import Vue from 'vue'
import App from './App.vue'
// 导入并注册全局使用的字体样式表
import '@/assets/styles/globalFonts.less';
new Vue({
render: h => h(App),
}).$mount('#app')
```
这种方式有助于保持样式分离的良好实践,同时也方便管理和扩展未来的主题定制功能[^3]。
阅读全文
相关推荐


















