Vue Cli 3本地字体未加载

时间：2019-03-29 17:04:11

标签： vue.js fonts vue-cli vue-cli-3 webpack-file-loader

当尝试在Vue CLI 3中加载自定义本地字体时，这些字体仍然不会出现。我没有收到任何错误消息。检查器显示正确的规则正在加载，但是#app上的字体回退到serif。字体没有显示在我的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: {
    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();
  }

4 个答案:

答案 0 :(得分：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');

不确定这是否是一种好习惯。

答案 1 :(得分：0)

我将自定义图标字体插入了初始index.html页面的head标签中，该页面也具有自定义字体导入。与粘贴<div id="vue-app"></div>相同的页面。其他所有页面/组件都可以为我使用字体家族。

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

但是如果我在项目中尝试任何其他位置，它将失败。而且Scss甚至不编译。

答案 2 :(得分：0)

我最终要做的是移至文件加载器方法，以获取要打包的字体并设置公共路径。

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()
  }
};

除非在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;
}

答案 3 :(得分：0)

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

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

在字体中输入以下代码：

import numpy as np
import cv2


def get_order_points(pts):
    # first - top-left,
    # second - top-right
    # third - bottom-right
    # fourth - bottom-left

    rect = np.zeros((4, 2), dtype="int")

    # top-left point will have the smallest sum
    # bottom-right point will have the largest sum
    s = pts.sum(axis=1)
    rect[0] = pts[np.argmin(s)]
    rect[2] = pts[np.argmax(s)]

    # top-right point will have the smallest difference
    # bottom-left will have the largest difference
    diff = np.diff(pts, axis=1)
    rect[1] = pts[np.argmin(diff)]
    rect[3] = pts[np.argmax(diff)]

    return rect


image = cv2.imread('image.png')

image = cv2.resize(image, (800, 800))
output_image = image.copy()

gray = cv2.cvtColor(image, cv2.COLOR_BGR2GRAY)

HSV = cv2.cvtColor(image, cv2.COLOR_BGR2HSV)
low = np.array([33, 91, 21])
high = np.array([253, 255, 255])

mask = cv2.inRange(HSV, low, high)
contours, hierarchy = cv2.findContours(mask, cv2.RETR_EXTERNAL, cv2.CHAIN_APPROX_SIMPLE)
sorted_contour = sorted(contours, key=lambda x: cv2.contourArea(x), reverse=True)

# As I know there is 6 max contour we want I'm selecting 6 contour only to creating perfact mask
selected_contour = sorted_contour[:6]
blank_mask = np.zeros_like(mask)
mask = cv2.drawContours(blank_mask, selected_contour, -1, 255, -1)
cv2.imshow("mask", mask)
cv2.imwrite("mask.png", mask)

for i, cnt in enumerate(selected_contour):
    # find min enclosing rect
    commodity_rect = cv2.minAreaRect(cnt)
    bounding_rect_points = np.array(cv2.boxPoints(commodity_rect), dtype=np.int)
    cv2.drawContours(output_image, [bounding_rect_points], 0, (0, 255, 0), 2)

    tl, tr, br, bl = get_order_points(bounding_rect_points)

    left_point = (tl + bl) // 2
    right_point = (tr + br) // 2

    print(f"\nfor {i}th contour : ")
    print("left_point : ", left_point)
    print("right_point : ", right_point)

    cv2.circle(output_image, tuple(left_point), 3, (255, 0, 0), -1)
    cv2.circle(output_image, tuple(right_point), 3, (255, 0, 0), -1)
    cv2.line(output_image, tuple(left_point), tuple(right_point), (0, 0, 255), 1)

cv2.imshow("output_image", output_image)
cv2.imwrite("output_image.png", output_image)
cv2.waitKey(0)
cv2.destroyAllWindows()

一切都开始工作了

相关问题
最新问题