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

【问题标题】：Import CSS file with Fonts in VueJS在 VueJS 中导入带有字体的 CSS 文件
【发布时间】：2018-02-20 22:27:34
【问题描述】：

我有一个 Vue 应用程序，我想使用一种超棒的字体。但是在我的组件 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;
}

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

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

【问题讨论】：

是否使用 vue-cli 创建了 vue 应用程序？
是的，我是通过 vue-cli 做的。
而不是将assets 目录放置在static 目录中。并点如@import '/staic/fonts/line-awesome/css/line-awesome.min.css';
我配置了这个静态路径，现在可以工作了！但在我做之前，我在我的 webpack 配置文件中设置了一些东西。

标签： css fonts vue.js font-face vue-component

【解决方案1】：

将你的文件放在静态目录下，并像这样链接

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

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

line-awesome 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">

【讨论】：

我按照你的建议解决了这个问题，我在 webpack.config.js 中做了一些配置来设置 publicPath。谢谢。
感谢您的帮助！如果可能的话，你可以投票给我的问题吗？