@ font-face: Firefox требует, чтобы пользователь разрешил загрузку файла шрифта - PullRequest
1 голос
/ 07 марта 2012

Запуск сайта на платформе CargoCollective.

Указание @ font-face следующим образом:

@font-face {    font-family: 'Meta';
                src:    url('https://www.sugarsync.com/pf/D7160824_3237110_68577?directDownload=true') format('embedded-opentype'),
                        url('https://www.sugarsync.com/pf/D7160824_3237110_68571?directDownload=true') format('truetype'),
                        url('https://www.sugarsync.com/pf/D7160824_3237110_68573?directDownload=true') format('woff'),
                        url('https://www.sugarsync.com/pf/D7160824_3237110_68579?directDownload=true#Meta') format('svg');
                font-weight: normal;
                text-shadow: 0 1px 0 rgba(255,255,255,0.01);
                }

Работает в Chrome и Safari, но не в Firefox.Должен работать в IE, так как он имеет EOT вверху, а URL содержит '?'заставляя IE думать, что альтернативы - это строка запроса, хотя у меня нет возможности проверить это, так как я на Mac.

Проблема в том, что в Firefox (10.0.2, Mac) запрашиваемый шрифт кажется нужнымавторизация для загрузки шрифта, так что он никогда не загружает его, и мне предоставляется стандартный засечек, который резко меняет внешний вид.

Стилизация объявлена ​​также в CSS, как обычно, с правильной структурой иерархииНапример:

body { 
       font-family: Meta, Helvetica, Arial, sans-serif; 
      }

Честно говоря, не знаю, почему это не работает.Я слышал, что Firefox обычно загружает последний шрифт в списке, который у меня есть как SVG в качестве типа файла «последнее средство» для порядка чтения, а имя шрифта указывается с помощью #Fontname в конце URL-адреса.Может ли это быть проблемой?Могу ли я не указывать имя шрифта SVG, если это так?

У меня также это не работает в Firefox на другом из моих сайтов, также размещенных на Cargo.

Ситуация там немного отличается, и, кажется, исключает очевидные проблемы с этим:

Там в коде используется старый «пуленепробиваемый» метод:

@font-face {    font-family: 'Egyptienne';
                src url('http://dl.dropbox.com/u/34000443/My%20Site%20Fonts/Egyptienne/Web/Egyptienne/egyptiennef-roman-webfont.eot') format('embedded-opentype');
                src: local('☺'),
                url('http://dl.dropbox.com/u/34000443/My%20Site%20Fonts/Egyptienne/Web/Egyptienne/egyptiennef-roman-webfont.ttf') format('truetype'),
                url('http://dl.dropbox.com/u/34000443/My%20Site%20Fonts/Egyptienne/Web/Egyptienne/egyptiennef-roman-webfont.woff') format('woff'),
                url('http://dl.dropbox.com/u/34000443/My%20Site%20Fonts/Egyptienne/Web/Egyptienne/egyptiennef-roman-webfont.svg') format('svg');
                font-weight: normal;
                text-shadow: 0 1px 0 rgba(255,255,255,0.01);
                }

Но опять же, шрифт никогда не загружается, и у меня остается мистер По умолчанию.

Различия, которые, как я думал, могут быть проблемой в другой ситуации, но которые, по-видимому, исключаются из-за этого:

  • HTTP против HTTPS (я изначально думал, что это проблема с нахождением за SHTTPS)
  • Имя SVG никогда не указывается, и нет даже строки запроса, чтобы запутать его

[Также, вероятно, не имеет значения, но, прежде чем кто-то спросит, свойство text-shadow имеет значениенемного улучшить визуализацию текста в окнах.]

Наконец, я предполагаю, что проблема связана с заголовками контроля доступа, но как добавить их в код шрифта, так как .htaccess недоступен для редактирования?

Заранее спасибо!

Ответы [ 2 ]

1 голос
/ 10 марта 2012

Firefox не позволяет загружать ресурсы шрифтов из другого домена. Вы должны явно разрешить это через файл .htaccess на сервере dropbox.com.

Вот фрагмент:

<FilesMatch "\.(ttf|otf|woff)$">
<IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>

Или даже лучше, так как приведенный выше код позволит выщелачивать:

<FilesMatch "\.(eot|otf|woff|ttf)$">
  SetEnvIf Origin »
    "^http(s)?://(.+\.)?(domain1\.org|domain\.com)$" origin_is=$0
  Header set Access-Control-Allow-Origin %{origin_is}e env=origin_is
</FilesMatch>

Более подробную информацию можно найти здесь: http://www.fontsquirrel.com/blog/2010/11/troubleshooting-font-face-problems

0 голосов
/ 05 февраля 2014

у нас была такая же проблема. Это было плохое разрешение конфигурации приложения. Более конкретно с папкой de / fonts /. Приложение ограничивало доступ к ресурсам папки / fonts /. Поэтому заставьте браузер загрузить шрифты ... извините за мой английский.

...