@ font-face在localhost上正常工作但在AppHarbor中没有

Question

我在通过AppHarbor托管我的应用程序时遇到了问题。 我在.net MVC 3上有一个基本的应用程序..在这个应用程序中，我使用了@ font-face属性来显示自定义字体中的内容：

@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中运行此应用程序时，所有内容都以自定义字体显示。 但是当我在AppHarbor上推送我的webapp时：

testapp over AppHarbor

它不再显示我在.css中使用的自定义字体中的内容。我很困惑，因为我使用相同的浏览器（Chrome 15.0）来查看它们，但它们会给出不同的结果。

请帮助。

---

我刚刚解决了这种情况只发生在字体文件[* .otf，* .ttf] ..我把一个图像放在同一个文件夹中并且已经完美添加了但是再次无法获取字体文件和在它上面显示404。

---

还完成配置mimeTypes：

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

Answer 1

为了将“.woff”格式字体部署到Appharbor，我必须做两件事：

1：在我的visual studio项目中包含该字体，确保其“Build”属性设置为“Content”（如上所述@Korayem）
2：将以下配置添加到Web.config：

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

Answer 2

您的样式表在您的页面引用它的位置不可用。此网址提供500：http://testapp-216.apphb.com/Content/Site.css

您应该验证AppHarbor是否部署了相关的.css和字体文件。通过从AppHarbor下载构建输出包并检查其内容，可以轻松完成此操作。如果它不存在，您很可能需要在项目文件参考中将“Build Action”设置为“Content”。

正确配置mimetypes也很重要。

（免责声明，我是AppHarbor的联合创始人）

Answer 3

问题是AppHarbor服务器不提供字体文件.otf，因为没有配置MIME类型来指定如何提供它。

请在此处查看如何使用Web.config添加MIME类型：http://www.iis.net/ConfigReference/system.webServer/staticContent/mimeMap

您需要配置的MIME类型为font/otf

类似的东西：

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

Answer 4

您的样式表位于/Content/Site.css，并且您在此文件中使用“raleway_thin.otf”引用您的字体，该字体与CSS文件相关。因此，期望此文件路径存在/Content/raleway_thin.otf

我不熟悉appharbour，但要确保所有文件都区分大小写（即导致windows出现unix / linux问题）。

否则，Web服务器是否阻止从相关目录加载某些文件扩展名。在apache上，您可以告诉它允许在目录中使用哪些文件类型。

说404表示您的网址http://testapp-216.apphb.com/Content/raleway_thin.otf不存在

Answer 5

确保在Visual Studio中将文件构建操作设置为内容，否则将不会返回

在AppHarbor上为我工作

Answer 6

1. 实施@Lloyd解决方案..

2. 建议将所有与字体相关的文件添加到mime类型中，而不仅仅是.woff

                                                                             

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