2014-01-21 55 views
3

是否有可能使用絕對路徑與@fontace?我有如下的目錄結構:字體面使用絕對路徑

-HP 
|--font 
| |- Monoton.woff 
| |- Monoton.eot 
|--css 
| |- font.css 
| |- fontface.css 
|--html 
    |-index.html 

定義的字體面

@font-face { 
    font-familiy: Monoton; 
    src: url('../font/Monoton.woff') format('woff'); // EDIT: Change fonts to font the name of th woff-file 
    font-weight: normal; 
    font-style: normal; 
} 

,並用它在作爲類單調的css:

@import url('fontFace.css'); 

.monoton { 
    font-familiy: Monoton, cursive; 
    font-size: 1.875em; 
    color: rgba(0, 200, 0, 1); 
} 

但它不適用於鉻,Firefox和co。有人可以解釋我爲什麼嗎? 我已經把fontFace.css和所有的字體文件放在html目錄下。現在,它會運行

+0

請給一個鏈接到您的網頁,使我們可以看看會發生什麼。 – MrUpsidown

+0

Actuell它只有離線可用...在幾天內我添加一個鏈接到網站 – Andreas

+0

請告訴我你在哪裏使用<絕對路徑>? –

回答

7

的一切首先是相對路徑絕對路徑,絕對路徑是指使用像http://whatever.com/fonts/font_file.woff其次它不工作,因爲你有一個叫做font哪裏,你的文件夾正在使用../fonts/

另外,我看到的文件名不匹配,你有,但使用的是Monoton-Regular-webfont.woff一個名爲Monton.woff,需要相應地更改文件名,並使用下面

@font-face { 
    font-family: Monoton; 
    src: url('../font/Monoton-Regular-webfont.woff') format('woff'); 
    font-weight: normal; 
    font-style: normal; 
} 

片斷您也可以直接通過在樣式表下面的代碼片段使用這些字體從谷歌

Demo

@font-face { 
    font-family: 'Monoton'; 
    font-style: normal; 
    font-weight: 400; 
    src: local('Monoton'), local('Monoton-Regular'), url(http://themes.googleusercontent.com/static/fonts/monoton/v4/AKI-lyzyNHXByGHeOcds_w.woff) format('woff'); 
} 
+0

好吧我已經改變了這些東西,但它仍然無法正常工作.. – Andreas

+0

@ user2457241所以我需要一個演示,因爲我可以通過查看提供的代碼來幫助我做所有的工作 –

+0

http://jsfiddle.net/dBskw/是我使用過的代碼但我不知道如何將文件添加到小提琴中。所以我只能顯示我使用的代碼 – Andreas

0

你有一個錯字:

font-familiy: Monoton; 
+0

感謝您的信息! – Andreas