2013-10-04 66 views
2

我呼籲project和目錄在其中,我有目錄htmlassetsjavascriptdirectory有目錄fontscss .The css目錄中有一個名爲css文件.The資產typography.css。字體目錄中包含我正在使用的所有字體。我有一個文件typography.html。要使用我使用這個代碼的字體內typography.css這是正確鏈接/在我的html中引用file.However在代碼裏typography.css@fontface CSS字體路徑似乎並沒有工作

@font-face { 
    font-family: "LatoLight"; 
    src: url('../fonts/lato-light-webfont.eot') format("embedded-opentype"), url('../fonts/lato-light-webfont.woff') format("woff"), url('../fonts/lato-light-webfont.ttf') format("truetype"), url('../fonts/lato-light-webfont.svg') format("svg"); 
    } 
    h1{ font-family: LatoLight !important; } 

不會產生預期的result.I正在使用Twitter的引導爲什麼說這不工作?

+0

您是否嘗試將字體文件直接放在css文件夾中並將其鏈接到那裏以查看是否存在除可能的目錄問題以外的其他任何問題? –

+0

是的,我也這樣做了,但也失敗了。但是,當我在我的typography.html文件中使用內聯樣式並直接在html內添加所有字體時,它可以工作,但我需要將字體放在字體目錄中。 –

+0

你使用什麼瀏覽器? –

回答

3

嘗試:

@font-face { 
    font-family: 'LatoLight'; 
    src: url('../fonts/lato-light-webfont.eot') format("embedded-opentype"), 
     url('../fonts/lato-light-webfont.woff') format("woff"), 
     url('../fonts/lato-light-webfont.ttf') format("truetype"), 
     url('../fonts/lato-light-webfont.svg') format("svg"); 
    font-weight: normal; 
    font-style: normal; 
} 

我切換雙引號單。它可能會有所作爲,但我不確定。

否則這可能有幫助Bootstrap 3 unable to display glyphicon properly我知道它是圖標,但Firefox可能只是有關於其他字體的問題。

+1

問題是'文件來源策略'問題,在這裏討論http://stackoverflow.com/a/19068467/2420583在你鏈接的問題。將此屬性'security.fileuri.strict_origin_policy'設置爲false後,它現在可以工作。 –

+0

非常好,很高興你得到它排序:) –

+1

這是非常好的。使用這種方法,您可以覆蓋自定義.less文件中引導程序提供的原始路徑,並將字體文件指向任何位置。 – blackhawk

0

我認爲這可能就像引用它時引用你想要的字體一樣簡單。

h1{ font-family: "LatoLight" !important; } 
+0

這也行不通,我早些時候嘗試過。 –