vue——引入字体

效果:

                                            未引入                                                                                                                             引入后

                                 

 

 

 

 

我想引入的字体是"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>