Почему шрифты ttf не работают с Vue CLI? - PullRequest
Новая
       7

Почему шрифты ttf не работают с Vue CLI?

1 голос
/ 13 апреля 2019

Я работаю с Vue CLI и хочу использовать шрифт, загруженный из Интернета. Я думаю, что все настроил, но это просто не работает.

Структура проекта такова: 

+--node_modules
+--public
|  +--index.html
+--src
|  +--assets
|  |  +--css
|  |  +--font
|  |  |  +--font.css
|  |  |  +--FZYXJW.ttf
|  +--components
|  +--App.vue
|  +--main.js
+--babel.config.js
+--vue.config.js
+--package.json

Вот соответствующие коды: 

// font.css
@font-face {
  font-family: 'Youxian';
  src: url("FZYXJW.ttf");
}

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
        .rule('font')
        .test(/\.(woff2?|eot|ttf|otf)(\?.*)?$/)
        .use('url-loader')
        .loader('url-loader')
        .end()
  }
};

// App.vue
<template>
  <div id="app">
      <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'app'
}

</script>

<style>
  @import "/assets/font/font.css";

  #app {
    font-family: 'Youxian';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

</style>

Я ожидал, что шрифт изменится на "Youxian", но на самом деле ничего не произошло.

...