vue3 -- 项目使用自定义字体font-family

### 如何在 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 &#39;./assets/font/customFont.css&#39;; .custom-font { font-family: &#39;CustomFont&#39;, 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 &#39;vue&#39; import App from &#39;./App.vue&#39; // 导入并注册全局使用的字体样式表 import &#39;@/assets/styles/globalFonts.less&#39;; new Vue({ render: h => h(App), }).$mount(&#39;#app&#39;) ``` 这种方式有助于保持样式分离的良好实践，同时也方便管理和扩展未来的主题定制功能[^3]。