小编P. *_*ack的帖子

当尝试在 Vue CLI 3 中加载自定义本地字体时，字体仍然不会出现。我没有收到任何错误消息。检查器显示正在加载的正确规则，但字体回落到serif#app。字体没有出现在我的 dist 文件夹中的任何地方。

我尝试在 vue.config.js 中添加加载器，更改 url 路径，并将 @font-face 规则移动到不同的位置，将公共路径更改为 ' ' 和 '/'，将 scss 导入 main.js。

字体加载：

@font-face {
    font-family: 'OpenSans-Regular';
    src: url('/assets/fonts/OpenSans-Regular.eot');
    src: url('/assets/fonts/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
         url('/assets/fonts/OpenSans-Regular.otf') format('font-opentype'),
         url('/assets/fonts/OpenSans-Regular.woff') format('font-woff'),
         url('/assets/fonts/OpenSans-Regular.ttf') format('font-truetype'),
         url('/assets/fonts/OpenSans-Regular.svg#OpenSans-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

并在 App.vue 中使用：

<style lang="scss">
#app {
  font-family: 'OpenSans-Regular', serif;
}
</style>

该样式放置在我的main.scss文件中。文件结构如下：

src
  assets
    fonts
      OpenSans-Regular.eot
      OpenSans-Regular.woff
      etc
  styles
    main.scss
  App.vue
vue.config.js

vue.config.js 文件如下：

module.exports = {
  publicPath: '/',
  css: { …