app.vue添加全局字体

在Vue.js应用中，如果你想在所有的组件中添加全局使用的字体，你需要在项目中设置一个全局的样式表或者利用Vue的单文件组件的`<style>`部分来实现。下面是一个简单的步骤：

1. **创建全局CSS**：
- 在`src`目录下新建一个文件夹，比如`assets`或`styles`。
- 创建一个名为`global.css`或`main.css`的文件，用于存放全局样式。

2. **添加字体样式**：

   @font-face {
     font-family: 'YourFont';
     src: url('./fonts/your-font.ttf') format('truetype');
     /* 或者其他格式如woff, svg等 */
     font-weight: normal;
     font-style: normal;
   }
   
   body {
     font-family: 'YourFont', Arial, sans-serif;
   }

这里假设你已经将你的字体文件`your-font.ttf`放置在`./fonts`路径下。

3. **引用全局CSS**：
- 在`App.vue`文件的`<template>`标签外面，添加一个`<style>`标签，链接到全局样式文件：

   <template>
     <!-- ... -->
   </template>

   <script>
   // ...
   </script>

   <style lang="scss" scoped>
     /* 如果使用Sass或者其他预处理器 */
     @import "@/assets/global.scss"; // 或者 "./styles/main.scss"
   </style>

使用`scoped`属性是为了防止样式污染其他组件，但在这里我们可以忽略它，因为我们只做全局样式。

4. **确保字体可用**：
- 确保在运行时浏览器可以访问到这个字体文件，你可以通过修改Webpack配置来正确处理资源路径，或者在生产环境中考虑使用CDN。

现在，你已经在App.vue中添加了全局字体，所有在该Vue应用中的组件都会显示这个字体。如果还有疑问，可以问我哦。