@ font-face在本地主機上正常工作，但不在AppHarbor中

我在通過AppHarbor託管我的應用程序時遇到問題。我有一個基本的應用程序在.NET MVC 3。在這個應用程序，我已經使用了的@ font-face屬性來顯示自定義字體內容：@ font-face在本地主機上正常工作，但不在AppHarbor中

@font-face { 
font-family: facefont; 
src: url("raleway_thin.otf"); 
} 
body {  
font-size: .85em; 
font-family: "facefont", Verdana, Helvetica, Sans-Serif; 
margin: 0; 
padding: 0; 
color: #696969; 
}

當我運行通過我的開發服務器此應用程序在loaclhost中的作品與自定義字體中顯示的內容都很好。但是，當我把我的webapp在這裏AppHarbor：

testapp over AppHarbor

它沒有更多的表示，我已經在使用的CSS自定義字體的內容。我對此感到困惑，因爲我正在使用相同的瀏覽器（Chrome 15.0）查看兩者，但他們給出了不同的結果。

請幫忙。

我只是工作了，這是與字體文件只發生[*雜項文件，* .TTF] ..我放在同一文件夾中的圖像，並對其進行了完美的補充，但它再次未能獲得字體文件並在其上顯示404。

還與配置MIMETYPES完成：

<staticContent> 
     <mimeMap fileExtension=".otf" mimeType="font/otf" /> 
     <mimeMap fileExtension=".ttf" mimeType="application/octet-stream" /> 
    </staticContent>

來源

2011-11-08 Maven

我檢查出你的paeg使用Firebug，似乎字體文件沒有正確鏈接到，檢查你的路徑。 – Kyle

@Kyle Sevenoaks：Thnks fr回覆，但它在我的瀏覽器中通過localhost工作正常嗎？並且路徑似乎正確，因爲樣式表和字體文件在相同的目錄中。 – Maven

簽入Firebug或Chrome的開發者工具。 Firebug說在400-500範圍內有一個區域的錯誤，通常是404. – Kyle

樣式表是不是在您使用頁面引用它。這個URL提供了一個500：http://testapp-216.apphb.com/Content/Site.css

你應該驗證AppHarbor部署相關的.css和字體文件。這很容易通過從AppHarbor下載構建輸出包並檢查其內容來完成。如果不存在，則很可能需要在項目文件參考中將「構建操作」設置爲「內容」。

正確配置mimetypes也很重要。

（聲明，我AppHarbor的創始人之一）

來源

2011-11-08 20:24:37 friism

哦，這是一個新的問題jst與最新版本，它現在不承認任何.css和.js文件..讓我試着解決這個問題！ – Maven

css問題現在解決了它的聯繫，但字體問題依然存在。請好好看看。 – Maven

您是否已驗證AppHarbor確實已將字體文件部署到服務器？ – friism

的問題是，字體文件.otf不會從AppHarbor服務器充當沒有配置MIME類型指定如何爲它服務。

這裏看到如何使用Web.config文件添加MIME類型：http://www.iis.net/ConfigReference/system.webServer/staticContent/mimeMap

您需要配置的MIME類型爲font/otf

喜歡的東西：

<mimeMap fileExtension=".otf" mimeType="font/otf" />

來源

2011-11-08 15:18:36 Variant

Thnx，你能告訴我一個關於如何配置指定如何提供它的MIME類型的律法？ – Maven

是的。我已經更新了我的回答 – Variant

沒有運氣！我用我在Web.config中所做的更改更新了我的問題，但問題仍然存在。 – Maven

樣式表位於/ Content/Site.css，並且您在該文件中使用與該CSS文件相關的「raleway_thin.otf」來引用您的字體。因此，它期望此文件路徑存在/Content/raleway_thin.otf我不熟悉appharbour，但確保所有文件都區分大小寫（即導致窗口unix/linux問題）。

否則，Web服務器是否阻止從相關目錄加載某些文件擴展名。在apache上，你可以告訴它哪個文件類型被允許在目錄中使用。

說了404意味着你的URL http://testapp-216.apphb.com/Content/raleway_thin.otf在位置不存在

來源

2011-11-08 15:19:01 Brad

是的字體是在相同的目錄'內容'ive現在改變它看到事情發生，但它仍然卡住。 'src：url（「font/raleway_thin.otf」）;' – Maven

確保文件生成操作在Visual Studio設置爲內容，其他明智的將不予退還 set build action to content

爲我工作在AppHarbor

來源

2011-12-12 18:14:53 Korayem

爲了獲得部署「.woff」格式的字體，Appharbor我不得不做兩件事情：

1：包括我的Visual Studio項目的字體，以確保它的「生成」屬性設置爲「內容」（如通過以上描述@Korayem）
2：添加如下配置到Web.config中：

<system.webServer> 
    <staticContent> 
     <remove fileExtension=".woff"/> 
     <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" /> 
    </staticContent> 
</system.webServer>

來源

2011-12-15 02:10:13 Lloyd

這工作。謝謝。 – DarthVader

實施@Lloyd解決方案..
建議所有字體相關的文件添加到MIME類型不只是.woff

REF。 http://geekswithblogs.net/JayantSharma/archive/2012/08/26/adding-mimetype-in-web.conifg-for-html5.aspx

來源

2013-02-05 20:24:55

@ font-face在本地主機上正常工作，但不在AppHarbor中

回答

相關問題