@ 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 in, все отлично работает с контентом, отображаемым в пользовательском шрифте. Но когда я толкнул свое веб-приложение через 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>

Answer 1

Чтобы развернуть в Appharbor шрифты формата .woff, мне нужно было сделать две вещи:

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

Ваша таблица стилей недоступна в том месте, на которое ссылается ваша страница. Этот URL обслуживает до 500: http://testapp -216.apphb.com / Content / Site.css

Вы должны убедиться, что AppHarbor развертывает соответствующие файлы .css и шрифтов. Это проще всего сделать, загрузив пакет вывода сборки из AppHarbor и проверив его содержимое. Если его там нет, вам, скорее всего, нужно установить «Build Action» на «Content» в ссылке на файл проекта.

Также важно, чтобы mimetypes были настроены правильно.

(отказ от ответственности, я соучредитель AppHarbor)

Answer 3

Проблема в том, что файл шрифта .otf не обслуживается с сервера AppHarbor, так как не настроен тип MIME, определяющий способ его обслуживания.

Смотрите здесь, как добавить MIME-типы с помощью Web.config: http://www.iis.net/ConfigReference/system.webServer/staticContent/mimeMap

Тип MIME, который вам нужно настроить: font/otf

Что-то вроде:

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

Answer 4

Убедитесь, что файл Действие сборки установлено в Содержимое в Visual Studio, в противном случае он не будет возвращен

Работал для меняAppHarbor

Answer 5

Ваша таблица стилей находится по адресу /Content/Site.css, и вы ссылаетесь на свои шрифты в этом файле с помощью "raleway_thin.otf", который относится к файлу CSS. Поэтому ожидается, что этот путь к файлу существует /Content/raleway_thin.otf

Я не знаком с appharbour, но убедитесь, что все ваши файлы чувствительны к регистру (т. Е. Вызывает проблемы с окнами в Unix / Linux).

В противном случае веб-сервер предотвращает загрузку определенных расширений файлов из рассматриваемого каталога. На apache вы можете указать, какие типы файлов разрешено использовать в каталоге.

Сказав, что 404 означает, что ваш URL http://testapp -216.apphb.com / Content / raleway_thin.otf не существует

Answer 6

1. Реализация решения @Lloyd ..

2. Рекомендуется добавлять все файлы, связанные со шрифтами, в типы MIME, а не только .woff

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