@font-face 在 localhost 上工作正常，但在 AppHarbor 中不行答案

【问题标题】：@font-face working fine over localhost but NOT in AppHarbor@font-face 在 localhost 上工作正常，但在 AppHarbor 中不行
【发布时间】：2011-12-24 10:31:17
【问题描述】：

我在通过 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 中通过我的开发服务器运行此应用程序时，一切正常，内容以自定义字体显示。但是当我在这里将我的 webapp 推到 AppHarbor 上时：

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>

【问题讨论】：

我用 Firebug 检查了你的 paeg，似乎字体文件没有正确链接，检查你的路径。
@Kyle Sevenoaks：谢谢你的回复，但它在我的浏览器中通过本地主机工作正常吗？并且路径似乎正确，因为样式表和字体文件位于同一目录中。
签入 Firebug 或 Chrome 的开发者工具。 Firebug 说有一个区域在 400-500 范围内的错误，通常是 404。
@Kyle Sevenoaks：是的，你认为它给出了 404，bt 为 styleSheet 和字体提供了相同的路径，并且两者都在同一个目录中，然后它如何找到 .css 而不是字体.. 有什么想法吗？ :s
在 CSS 中，路径是相对于 CSS 文档的位置的。尝试将字体移动到另一个目录并相应地更改路径。

标签： .net css hosting font-face appharbor

【解决方案1】：

为了将“.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>

【讨论】：

【解决方案2】：

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

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

正确配置 mimetypes 也很重要。

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

【讨论】：

哦，这是最新版本的新问题，它现在无法识别任何 .css 和 .js 文件。让我尝试解决这个问题！
css 问题解决了它现在链接，但字体问题仍然存在。请看一看。
你确认字体文件确实是AppHarbor部署到服务器的吗？
我该如何验证？你能帮个忙吗
您可以从 AppHarbor 的构建页面下载构建输出。这就是我们部署到应用服务器的内容。

【解决方案3】：

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

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

你需要配置的MIME类型是font/otf

类似：

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

【讨论】：

Thnx，您能否简要介绍一下如何配置 MIME 类型并指定如何提供服务？
不走运！我用我在 Web.config 中所做的更改更新了我的问题，但问题仍然存在。

【解决方案4】：

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

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

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

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

【讨论】：

是的，字体在同一个目录“内容”中，我现在改变了它，看看有什么事情发生了，但它仍然卡住了。 src: url("font/raleway_thin.otf");

【解决方案5】：

确保文件 Build Action 在 Visual Studio 中设置为 Content，否则不会返回

在 AppHarbor 上为我工作

【讨论】：

【解决方案6】：

实施@Lloyd 解决方案..
建议将所有与字体相关的文件添加到 mime 类型中，而不仅仅是 .woff

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

【讨论】：