vue3 使用字体 阿里巴巴矢量库字体

**Vue3 中使用阿里巴巴矢量库字体**

在 Vue3 应用中，使用阿里巴巴矢量库字体（简称：阿里字体）可以大大提高应用的视觉效果和用户体验。下面我们将一步步地介绍如何在 Vue3 应用中使用阿里字体。

### 一、安装阿里字体首先，我们需要安装阿里字体包。我们可以通过 npm 或 yarn 来安装：

bashnpm install @alibaba/font-aliyun-fonts --save

bashyarn add @alibaba/font-aliyun-fonts

javascriptimport { createApp } from 'vue'
import App from './App.vue'

// 引入阿里字体包import '@alibaba/font-aliyun-fonts';

createApp(App).use(router).mount('#app')

javascriptimport { createApp } from 'vue'
import App from './App.vue'

// 引入阿里字体包import '@alibaba/font-aliyun-fonts';

// 全局样式const globalStyle = `
 @font-face {
 font-family: 'AliyunFont';
 src: url(' format('truetype');
 }
`;

// 应用全局样式document.body.innerHTML += globalStyle;

createApp(App).use(router).mount('#app')

javascript<template>
 <div class="aliyun-font">
 <span>阿里字体</span>
 </div>
</template>

<script>
export default {
 name: 'AliyunFont',
 components: {},
 data() {
 return {}
 },
 mounted() {},
 methods: {}
}
</script>

<style scoped>
.aliyun-font {
 font-family: 'AliyunFont';
}
</style>