Vue Cli 3 本地字体未加载

Question

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

我尝试在 vue.config.js 中添加加载器，更改 url 路径，并将 @font-face 规则移动到不同的位置，将 public 路径更改为 ' ' 和'/'，将 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: {
    sourceMap: true,
    loaderOptions: {
      sass: {
        data: `@import "@/styles/main.scss";`
      }
    }
  },
  configureWebpack: {
    module: {
      rules: [{
        test: /\.(ttf|otf|eot|woff|woff2)$/,
        use: {
          loader: "file-loader",
          options: {
            name: "fonts/[name].[ext]",
          },
        },
      }]
    }
  }
}

我也试过 vue.config.js 中的 chainWebpack 无济于事：

chainWebpack: config => {
    config
      .module
      .rule("file")
      .test(/\.(woff2?|eot|ttf|otf)(\?.*)?$/,)
      .use("url-loader")
      .loader("url-loader")
      .options({
        limit: 10000,
        name: 'assets/fonts/[name].[ext]'
      })
      .end();
  }

Answer 1

你试了吗

@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;
}

适用于我的 Vue CLI 3，无需 vue.config.js 设置。

我正在这样加载我的样式：

import Vue from 'vue';

import router from './router';
import store  from './store';
// eslint-disable-next-line
import styles from './scss/app.scss';

import App from './App.vue';

Vue.config.productionTip = false;

new Vue({
    router,
    store,
    render: h => h(App)
}).$mount('#app');

不确定这是否是好的做法。

Answer 2

我将自定义 icon-font 粘贴在初始 index.html 页面的 head 标签中，该页面也有自定义字体导入。您将粘贴 <div id="vue-app"></div> 的同一页面。所有其他页面/组件都可以为我使用 font-family。

<head> ... <link rel="stylesheet" href="icon-font/styles.css" /> </head>

但是如果我尝试项目中的任何其他位置，它都会失败。而且 Scss 甚至无法编译。

Answer 3

我最后做的是转向文件加载器方法来打包字体并设置 public 路径。

vue.config.js

module.exports = {
  assetsDir: 'assets/',
  publicPath: '/', // Base directory for dev
  css: {
    sourceMap: true,
    loaderOptions: {
      sass: {
        data: `@import "@/styles/main.scss";`
      }
    }
  },
  chainWebpack: config => {
    config.module
      .rule("fonts")
      .test(/\.(ttf|otf|eot|woff|woff2)$/)
      .use("file-loader")
        .loader("file-loader")
        .tap(options => {
          options = {
            // limit: 10000,
            name: '/assets/fonts/[name].[ext]',
          }
          return options
        })
        .end()
  }
};

File-loader 看不到这些文件，除非在 js 中调用，所以我将它们导入 main.js 控制台日志是在标记未使用的导入的 linter 周围导航

// Fonts need to be called in js for webpack to see and copy over
import OpenSansReg from './assets/fonts/OpenSans-Regular.ttf';
import OpenSansLight from './assets/fonts/OpenSans-Light.ttf';
import OpenSansBold from './assets/fonts/OpenSans-Bold.ttf';


console.log(OpenSansReg, OpenSansBold, OpenSansLight);

然后在我的一个 scss 文件中

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

Answer 4

对我来说，我只是把那个 'format()' 的东西拿出来工作了...终于..

Answer 5

这对我有帮助
在 src 文件夹中 main.js 刚刚添加：

import '../src/fonts/fonts.css'

在字体中加入以下代码：

@font-face {
    font-family: 'Conv4240';
    src: url('~@/fonts/Conv4240/4240.eot');
    src: local('☺'),
      url('~@/fonts/Conv4240/4240.woff') format('woff'),
      url('~@/fonts/Conv4240/4240.ttf') format('truetype'),
      url('~@/fonts/Conv4240/4240.otf') format('opentype'),
      url('~@/fonts/Conv4240/4240.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

一切都开始工作了

Vue Cli 3 本地字体未加载

Vue Cli 3 Local fonts not loading

vue.js

fonts

vue-cli

vue-cli-3

webpack-file-loader