@ font-face шрифты работают только на своем собственном домене

Я пытаюсь создать тип репозитория шрифтов для использования на моих веб-сайтах, чтобы я мог вызывать любой шрифт в репозитории в моем css без какой-либо другой настройки. Для этого я создал поддомен, на котором разместил папки для каждого шрифта в репозитории, содержащие различные типы файлов для каждого шрифта. Я также разместил файл css под названием font-face.css в корне поддомена и заполнил его @font-face объявления для каждого из шрифтов, шрифты связаны с абсолютной ссылкой, поэтому что их можно использовать откуда угодно.

моя проблема в том, что кажется, что я могу использовать шрифты только на том поддомене, где они расположены, на других моих сайтах шрифт не отображается. Используя firebug, я определил, что шрифт-лицо.файл css был успешно связан и загружен. Так почему же шрифт не загружается правильно? Есть ли защита на файлах шрифтов или что-то еще? Я использую все шрифты, с которыми мне разрешено это делать, поэтому я не вижу, почему это происходит. Может быть, это это проблема apache, но я могу скачать шрифт просто отлично, когда я ссылаюсь на него.

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

4 ответов


это потому, что Firefox (из вашего упоминания Firebug) думает, что кросс-домен, даже поддомен, встраивание веб-шрифтов-плохая идея.

вы можете убедить его загружать шрифты из вашего поддомена, добавив Это на верхний уровень .htaccess файл поддомена, в котором обслуживаются ваши шрифты (обновлено для адаптации кода из того же файла в HTML5 Boilerplate):

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

в ответ на это:

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

на спецификация W3C для Access-Control-Allow-Origin не говорит ничего больше, чем либо подстановочный"*" или конкретный домен. До сих пор я нашел это так ответ что предполагает проверку Origin заголовок, но я думаю, что это заголовок только для Firefox. Я не уверен в других браузерах (им даже не нужен .htaccess трюк выше для междоменных веб-шрифтов для работа.)


другой способ исправить это в Firefox-вставить шрифт непосредственно в файл css с помощью кодировки base64. Особенно изящно, если у вас нет доступа к некоторой конфигурации, упомянутой выше.

вы можете создать необходимый код на fontsquirrel.com: в генераторе набора шрифтов выберите экспертный режим, прокрутите вниз и выберите кодирование Base64 в разделе Параметры CSS-загруженный набор шрифтов будет готов к подключению и воспроизведению.

Это также имеет преимущество fringe в сокращении времени загрузки страницы, поскольку для этого требуется один http-запрос меньше.


Если вы не хотите, чтобы ресурсы из всех доменов, но только с поддомена вашего сайта, вы должны сделать это так:

# Allow font, js and css to be loaded from subdomain
SetEnvIf Origin "http(s)?://(.+\.)?(example\.com)$" ORIGIN_DOMAIN=
<IfModule mod_headers.c>
    <FilesMatch "\.(eot|font.css|otf|ttc|ttf|woff|js|png|jpg|jpeg|gif)$">
        Header set Access-Control-Allow-Origin %{ORIGIN_DOMAIN}e env=ORIGIN_DOMAIN
    </FilesMatch>
</IfModule>

источник:http://www.webspeaks.in/2015/01/wordpress-allow-cross-domain-resources.html


использование http://www.fontsquirrel.com/fontface/generator в режиме "expert" и выборе base64 в качестве опции возвращается таблица стилей.css с необходимыми данными в кодировке base64 для использования в нашей таблице стилей. Кажется, работает во всех браузерах, которые мы тестировали, кроме IE8.

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

Спасибо за помощь всем!