效果:
未引入 引入后
我想引入的字体是 "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>
来源: http://www.bubuko.com/infodetail-3489110.html