在 VueJS 中导入带有字体的 CSS 文件

Question

我有一个 Vue 应用程序，我想使用 line-awesome 字体。但是在我的 App.vue 组件中，我以这种方式导入 css 文件字体：

@import 'assets/fonts/line-awesome/css/line-awesome.min.css';

我的问题是没有显示任何错误，但我的应用程序中没有加载我的字体。

在那个 css 文件中，它包含这个字体：

@font-face {
  font-family: "LineAwesome";
  src: url("../fonts/line-awesome.eot?v=1.1.");
  src: url("../fonts/line-awesome.eot??v=1.1.#iefix") format("embedded-opentype"),
       url("../fonts/line-awesome.woff2?v=1.1.") format("woff2"),
       url("../fonts/line-awesome.woff?v=1.1.") format("woff"),
       url("../fonts/line-awesome.ttf?v=1.1.") format("truetype"),
       url("../fonts/line-awesome.svg?v=1.1.#fa") format("svg");
  font-weight: normal;
  font-style: normal;
}

现在我不知道我的问题是因为我的路径设置错误还是我需要在我的应用程序中进行额外的配置。

关于如何修复它的一些想法？

Answer 1

将你的文件放在静态目录下，link 喜欢

@import '/staic/fonts/line-awesome/css/line-awesome.min.css';

static/ 中的文件根本不会被 Webpack 处理：它们被直接复制到它们的最终目的地，具有相同的文件名。

线条优美 css 和字体存在一些严重问题。即使我使用带有源 css 和字体 (http://maxcdn.icons8.com/fonts/line-awesome/1.1/line-awesome.zip) 的普通简单 HTML 站点加载，它的给定框符号作为图标。

我用于测试源的示例代码如下

<html>
<head>
  <link rel="stylesheet" href="./la/css/line-awesome-font-awesome.css">
</head>
<body>
<i class="fa fa-file-word-o"></i>
</body>
</html>

输出如下

但是如果你像下面这样使用cdn

<link rel="stylesheet" href="https://maxcdn.icons8.com/fonts/line-awesome/1.1/css/line-awesome-font-awesome.min.css">

在 VueJS 中导入带有字体的 CSS 文件

Import CSS file with Fonts in VueJS

css

fonts

font-face

vue.js

vue-component