Блог

Я работаю с 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», но на самом деле ничего не произошло.