Шрифты @ font-face работают только на своем домене. - PullRequest
Новая
       14

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

57 голосов
/ 23 мая 2010

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

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

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

Ответы [ 4 ]

92 голосов
/ 23 мая 2010

Это потому, что 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 не говорит ничего, кроме подстановочного знака "*" или определенного домена. До сих пор я нашел этот SO-ответ , который предлагает проверить заголовок Origin, но я думаю, что это заголовок только для Firefox. Я не уверен насчет других браузеров (им даже не нужен трюк .htaccess для работы междоменных веб-шрифтов).

8 голосов
/ 26 июля 2011

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

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

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

4 голосов
/ 03 января 2015

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

# Allow font, js and css to be loaded from subdomain
SetEnvIf Origin "http(s)?://(.+\.)?(example\.com)$" ORIGIN_DOMAIN=$0
<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

1 голос
/ 21 апреля 2012

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

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

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

...