zoukankan      html  css  js  c++  java
  • 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 {
         100%;
        height: 100%;
        font-family: din-bold;
      }
    
      @font-face {
        font-family: din-bold; //自定义字体名称
        src: url('../assets/font/din-bold_.otf'); //注意引入正确位置
      }
    </style>

      

  • 相关阅读:
    数据库链接字符汇总
    CSS 继承深度解析
    autofac
    SmartStoreNet解图
    RPM ,DPKG ,YUM ,APT-GET
    ubuntu中查看各种设备和资源的命令汇总
    linux中一些常用的命令总结
    latex 插图排版
    matplotlib 出图示例
    latex 生成pdf
  • 原文地址:https://www.cnblogs.com/linjiangxian/p/12622772.html
Copyright © 2011-2022 走看看