【CSS】全局声明引入自定义字体

以下用vue项目为例，其他的也是类似！

在Vue.js中可以使用全局样式表来定义字体。通常，可以在项目中的主样式表中定义全局字体，然后确保该样式表在整个应用程序中被引入。

以下是一般的步骤：

1. 在项目中创建一个全局样式表（例如styles.css），并在该样式表中定义你的字体：

   /* styles.css */
   
   /* 引入字体 */
   @font-face {
     font-family: 'CustomFont';
     src: url('path/to/custom-font.woff2') format('woff2'),
          url('path/to/custom-font.woff') format('woff');
     /* 其他字体属性（例如 font-weight，font-style）可以在此添加 */
   }
   
   /* 全局应用字体 */
   body {
     font-family: 'CustomFont', sans-serif;
     /* 添加备用字体以防无法加载自定义字体时使用默认字体 */
   }
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15

   确保替换 'path/to/custom-font.woff2' 和 'path/to/custom-font.woff' 为你实际字体文件的路径。

2. 在Vue组件中引入全局样式表。你可以在main.js或者入口组件中引入这个样式表：

   // main.js
   
   import Vue from 'vue';
   import App from './App.vue';
   import './path/to/styles.css'; // 引入全局样式表
   
   Vue.config.productionTip = false;
   
   new Vue({
     render: h => h(App),
   }).$mount('#app');
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11

   或者如果你的项目使用了Vue CLI，可以在main.js中引入样式表：

   // src/main.js
   
   import { createApp } from 'vue';
   import App from './App.vue';
   import './path/to/styles.css'; // 引入全局样式表
   
   createApp(App).mount('#app');
   1
   2
   3
   4
   5
   6
   7

这样自定义字体就会在整个Vue应用程序中全局生效了。确保测试在不同浏览器和设备上的兼容性。