2017-05-09 105 views
2

我有一些麻煩讓我的字體效率vuejs,我沒有任何錯誤,我的字體在良好的文件夾和我的webpack配置似乎是有效的。無法加載字體與webpack&vuejs

順便說一句我用得少,但我也有較少的裝載機。

這裏是我該怎麼辦:

@font-face { 
    font-family: 'montserrat-extralight'; 
    src: url('../assets/fonts/montserrat-ExtraLight.ttf') format('truetype'); 
    font-family: 'montserrat-light'; 
    src: url('../assets/fonts/montserrat-Light.ttf'); 
} 

而且這裏是我定義的URL裝載機在我webpack.config:

{ 
    test: /\.(woff|woff2|otf|eot|ttf|svg)(\?.*$|$)/, 
    loader: 'url-loader?importLoaders=1&limit=100000' 
} 

我發現很多人有同樣的問題,但我實際上找不到讓它工作的方法。

PS:我的字體不是在developper模式中的網絡選項卡上傳...

Screenshot of font not being uploaded

+0

首先,我不認爲一個'@ font-face'可能指定多個字體(應該是每1個'@ font-face' 1個字體)。你寫它的方式最後一個'font-family'屬性簡單地覆蓋了以前的任何東西。儘管如此,你仍然至少會加載一種字體,所以這不是唯一的問題。 –

+1

我這樣做了很多時間,並沒有任何問題,這種語法! 但正如你所說這不是唯一的問題〜 –

回答

0

好吧,我finaly找到一種方法,用我的海關字體:

我有正確的語法,但我不得不使用.woff或.woff2字體文件,而不是.TTF或雜項文件。我無法解釋爲什麼它不工作了,但我得到了我想要的,所以它沒事了〜

1

你的配置似乎確定,但嘗試刪除限制 PARAM它可能會解決你的問題,因爲一個字體文件可能會超過100K。

+1

不幸的是它沒有工作... –

-1
new OptimizeCSSPlugin({cssProcessorOptions: { 
    safe: true 
}}), 
+2

可以解釋爲什麼你的解決方案工作,以提高你的貢獻的價值? –