@ font-czcionki twarzy działają tylko na własnej domenie

Próbuję stworzyć Typ repozytorium czcionek do użytku na moich stronach internetowych, tak aby móc wywołać dowolną czcionkę w repozytorium w moim css bez żadnej innej konfiguracji. W tym celu utworzyłem subdomenę, na której umieściłem foldery dla każdej czcionki w repozytorium, które zawierało różne typy plików dla każdej czcionki. Umieściłem również plik css o nazwie font-face.css w katalogu głównym subdomeny i wypełnił ją deklaracjami @font-face dla każdej z czcionek, czcionki są połączone bezwzględnym linkiem, dzięki czemu mogą być używane z dowolnego miejsca.

Mój problem polega na tym, że wydaje się, że mogę używać tylko czcionek w tej subdomenie, w której się znajdują, na innych moich stronach czcionka się nie pokazuje. Używając firebug ustaliłem, że font-face.plik css został pomyślnie połączony i załadowany. Dlaczego więc czcionka nie ładuje się poprawnie? Czy pliki czcionek są zabezpieczone? Używam wszystkich czcionek, które powinny mieć do tego prawo, więc nie rozumiem, dlaczego tak się dzieje. Może to Apacz problem, ale mogę pobrać czcionkę po prostu dobrze, gdy link do niego.

Oh, I tak dla jasności, nie naruszam żadnych praw autorskich, ustawiając to, wszystkie czcionki, których używam, są licencjonowane, aby zezwalać na tego typu rzeczy. Chciałbym jednak skonfigurować sposób, w jaki tylko ja mogę mieć dostęp do tego repozytorium czcionek, ale to już inny projekt.

Author: BoltClock, 2010-05-23
Source

4 answers

Dzieje się tak dlatego, że Firefox (z Twojej wzmianki o Firebug) uważa, że osadzanie czcionek między domenami, nawet subdomenami, jest złym pomysłem.

Możesz przekonać go, aby załadował czcionki z subdomeny, dodając je do najwyższego poziomu .htaccess Pliku subdomeny, w której są serwowane Twoje czcionki (zaktualizowano, aby dostosować kod z tego samego pliku w HTML5 Boilerplate):

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

W odpowiedzi na to:

Chciałbym jednak skonfigurować sposób, który tylko ja mogę mieć dostęp do to repozytorium czcionek, ale to inny projekt.

W3C spec dla Access-Control-Allow-Origin nie mówi nic więcej niż symbol wieloznaczny "*" lub konkretna domena. Do tej pory znalazłem to więc odpowiedź , która sugeruje walidację nagłówka Origin, ale myślę, że jest to nagłówek tylko dla Firefoksa. Nie jestem pewien co do innych przeglądarek (nie potrzebują nawet powyższej sztuczki .htaccess, Aby czcionki internetowe działały w różnych domenach).

 92
Author: BoltClock,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 10:31:16

Innym sposobem na naprawienie tego w Firefoksie jest osadzenie czcionki bezpośrednio w pliku css przy użyciu kodowania base64. Szczególnie sprytne, jeśli nie masz dostępu do niektórych konfiguracji wymienionych powyżej.

Możesz wygenerować potrzebny kod na fontsquirrel.com: w generatorze font-face Kit wybierz tryb ekspercki, przewiń w dół i wybierz Base64 Koduj w opcjach CSS-pobrany Font-Kit będzie gotowy do podłączenia i odtwarzania.

Ma to również tę zaletę, że zmniejsza czas ładowania strony, ponieważ wymaga jednego żądania http mniej.

 8
Author: Pierre,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-05-21 17:42:39

Jeśli nie chcesz zezwalać na zasoby ze wszystkich domen, ale tylko z sub domeny witryny, powinieneś zrobić to tak: 

# 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>

Źródło: http://www.webspeaks.in/2015/01/wordpress-allow-cross-domain-resources.html

 4
Author: Arvind Bhardwaj,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-01-03 06:19:30

Using http://www.fontsquirrel.com/fontface/generator w trybie "ekspert" i wybranie opcji base64 zwróciło arkusz stylów.css z niezbędnymi zakodowanymi danymi base64 do użycia w naszym arkuszu stylów. Wygląda na to, że działa we wszystkich przeglądarkach, które testowaliśmy z wyjątkiem IE8.

Napotykamy ten problem najczęściej przy stosowaniu motywów do narzędzi innych firm, takich jak petycja salsa, gdzie jesteśmy zmuszeni hostować czcionkę.

Dzięki za pomoc wszystkim!

 1
Author: Darko Hrgovic,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-04-20 22:00:34