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, поскольку я могу загрузить шрифт.

16
css css3 firefox font-face fonts

3 ответов

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

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

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

чтобы подвести итог, "исправить" без перестановки файлов:

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

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

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

дополнения:

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

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

chrylis отвечает:

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

27

@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

шрифты.в CSS ссылки myfont.в CSS via URL-адрес(../шрифты/сайт myfont.woff) и toc.НТМ ссылка шрифты.в CSS via . .НТМ имеет гиперссылку на toc.НТМ. Теперь, я закладки обоих .НТМ и toc.НТМ. Если я использую .НТМ закладка, шрифт отображается правильно. Если я использую toc.НТМ закладки не удается загрузить шрифт. Я думаю, это потому, что myfont.woff находится в подкаталоге каталога, содержащего .НТМ но не из каталога, содержащего toc.НТМ.

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

3

попробуйте добавить это в свой интернет.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>
0