@font-face funktioniert problemlos über localhost, aber NICHT in AppHarbor

Question

Ich stehe vor einem Problem beim Hosten meiner Anwendung über AppHarbor. Ich habe eine grundlegende Anwendung über .net MVC 3. In dieser Anwendung habe ich die Eigenschaft @font-face verwendet, um Inhalte in benutzerdefinierten Schriftarten anzuzeigen:

@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;
}

Wenn ich diese Anwendung über meinen Entwicklungsserver in loaclhost in funktioniert alles gut mit dem Inhalt in der benutzerdefinierten Schriftart angezeigt werden. Aber wenn ich meine Webapp über AppHarbor hier geschoben:

testapp über AppHarbor

Es zeigt den Inhalt nicht mehr in der benutzerdefinierten Schriftart an, die ich in .css verwendet habe. Ich bin verwirrt, da ich denselben Browser (Chrome 15.0) verwende, um beide anzuzeigen, aber sie liefern unterschiedliche Ergebnisse.

Ich bitte um Hilfe.

---

Ich habe gerade herausgefunden, dass dies nur mit den Schriftartendateien [*.otf, *.ttf]. passiert. Ich habe ein Bild in denselben Ordner gelegt und es wurde perfekt hinzugefügt, aber wieder konnte die Schriftartdatei nicht gefunden werden und es wird 404 angezeigt.

---

Das gilt auch für die Konfiguration von mimeTypes:

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

Answer 1

Um Schriftarten im ".woff"-Format in Appharbor bereitzustellen, musste ich zwei Dinge tun:

1: Fügen Sie die Schriftart in mein Visual Studio-Projekt ein und stellen Sie sicher, dass die Eigenschaft "Build" auf "Content" gesetzt wurde (wie oben von @Korayem beschrieben)
2: Fügen Sie die folgende Konfiguration zur Web.config hinzu:

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

Answer 2

Ihr Stylesheet ist nicht an der Stelle verfügbar, an der Ihre Seite darauf verweist. Diese Url zeigt eine 500: http://testapp-216.apphb.com/Content/Site.css

Sie sollten überprüfen, ob AppHarbor die relevanten .css- und Schriftdateien bereitstellt. Dies ist am einfachsten, indem Sie das Build-Ausgabepaket von AppHarbor herunterladen und seinen Inhalt überprüfen. Wenn es nicht vorhanden ist, müssen Sie höchstwahrscheinlich "Build Action" auf "Content" in der Projektdateireferenz setzen.

Es ist auch wichtig, dass die Mimetypen richtig konfiguriert sind.

(Haftungsausschluss, ich bin Mitbegründer von AppHarbor)

Answer 3

Das Problem ist, dass die Schriftartdatei .otf wird nicht vom AppHarbor-Server ausgeliefert, da kein MIME-Typ konfiguriert ist, der angibt, wie er ausgeliefert werden soll.

Sehen Sie hier, wie man MIME-Typen mit Web.config hinzufügt: http://www.iis.net/ConfigReference/system.webServer/staticContent/mimeMap

Der MIME-Typ, den Sie konfigurieren müssen, ist font/otf

Etwa so:

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

Answer 4

Stellen Sie sicher, dass die Datei Aktion aufbauen wird eingestellt auf Inhalt in Visual Studio, andernfalls wird es nicht zurückgegeben

Funktioniert bei mir mit AppHarbor

Answer 5

Ihr Stylesheet befindet sich unter /Content/Site.css, und Sie referenzieren Ihre Schriftarten in dieser Datei mit "raleway_thin.otf", was relativ zur CSS-Datei ist. Daher wird erwartet, dass dieser Dateipfad existiert /Content/raleway_thin.otf

Ich kenne mich mit appharbour nicht aus, aber stellen Sie sicher, dass alle Ihre Dateien zwischen Groß- und Kleinschreibung unterscheiden (d. h., es gibt Probleme zwischen Windows und Unix/Linux).

Verhindert der Webserver andernfalls, dass bestimmte Dateierweiterungen aus dem betreffenden Verzeichnis geladen werden? Beim Apache können Sie angeben, welche Dateitypen in einem Verzeichnis verwendet werden dürfen.

Abgesehen davon bedeutet 404, dass Ihre URL http://testapp-216.apphb.com/Content/raleway_thin.otf gibt es nicht