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>

结果：