效果:
未引入 引入后
我想引入的字体是"din-bold_"，首先在assets下新建一文件夹"font"（其他位置也行，根据喜好习惯即可），将字体文件"din-bold_.otf"放入，接下来在需要引入的组件中引入即可。
vue:
<template>
<div class="hello">
<div class="menu-container" ref="menuContainer">
1234567890
</div>
</div>
</template>
<script>
export default {
name: ‘HelloWorld‘,
data() {
return {}
}
}
</script>
<style scoped>
body {
font-family: ‘Avenir‘, Helvetica, Arial, sans-serif;
}
.hello,
.wrapper,
.menu-container {
width: 100%;
height: 100%;
font-family: din-bold;
}
@font-face {
font-family: din-bold; //自定义字体名称
src: url(‘../assets/font/din-bold_.otf‘); //注意引入正确位置
}
</style>
原文：https://www.cnblogs.com/linjiangxian/p/12622772.html