@ font-face funziona bene su localhost ma NON su AppHarbor

Question

Ho riscontrato un problema mentre ospitavo la mia applicazione su un AppHarbor. Ho una domanda di base su .NET MVC 3 .. In questa applicazione ho usato la proprietà @ font-face per visualizzare il contenuto in caratteri personalizzati:

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

Quando eseguo l'applicazione tramite il mio assistente di sviluppo in loaclhost funziona perfettamente con il contenuto mostrato nel carattere personalizzato. Ma quando ho spinto la mia webapp oltre AppHarbor qui:

testapp over AppHarbor

Non è più sta mostrando il contenuto del carattere personalizzato che ho usato in css. Sono confuso su di esso come sto usando lo stesso browser (Chrome 15.0) per visualizzare entrambi, ma stanno dando risultati diversi.

Gentile aiuto.

---

Ho appena elaborato il questo sta accadendo solo con i file dei font [* .otf, * .ttf] .. ho messo un'immagine nella stessa cartella e il suo stato aggiunto perfettamente, ma ancora una volta non è riuscito a ottenere il file di font e visualizzando 404 su di esso.

---

fatto anche con mimeTypes configurazione:

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

Answer 1

Il tuo foglio di stile non è in disponibile presso la sede tua pagina riferimenti esso. Questo URL serve a 500: http://testapp-216.apphb.com/Content/Site.css

È necessario verificare che AppHarbor distribuisca i file .css e font rilevanti. Ciò è più facile scaricando il pacchetto di output di build da AppHarbor e verificandone il contenuto. Se non è presente, è molto probabile che sia necessario impostare "Crea azione" su "Contenuto" nel riferimento del file di progetto.

È anche importante che i mimetipi siano configurati correttamente.

(dichiarazione di non responsabilità, sto co-fondatore di AppHarbor)

Answer 2

Il problema è che il file di font .otf non è servita dal server AppHarbor in quanto non v'è alcun tipo MIME configurato specificando come servire esso.

Vedi qui come aggiungere tipi MIME utilizzando web.config: http://www.iis.net/ConfigReference/system.webServer/staticContent/mimeMap

Il tipo MIME è necessario configurare è font/otf

Qualcosa di simile:

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

Answer 3

Il tuo foglio di stile si trova in/Content/Site.css e stai facendo riferimento ai tuoi font in questo file con "raleway_thin.otf" che è relativo al file CSS. Quindi si aspetta questo percorso di file di esistere /Content/raleway_thin.otf

io non sono a conoscenza appharbour, ma assicurarsi che tutti i file sono case sensitive (cioè provoca le finestre di problemi di Unix/Linux).

Altrimenti, il server Web impedisce che determinate estensioni di file vengano caricate dalla directory in questione. Su apache puoi dire quali tipi di file possono essere usati in una directory.

Detto questo 404 significa che il vostro URL http://testapp-216.apphb.com/Content/raleway_thin.otf non esiste

Answer 4

assicurarsi che il file Corporatura azione è impostato su Content in Visual Studio, l'altro saggio non sarà restituito

ha funzionato per me su AppHarbor

Answer 5

per ottenere distribuire i font formato ".woff" per AppHarbor ho dovuto fare due cose:

1: includere il carattere nel mio progetto di Visual Studio, assicurando che è "costruire" proprietà è stata impostata su "Contenuto" (come descritto in precedenza da @Korayem)
2: Aggiungi il config seguito al web.config:

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

Answer 6

1. Implementare soluzione @Lloyd ..

2. si raccomanda di aggiungere tutti i file relativa ai font di tipi MIME non solo .woff

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