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');
此时即可全局字体显示为思源黑体。

单独引入字体：

结果：