我有一个 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;
}
现在我不知道我的问题是因为我的路径设置错误还是我需要在我的应用程序中进行额外的配置。
关于如何修复它的一些想法？
最佳答案
将您的文件放在静态目录下并链接
@import '/staic/fonts/line-awesome/css/line-awesome.min.css';
static/中的文件根本不会被 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">
关于css - 在 VueJS 中导入带有字体的 CSS 文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46176715/