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

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

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

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

4 57
css css3 apache-commons-httpclient font-face

4 ответа:

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

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

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

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

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

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

92

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

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

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

8

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

# 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

4

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

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

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

1