@ font-face遠程問題

我想加載這個自定義字體，並且無法讓它在我的服務器上工作。我只是提供靜態文件。這是我正在使用的確切語法，它在我的本地機器上完美工作。@ font-face遠程問題

@font-face { 
    font-family: "Telegrafico"; 
    src: url('/assets/fonts/telegrafico.woff') format('woff'), url('/assets/fonts/telegrafico.eot') format('embedded-opentype'), url('/assets/fonts/telegrafico.ttf') format('truetype'), url('/assets/fonts/telegrafico.svg') format('svg'); 
}

問題出現在所有瀏覽器中......我無法弄清楚我的生活出了什麼問題。

任何幫助表示讚賞！

來源

2014-01-16 Ryan Chipman

看在控制檯，像谷歌Chrome檢查。它會突出顯示http錯誤（如果存在），或者至少您可以實際檢查web服務器是否返回了預期文件 –

沒有http錯誤，據我所知。我怎麼知道它是否返回文件？ –

在Chrome檢查器中，您將獲得此https://www.evernote.com/shard/s45/sh/6684b5aa-2ec3-4917-a285-9cea6c406c6d/5c5dbd556360efefb8e2caf92d4f8c0d確保您已實際上傳字體文件 –

來自我們的聊天。

您在CSS中使用絕對URL。但是，您的網站是從一個子目錄服務的。（這裏的錯誤是您的本地網站的模型與實況環境之間的不匹配）

解決方案是在您的CSS中使用相對路徑而不是絕對路徑。

因此，假設/資產/ css和/資產/字體

@font-face { 
    font-family: "Telegrafico"; 
    src: url('../fonts/telegrafico.woff') format('woff'), url('../fonts/telegrafico.eot') format('embedded-opentype'), url('../fonts/telegrafico.ttf') format('truetype'), url('../fonts/telegrafico.svg') format('svg'); 
}

應該足夠

來源

2014-01-16 09:34:15

@ font-face遠程問題

回答

相關問題