vue2实现字体修改（全局/局部字体引入修改）/添加文字渐变色样式

1.创建一个全局 CSS 文件
创建一个单独的 CSS 文件，例如 fonts.css，然后在 main.js中引入。

fonts.css 文件内容：

@font-face {
    font-family: 'youshebiaotihei';
    src: url('../../fonts/youshebiaotihei.ttf') format('truetype'); /* 引用字体，但非全局使用 */
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'siyuanheiti';
    src: url('../../fonts/NotoSansArabicRegular.ttf') format('truetype'); /* 全局字体 */
    font-weight: normal;
    font-style: normal;
}
body {
    font-family: 'siyuanheiti', sans-serif; /* 设置全局字体 */
}

在 main.js 中引入

import './assets/styles/fonts.css'; // 引入全局字体文件，修改为自己的路径

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
}).$mount('#app');

此时即可全局字体显示为思源黑体。

单独引入字体：

<template>
  <div class="custom-font">
      叽里呱啦肯德基
  </div>
</template>
<style>
.custom-font {
     text-align: center;
  display: inline-block;
  font-size: 24px;
  background: linear-gradient(to top, rgba(90,176,255,1) 0%, rgba(255,255,255,1) 60%);
  -webkit-background-clip: text;
  color: transparent;
  font-family: 'youshebiaotihei';
  letter-spacing: 1.5px;
}
</style>

结果：