用VueJS中的字體導入CSS文件

我有一個Vue應用程序，我想用一個很棒的字體。但在我App.vue這是我的組件導入我的CSS文件中的字體是這樣的：用VueJS中的字體導入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; 
}

現在我不知道如果我的問題是，因爲我的道路是錯誤的設置好的或者我需要在我的應用程序一個額外的配置。

關於如何修復它的一些想法？

來源

2017-09-12 All Pereira

做使用vue-cli創建vue應用程序？ –

是的，我用vue-cli來做。 –

而不是將'assets'目錄放置在'static'目錄中。並指向像'@import'/staic/fonts/line-awesome/css/line-awesome.min.css'; ' –

將靜態目錄和鏈接在你的文件，如

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

static /中的文件根本不會被Webpack處理：它們直接複製到最終目的地，具有相同的文件名。

線條真棒的CSS和字體的一些嚴重問題。即使我使用正常簡單的HTML網站加載源CSS和字體（http://maxcdn.icons8.com/fonts/line-awesome/1.1/line-awesome.zip）它的給出框符號作爲圖標。

這是我用來測試源

示例代碼如下

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

來源

2017-09-12 14:12:40

我按照你的建議解決了這個問題，我在webpack.config.js中做了一些配置來設置publicPath。謝謝。 –

感謝您的幫助！如果可能的話，你可以投我的問題？ –

用VueJS中的字體導入CSS文件

回答

相關問題