Firefox @font-face с локальным файлом - загружаемый шрифт: загрузка не удалась

У меня возникла проблема с использованием шрифта, доступного через относительный URL.

@font-face {
    font-family: 'ElegantIcons';
    src:url('../src_main/fonts/ElegantIcons.eot');
    src:url('../src_main/fonts/ElegantIcons.ttf') format('truetype'),
        url('../src_main/fonts/ElegantIcons.svg#ElegantIcons') format('svg'),
        url('../src_main/fonts/ElegantIcons.woff') format('woff'),
        url('../src_main/fonts/ElegantIcons.eot?#iefix') format('embedded-opentype');
    font-weight: normal;
    font-style: normal;
}

Когда я обращаюсь к веб-странице, шрифт не работает, и в консоли я получаю следующее:

downloadable font: download failed (font-family: "ElegantIcons" style:normal weight:normal stretch:normal src index:1): status=2147500037
source: file:///...snipped.../src_main/fonts/ElegantIcons.woff @ file:///...snipped.../src_poke/fonts-style.css

Доступ к файлу путем копирования/вставки URL-адреса в адресную строку браузера показывает, что это правильный URL-адрес, поскольку я могу загрузить шрифт.

Ответ 1

Кончик шляпы к ответу Джонатана Кью на соответствующая запись mozilla bugzilla:

Я считаю, что это работает так, как было разработано. AIUI, проблема здесь в том, что для страницы, загруженной из файла://URI, только файлы в (или ниже) тот же каталог файловой системы считается "одним и тем же источником", и поэтому размещение шрифта в другом поддереве (../font/) означает, что это будут заблокированы ограничениями политики безопасности.

Вы можете расслабиться, установив security.fileuri.strict_origin_policy на false в about: config, но поскольку это дает странице доступ к вашему всю локальную файловую систему, что-то нужно использовать с осторожностью.

Подводя итог, "исправить" без повторной настройки ваших файлов:

Открыть о: config
Установите security.fileuri.strict_origin_policy в значение false
Остерегайтесь последствий для безопасности.

Однако лучший способ состоит в том, чтобы обеспечить доступность любых ресурсов, не вступая сначала в файловую систему.

Примечание. политика происхождения рассчитывается на основе html, а не файла css! Таким образом, файл шрифта, отличный от файла css, может не работать, что очень сбивает с толку. (По крайней мере, это то, что я думал об этом с Firefox!)

Последующие действия:

Комментарии eradman:

Это наоборот: относительные пути относительно файла CSS.

chrylis отвечает:

Вы подумали бы, но фактический код в Firefox, похоже, не согласен.

Ответ 2

@CharlesGoodwin @eradman Фактически, оба утверждения о происхождении кажутся верными, за исключением того, что они, вероятно, говорят о двух разных вещах: проверка того же происхождения основана на исходном HTML файле, тогда как относительные URL-адреса для шрифтовых граней разрешены относительно CSS файл, содержащий правило @font-face.

Кроме того, исходный HTML файл не является файлом, который использует шрифт. У меня есть следующая локальная файловая структура.

<base-directory>/index.htm
<base-directory>/ARPLS/toc.htm
<base-directory>/dcommon/css/fonts.css
<base-directory>/dcommon/fonts/myfont.woff

fonts.css ссылается на myfont.css через url (../fonts/myfont.woff) и ссылку toc.htm fonts.css через < link... href= "../dcommon/css/fonts.css" > . index.htm имеет гиперссылку на toc.htm. Теперь я добавил закладки как index.htm, так и toc.htm. Если я использую закладку index.htm, шрифт отображается правильно. Если я использую закладку toc.htm, шрифт не загружается. Я думаю, это потому, что myfont.woff находится в подкаталоге каталога, содержащего index.htm, но не каталога, содержащего toc.htm.

Наблюдается в Firefox 38.6.

Ответ 3

Попробуйте добавить это в свой web.config

<system.webServer>
<staticContent>
  <clientCache cacheControlCustom="public" cacheControlMode="UseMaxAge" cacheControlMaxAge="365.00:00:00" />
  <remove fileExtension=".woff" />
  <remove fileExtension=".woff2" />
  <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
  <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
</staticContent>