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>