CSS：@ font-face import not working

我不明白如何讓這個工作，任何幫助，將不勝感激;CSS：@ font-face import not working

我打算過什麼，我從這個網站有：http://alistapart.com/article/cssatten

從我的style.css

@font-face { 
font-family: "JSL"; 
src: url(http://ff.static.1001fonts.net/j/s/jsl-ancient.normal.ttf) format("truetype"); 
} 

font { 
color: #000000; 
font-size: 120%; 
font-family: "JSL"; 
}

來源

2013-02-18 user2084666

這兩個問題都不是加號（用我的重命名字體進行測試），也不必在主css文件的頂部導入一個單獨的css文件。

但是，您可能需要具有更多版本的字體，而不僅僅是真正的字體。看看Bulletproof @font-face Syntax。

您可以使用FontSquirrel’s generator來實現此目的。

這是嵌入我的應用程序中的@font-face的一個示例，它固定在我的主CSS樣式表的頂部。

@font-face { 
    font-family: 'JustVector'; 
    src: url('../fonts/justvectorv2+webfont.eot'); 
    src: url('../fonts/justvectorv2+webfont.eot?') format('eot'), 
     url('../fonts/justvectorv2+webfont.woff') format('woff'), 
     url('../fonts/justvectorv2+webfont.ttf') format('truetype'), 
     url('../fonts/justvectorv2+webfont.svg#webfontkw9J4lGf') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
}

來源

2013-02-18 20:35:56

此外，請檢查您的控制檯，以確保您提出請求時，您鏈接的字體沒有給您403禁止訪問。 – 2013-02-18 20:37:29

我試過了，這是否必須做到服務器端？因爲這仍然不適合我 – user2084666 2013-02-18 20:46:09

沒關係，我現在就開始工作了！非常感謝你！ – user2084666 2013-02-18 20:52:41

沒有

@font-face

嘗試獲得運行軌跡是：

@import_your_new_cssfile.css

你把：

font-face { 
font-family: "JSL"; 
src: url(http://www.fontyukle.net/en/DownLoad-JSL+Ancient.ttf) format("truetype"); 
} 

font { 
color: #000000; 
font-size: 120%; 
font-family: "JSL"; 
}

來源

2013-02-18 20:17:32

也許是字體網址的「+」號問題？您可能想要對其進行網址編碼。

編輯 - 點擊字體網址後，它看起來應該嘗試下載ttf文件，並在本地引用它，而不是從遠程源引用它。它會提示我輸入驗證碼以便下載文件，這可能是爲什麼它不起作用。

來源

2013-02-18 20:18:38 Ripside

我在發佈後意識到這一點，但我將鏈接更改爲http://ff.static.1001fonts.net/j/s/jsl-ancient.normal.ttf，結果相同 – user2084666 2013-02-18 20:33:00

您確實需要下載該文件並在本地引用它，支持的鏈接有一個下載鏈接，並且需要下載一個驗證碼，這意味着它不是直接鏈接到TTF文件。

來源

2013-02-18 20:33:41

我已更新鏈接，這是直接 – user2084666 2013-02-18 20:36:03

根據不同的字體，你可能需要使用：

@font-face { 
font-family: 'someFont'; 
src: url('path/to/font/someFont.eot'); 
src: url('path/to/font/someFont.eot?#iefix'), format('embedded-opentype'), 
    url('path/to/font/someFont.woff'), format('woff'), 
    url('path/to/font/someFont.ttf'), format('truetype'), 
    url('path/to/font/someFont.svg'), format('svg'); 
font-weight: normal; 
font-style: normal; 
}

和CSS：

BODY 
{ 
    font-family: 'someFont', Fallback, sans-serif; 
    font-size: 12px; 
    ... 
}

這爲我工作，當我有wityh嵌入自定義字體的問題。

來源

2015-01-30 12:35:36

CSS：@ font-face import not working

回答

相關問題