Vue.js中全局替换字体及font-family 自定义字体

全局字体替换

1. 添加自定义字体
   首先，你需要将自定义字体文件（如.ttf, .woff, .woff2等格式）添加到项目的静态资源目录，通常是src/assets下。

2. 链接字体文件
   接下来，在项目的主入口文件（通常是src/main.js）或者在public/index.html头部添加CSS链接，以加载字体文件。如果是在Vue CLI项目中，你可能需要在public目录下的index.html中添加：

   <link rel="stylesheet" href="<path-to-your-fonts-css>">
   或
   import '@/assets/css/index.css'

这里的应该指向你创建的CSS文件，该文件包含了字体的@font-face规则。

3. 编写@font-face规则
   在你的CSS文件中，编写@font-face规则来定义自定义字体：

   @font-face {
   font-family: 'YourFontName';
   src: url('<path-to-your-font-file>.woff2') format('woff2'),
      url('<path-to-your-font-file>.woff') format('woff');
   font-weight: normal;
   font-style: normal;
   }

确保路径正确指向字体文件。
如：

@font-face {  
    font-family: 'NotoSans-SC';  /* 定义一个新的字体名称 */  
    src: url('/src/assets/font/NotoSans-SC.ttf');  /* 指定字体文件的URL和格式 */  
    font-weight: normal;  /* 设置字体的粗细 */  
    font-style: normal;  /* 设置字体的样式（如斜体） */  
}

4. 设置全局font-family
   在Vue项目中，你可以通过在src/App.vue或全局样式文件（如src/styles/global.css）中设置font-family属性来全局应用自定义字体：

   body {
   font-family: 'YourFontName', sans-serif;
   }

这样，整个应用将使用YourFontName字体，如果该字体不可用，则回退到默认的无衬线字体。

使用自定义字体图标

1. 引入字体图标库
   对于字体图标，如Font Awesome或Iconfont，你同样需要将图标库的字体文件添加到项目中，并在CSS中定义使用规则。

2. 在组件中使用字体图标
   在Vue组件中使用字体图标时，可以像使用普通HTML元素一样使用标签，并添加相应的类名：

   <i class="fa fa-windows"></i>

   确保你的CSS中包含了对字体图标的定义，如：

   .fa-windows:before {
   content: "\f1eb";
   }

   其中\f1eb是该图标在字体库中的Unicode字符编码。